令人期待的 CSS 新功能:让编码更高效

CSS 是一种不断发展的语言。每一次迭代,它都会变得越来越好。因此,了解最新的 CSS 功能非常重要,这样你才能在项目中使用它们,减少对第三方库的依赖。

本文将介绍一些即将推出的 CSS 新特性,这些特性将简化你的开发工作。虽然这些特性尚未在所有浏览器中支持,但可以提前使用它们,以适应未来的项目需求。在不支持这些特性的浏览器中,它们大多会被忽略。

text-wrap 属性

text-wrap 属性用于指定元素中的文本是否应换行。它是 CSS 文本模块第 4 级规范的一部分。

该属性可以接受多个值,但最有趣的值是 balance 和 pretty 。

如果将 text-wrap 属性设置为 balance ,浏览器将尝试以元素的最后一行与第一行一样长的方式对文本进行换行。如果希望元素中的文本具有一致的外观,这将非常有用。例如,在博客文章的标题中。

另一方面,如果将 text-wrap 属性设置为 pretty ,浏览器就会尝试智能地将文本分成块元素,使最后一行不会出现单字/孤字。

作用域 css

现在,我们可以使用 @scope 规则在特定元素内设置 CSS 作用域。从本质上讲,它允许你创建一个只适用于特定元素及其子元素的 CSS 规则。

举例来说,如果你想在某个特定元素内对 CSS 进行范围/限制,可以使用类或 ID 选择器来实现,就像这样。

@scope (.class-component, #id-component) {
  /* CSS rules */
}

下面举例说明如何使用它:

.all-green p {
  color: darkgreen;
}

@scope(.all-pink) {
  p {
    color: #c94f65;
  }
}

上面将确保 .all-pink 元素内的p 元素呈现粉红色,而 p 元素外的 p 元素呈现绿色。

对 CSS 进行作用域界定有助于避免使用过于具体的选择器,也有助于避免在 CSS 中使用 !important 。

自动增加文本区域

CSS 规范中即将出现一个名为 form-sizing 的新 CSS 规则,它将允许我们控制