啟用PostCSS即將到來的CSS功能-css教學-PHP中文網

首頁

web前端

css教學

啟用PostCSS即將到來的CSS功能

Joseph Gordon-Levitt

Feb 21, 2025 am 09:30 AM

Enabling Upcoming CSS Features with PostCSS

承接上一篇文章《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為我們提供了一個很有前景的機會來儘早採用和評估這些功能。這裡的總體建議是嘗試從預處理器的熟悉用法中退後一步，並從新的角度來看待編寫樣式表。嘗試列出可用的、能提高您生產效率的功能，並在您的工作流程中使用它們。您可能會很快意識到，這些正是您一直缺少的功能。