启用PostCSS即将到来的CSS功能

承接上一篇文章《PostCSS指南：改进选择器和媒体查询》，本文将探讨更多扩展CSS功能的PostCSS插件。前文侧重于通过扩展选择器和媒体查询来改进样式表的结构，而本文将重点介绍如何实现即将推出的规范中的新属性和值。本文介绍的插件实现了不同的功能，可以根据您的需求有效地一起或单独使用。

我们先从我最喜欢的插件开始。

关键要点

• PostCSS插件可用于实现即将推出的CSS规范中的新属性和值，有效地扩展CSS的功能。这些插件可以根据开发人员的需求一起或单独使用。
• PostCSS允许开发人员在浏览器正式实现之前使用未来的CSS功能。postcss-initial插件增加了对initial值和all: initial组合的支持，而postcss-autoreset插件会自动重置块级和组件级元素的样式。
• postcss-color-function插件实现了新的color()函数，允许开发人员使用一个或多个“颜色调整器”函数来修改基础颜色。postcss-color-hwb插件实现了新的hwb()函数，用于定义HWB颜色；postcss-color-gray插件实现了gray()函数的polyfill。
• PostCSS提供了一个很有前景的机会来尽早采用和评估新的CSS功能。建议开发人员以全新的视角编写样式表，并列出可用的、能提高生产效率的功能。

将重置提升到一个新的水平

CSS3引入了两个不错的功能：initial值和all属性。initial值与inherit和unset值一起使用，允许您将属性重置为其原始值。all属性用作速记属性，可将所有属性重置为这三种状态之一。虽然两者本身都很有趣，但当一起使用时，它们允许您快速重置特定元素的所有样式，并防止它继承页面父元素的样式。这是编写模块化CSS的又一步！

遗憾的是，IE仍然不支持这两个功能。但是，正如您可能已经猜到的那样，有一个插件可以解决这个问题。

postcss-initial增加了对initial值和all: initial组合的支持。以下是它的工作原理：

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

编译成：

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

默认情况下，它会保留原始属性以及initial，以便原生支持此功能的浏览器使用。

反过来，all属性将被转换为一个很长的重置属性列表。

.container {
  all: initial;
}

会被转换成：

.container {
  /*  此处省略大量重置属性  */
  all: initial;
}

(此处为了篇幅，省略了all: initial展开后的冗长代码)

如果您使用BEM或Suit，此插件与postcss-autoreset配合使用效果很好，后者将自动重置块级和组件级元素的样式。

自定义属性

在处理布局时，我们经常需要在样式表中共享一些值。例如，您的品牌颜色可以用作按钮的背景、链接的文本颜色或文本块的边框。目前，要实现这一点，我们需要在每个使用该颜色的地方重复多次。这种重复使得在更改应用程序中的颜色时，保持调色板的一致性变得很繁琐。

像Less和Sass这样的CSS预处理器已经使用变量解决了这个问题。幸运的是，W3C正在研究一个类似的概念，称为自定义属性。尽管解决了相同的问题，但它们的工作方式与预处理器中的变量不同。Less和Sass变量在编译时解析。当您将Less或Sass编译为CSS时，编译器将查找与当前编译范围对应的变量声明，并用相应的值替换每个实例。这意味着变量的解析值完全取决于它在代码中的使用位置。反过来，自定义属性是在DOM中为元素定义的，并且只能被它们的子元素访问。这意味着变量的值取决于元素在DOM中的位置，并且只能在运行时解析。

到目前为止，您应该会皱眉或扬眉。如果变量的值只在运行时才知道，PostCSS插件如何解析它呢？事实是，它不能。但是，它确实提供了一种使用该功能子集的方法。如果我们在:root元素中定义所有自定义属性，这些属性将可用于页面上的所有元素。这意味着我们可以在编译时解析它们。

这是一个简单的示例，说明它可能是什么样子：

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

将编译成：

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

请注意，--font-size变量未定义，因此它被替换为20px的回退值。这里重要的是将所有自定义属性保留在:root内。在其他地方定义的属性将被忽略，因为插件无法充分处理它们。您可以从这里开始，当更多浏览器开始支持它时，您可以扩展其用法。Chrome从49版开始就已支持它们。

逻辑属性

如果您曾经开发过跨越不同书写方向文化的国际化网站，您就会知道维护多个版本的界面（例如从左到右或从右到左）需要做些什么。为了满足这种需求，W3C引入了一个新的逻辑属性概念。一种让我们不必考虑物理方向（如右或左），而是考虑逻辑方向——开始和结束的方法。该规范仍在进行中，但您已经可以使用postcss-logical-props插件尝试其中一些内容。

它支持使用某些逻辑属性（例如border-block-start和border-block-end、offset-block-start和offset-block-end）生成从左到右和从右到左的网站版本。这些属性被编译成它们的左或右替代方案。您可以指示插件编译样式表的LTR和RTL版本，然后在用户更改语言时在应用程序中切换它们。

例如，如果您有以下CSS：

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

使用选项{ dir: 'LTR' }调用插件将产生以下结果：

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

而使用{ dir: 'RTL' }将为您提供镜像图像：

.container {
  all: initial;
}

新的颜色功能

PostCSS提供了一整组插件，这些插件提供了用于处理颜色 的新功能。

颜色调整

postcss-color-function插件实现了新的color()函数。此函数允许您使用一个或多个“颜色调整器”函数来修改基础颜色。每个颜色调整器都可以以特定方式操纵颜色。

以下是如何使用它的几个示例：

.container {
  /*  此处省略大量重置属性  */
  all: initial;
}

将编译成以下颜色：

:root {
  --text-color: red;
  --background: blue;
}

h1 {
  color: var(--text-color);
  font-size: var(--font-size, 20px);
}
button {
  background-color: var(--background);
}

规范中可以找到完整的颜色调整器列表。此插件可以与自定义属性一起非常有效地使用。您可以定义一组基础颜色并根据它们计算其他颜色。这样，如果您决定更改基础颜色，调色板的其余部分将相应更新。

HWB颜色表示法

HWB代表色相-白度-黑度，这是一种定义颜色的替代方法。它使用0到360的色相值来描述颜色，然后添加0%到100%的白度和黑度。此表示法类似于HSL，并且比RGB更容易理解。postcss-color-hwb插件实现了新的hwb()函数，用于定义HWB颜色。几个例子：

h1 {
  color: red;
  font-size: 20px;
}
button {
  background-color: blue;
}

将生成以下颜色：

.text {
  border-block-start: 1px solid blue;
  text-align: start;
  padding-block-end: 10px;
  margin-block-start: 20px;
}

gray() 函数

CSS颜色模块还引入了方便的gray()函数。它可以用于生成灰色，而无需指定任何冗余信息，例如RGB颜色中的所有三个通道。postcss-color-gray插件实现了该函数的polyfill，并且使用起来非常简单：

.text {
  border-left: 1px solid blue;
  text-align: left;
  padding-right: 10px;
  margin-left: 20px;
}

上面的代码将生成不同深浅的灰色：

.text {
  border-right: 1px solid blue;
  text-align: right;
  padding-left: 10px;
  margin-right: 20px;
}

总结

这绝不是所有可用CSS插件的完整列表，而只是一些更有趣的插件的选择。您可以在postcss.parts上探索更多插件。

CSS正在蓬勃发展，PostCSS也随之蓬勃发展。是的，我们都在热切地等待浏览器对这些新功能的原生支持，但PostCSS为我们提供了一个很有前景的机会来尽早采用和评估这些功能。这里的总体建议是尝试从预处理器的熟悉用法中退后一步，并从新的角度来看待编写样式表。尝试列出可用的、能提高您生产效率的功能，并在您的工作流程中使用它们。您可能会很快意识到，这些正是您一直缺少的功能。

关于使用PostCSS启用即将推出的CSS功能的常见问题

（此处省略了FAQ部分，因为篇幅过长，且与伪原创目标不符。FAQ部分内容可以根据需要重新组织和改写，但保持原意不变。）

以上是启用PostCSS即将到来的CSS功能的详细内容。更多信息请关注PHP中文网其他相关文章！