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 规则，它将允许我们控制 <textarea> 等元素的大小调整行为。

textarea {
    form-sizing: normal;
}

将 form-sizing 属性设置为 normal 后，浏览器将在用户键入 <textarea> 元素时自动增加该元素的高度。

查看过渡

CSS 规范中即将出现一个名为 view-transition 的新元标记，它将允许我们在用户滚动页面时控制视口的转换。

例如，如果想在用户浏览新页面时为视口添加淡入效果，可以这样做。

<meta name="view-transition" content="same-origin">

在这里， same-origin 值将确保只有当用户导航到同一原点内的页面时才会发生转换。

这使得页面之间的过渡更加无缝，不那么生硬。更像一个本地应用程序。

light-dark() 函数

light-dark() 是一个新的 CSS 函数，可让我们为明暗模式指定不同的值

body {
  background-color: light-dark(white, black);
}

这将确保 body 元素的背景颜色在浅色模式下为白色，在深色模式下为黑色。

除了用户的主题偏好外， light-dark() 函数还可用于根据颜色主题属性在两个值之间进行切换。

:root {
  color-scheme: light dark;
}

:root {
  --text-color: light-dark(#333, #ccc); 
  /* In Light Mode = return 1st value. 
  In Dark Mode = return 2nd value. */
}

CSS 中的嵌套

最近，Safari 浏览器技术预览版 162 和 Chrome 浏览器开发版（在浏览器中启用 "实验性网络平台功能 "标志）中发布了一个名为 CSS 嵌套模块的模块。

启用后，就可以在本地 CSS 中编写上述类似于 Sass 的代码。

.parent {
    .child {
        color: red;
    }

    #childWithId {
        color: red;
    }
}