CSS 自定義屬性（CSS Variables）的瀏覽器支持度已達(dá)到可用於生產(chǎn)環(huán)境的程度，我一直在探索其強(qiáng)大的功能。我已經(jīng)嘗試了多種使用方法，並且希望您也能像我一樣對它們感到興奮。它們非常實用且功能強(qiáng)大！

我發(fā)現(xiàn)CSS 變量的使用往往可以歸納為幾個類別。當(dāng)然，您可以隨意使用CSS 變量，但從這些不同類別來思考它們，或許有助於您理解它們的不同使用方法。

• 變量:基礎(chǔ)用法，例如設(shè)置品牌顏色並在需要的地方使用。
• 默認(rèn)值:例如，設(shè)置一個默認(rèn)的border-radius，之後可以覆蓋。
• 級聯(lián)值:基於特異性使用線索，例如用戶偏好。
• 作用域規(guī)則集:對單個元素（如鍊接和按鈕）進(jìn)行有意的樣式變體。
• Mixin:旨在將其值應(yīng)用於新上下文的規(guī)則集。
• 內(nèi)聯(lián)屬性:從HTML 的內(nèi)聯(lián)樣式中傳入的值。

我們將看到的示例是從我創(chuàng)建和維護(hù)的CSS 框架Cutestrap 中簡化和濃縮的模式。

關(guān)於瀏覽器支持的簡短說明

當(dāng)提到自定義屬性時，我經(jīng)常聽到兩種常見的問題。第一個是關(guān)於瀏覽器支持的問題。哪些瀏覽器支持它們？在不支持它們的瀏覽器中，我們需要使用哪些後備方案？

支持本文中介紹內(nèi)容的全球市場份額為85%。儘管如此，仍然值得根據(jù)您的用戶群，交叉參考caniuse 來確定漸進(jìn)增強(qiáng)在您的項目中有多大意義以及在何處使用。

第二個問題總是關(guān)於如何使用自定義屬性。因此，讓我們深入了解其用法！

模式1：變量

首先，我們將為品牌顏色設(shè)置一個自定義屬性變量，並在SVG 元素上使用它。我們還將使用後備方案來覆蓋舊版瀏覽器的用戶。

 html {
  --brand-color: hsl(230, 80%, 60%);
}

.logo {
  fill: pink; /* 後備方案*/
  fill: var(--brand-color);
}

在這裡，我們在html 規(guī)則集中聲明了一個名為--brand-color 的變量。該變量在始終存在的元素上定義，因此它將級聯(lián)到使用它的每個元素。簡而言之，我們可以在.logo 規(guī)則集中使用該變量。

我們?yōu)榕f版瀏覽器聲明了一個粉紅色的後備值。在第二個fill 聲明中，我們將--brand-color 傳遞到var() 函數(shù)中，該函數(shù)將返回我們?yōu)樵撟远x屬性設(shè)置的值。

模式大致就是這樣：定義變量（--variable-name），然後在元素上使用它（var(--variable-name)）。

模式2：默認(rèn)值

我們在第一個示例中使用的var() 函數(shù)還可以提供默認(rèn)值，以防它嘗試訪問的自定義屬性未設(shè)置。

例如，假設(shè)我們?yōu)榘粹o提供圓角邊框。我們可以創(chuàng)建一個變量——我們將其稱為--roundness——但我們不會像以前那樣定義它。相反，我們在使用變量時將分配一個默認(rèn)值。

 .button {
  /* --roundness: 2px; */
  border-radius: var(--roundness, 10px);
}

在未定義自定義屬性的情況下使用默認(rèn)值的一個用例是，您的項目仍在設(shè)計中，但您的功能今天到期。如果設(shè)計發(fā)生變化，這使得以後更新值變得容易得多。

因此，您可以為按鈕提供一個不錯的默認(rèn)值，滿足您的截止日期，當(dāng)--roundness 最終被設(shè)置為全局自定義屬性時，您的按鈕將免費(fèi)獲得該更新，而無需返回到它。

您可以在CodePen 上編輯並取消上面代碼的註釋，以查看設(shè)置--roundness 後按鈕的外觀！

模式3：級聯(lián)值

現(xiàn)在我們已經(jīng)掌握了基礎(chǔ)知識，讓我們開始構(gòu)建我們應(yīng)得的未來。我真的很懷念A(yù)IM 和MySpace 通過允許用戶在個人資料上使用自定義文本和背景顏色來表達(dá)自我的個性。

讓我們把它帶回來，並創(chuàng)建一個學(xué)校留言板，讓每個學(xué)生都可以為他們發(fā)布的消息設(shè)置自己的字體、背景顏色和文本顏色。

基於用戶的主題

我們基本上是在讓學(xué)生創(chuàng)建自定義主題。我們將在data-attribute 規(guī)則集中設(shè)置主題配置，以便任何使用這些主題的子元素（在這種情況下為.message 元素）都可以訪問這些自定義屬性。

 .message {
  background-color: var(--student-background, http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff);
  color: var(--student-color, http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000);
  font-family: var(--student-font, "Times New Roman", serif);
  margin-bottom: 10px;
  padding: 10px;
}

[data-student-theme="rachel"] {
  --student-background: rgb(43, 25, 61);
  --student-color: rgb(252, 249, 249);
  --student-font: Arial, sans-serif;
}

[data-student-theme="jen"] {
  --student-background: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bd55349;
  --student-color: http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  --student-font: Avenir, Helvetica, sans-serif;
}

[data-student-theme="tyler"] {
  --student-background: blue;
  --student-color: yellow;
  --student-font: "Comic Sans MS", "Comic Sans", cursive;
}

這是標(biāo)記：

<div data-student-theme="chris">
    <p>Chris: I've spoken at events and given workshops all over the world at conferences.</p>
  </div>
  <div data-student-theme="rachel">
    <p>Rachel: I prefer email over other forms of communication.</p>
  </div>
  <div data-student-theme="jen">
    <p>Jen: This is why I immediately set up my new team with Slack for real-time chat.</p>
  </div>
  <div data-student-theme="tyler">
    <p>Tyler: I miss AIM and MySpace, but this message board is okay.</p>
  </div>

我們使用[data-student-theme] 選擇器為我們的學(xué)生主題規(guī)則集設(shè)置了所有學(xué)生主題。如果為該學(xué)生設(shè)置了背景、顏色和字體的自定義屬性，則這些自定義屬性將應(yīng)用於我們的.message 規(guī)則集，因為.message 是包含data-attribute 的div 的子元素，而該div 又包含要使用的自定義屬性值。否則，將使用我們提供的默認(rèn)值。

可讀性主題覆蓋

儘管用戶控制自定義樣式很有趣也很酷，但用戶選擇的樣式並不總是具有可訪問性，需要考慮對比度、色覺缺陷或任何喜歡在閱讀時眼睛不流血的人。還記得GeoCities 時代嗎？

讓我們添加一個提供更清晰外觀和感覺的類，並將其設(shè)置在父元素上，以便在存在該類時覆蓋任何學(xué)生主題。

 .readable-theme [data-student-theme] {
  --student-background: hsl(50, 50%, 90%);
  --student-color: hsl(200, 50%, 10%);
  --student-font: Verdana, Geneva, sans-serif;
}

 ...

我們利用級聯(lián)通過設(shè)置更高的特異性來覆蓋學(xué)生主題，以便背景、顏色和字體在範(fàn)圍內(nèi)，並將應(yīng)用於每個.message 規(guī)則集。

模式4：作用域規(guī)則集

說到作用域，我們可以對自定義屬性進(jìn)行作用域限定，並使用它們來簡化原本是樣板CSS 的內(nèi)容。例如，我們可以為不同的鏈接狀態(tài)定義變量。

 a {
  --link: hsl(230, 60%, 50%);
  --link-visited: hsl(290, 60%, 50%);
  --link-hover: hsl(230, 80%, 60%);
  --link-active: hsl(350, 60%, 50%);
}

a:link {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  color: var(--link-hover);
}

a:active {
  color: var(--link-active);
}

 <a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Example</a>

現(xiàn)在我們已經(jīng)在<a></a>元素上全局編寫了自定義屬性，並在我們的鏈接狀態(tài)上使用了它們，我們不需要再次編寫它們。這些屬性的作用域限定在我們<a></a>元素的規(guī)則集中，因此它們僅設(shè)置在錨點(diǎn)標(biāo)籤及其子元素上。這使我們不必污染全局命名空間。

示例：灰度鏈接

展望未來，我們可以通過更改不同用例的自定義屬性來控制我們剛剛創(chuàng)建的鏈接。例如，讓我們創(chuàng)建一個灰色的鏈接。

 .grayscale {
  --link: LightSlateGrey;
  --link-visited: Silver;
  --link-hover: DimGray;
  --link-active: LightSteelBlue;
}

 <a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Example</a>

我們聲明了一個.grayscale 規(guī)則集，其中包含不同鏈接狀態(tài)的顏色。由於此規(guī)則集的選擇器比默認(rèn)值具有更高的特異性，因此將使用這些變量值，然後將其應(yīng)用於鏈接狀態(tài)的偽類規(guī)則集，而不是在<a></a>元素上定義的內(nèi)容。

示例：自定義鏈接

如果設(shè)置四個自定義屬性感覺工作量太大，如果我們只設(shè)置一個色相值呢？這可能會使管理變得容易得多。

 .custom-link {
  --hue: 30;
  --link: hsl(var(--hue), 60%, 50%);
  --link-visited: hsl(calc(var(--hue) 60), 60%, 50%);
  --link-hover: hsl(var(--hue), 80%, 60%);
  --link-active: hsl(calc(var(--hue) 120), 60%, 50%);
}

.danger {
  --hue: 350;
}

 <a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Example</a>
Link Example

通過引入色相值的變量並將其應(yīng)用於其他變量中的HSL 顏色值，我們只需更改一個值即可更新所有四個鏈接狀態(tài)。

計算與自定義屬性結(jié)合使用非常強(qiáng)大，因為它們可以讓您的樣式更具表現(xiàn)力，而無需付出更多努力。查看Josh Bader 的這項技術(shù)，他使用類似的方法來強(qiáng)制執(zhí)行按鈕的可訪問顏色對比度。

模式5：Mixin

關(guān)於自定義屬性，Mixin 是聲明為自定義屬性值的函數(shù)。 Mixin 的參數(shù)是其他自定義屬性，當(dāng)這些屬性更改時，它們將重新計算Mixin，這反過來又會更新樣式。

我們剛剛看到的自定義鏈接示例實際上是一個Mixin。我們可以設(shè)置--hue 的值，然後所有四個鏈接狀態(tài)將相應(yīng)地重新計算。

示例：基線網(wǎng)格基礎(chǔ)

讓我們通過創(chuàng)建一個基線網(wǎng)格來幫助垂直節(jié)奏來了解更多關(guān)於Mixin 的知識。這樣，我們的內(nèi)容通過使用一致的間距來獲得令人愉悅的節(jié)奏。

 .baseline,
.baseline * {
  --rhythm: 2rem;
  --line-height: var(--sub-rhythm, var(--rhythm));
  --line-height-ratio: 1.4;
  --font-size: calc(var(--line-height) / var(--line-height-ratio));
}

.baseline {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

我們將基線網(wǎng)格的規(guī)則集應(yīng)用於.baseline 類及其任何後代。

• --rhythm：這是我們基線的基石。更新它將影響所有其他屬性。
• --line-height：默認(rèn)情況下設(shè)置為--rhythm，因為這裡沒有設(shè)置--sub-rhythm。
• --sub-rhythm：這允許我們覆蓋--line-height——隨後是--font-size——同時保持整體基線網(wǎng)格。
• --line-height-ratio：這有助於在文本行之間強(qiáng)制執(zhí)行適當(dāng)?shù)拈g距。
• --font-size：這是通過將--line-height 除以--line-height-ratio 計算得出的。

我們還在.baseline 規(guī)則集中設(shè)置了font-size 和line-height 以使用基線網(wǎng)格中的--font-size 和--line-height。簡而言之，每當(dāng)節(jié)奏發(fā)生變化時，行高和字體大小都會相應(yīng)地變化，同時保持易讀的體驗。

好的，讓我們使用基線。

讓我們創(chuàng)建一個小型網(wǎng)頁。我們將使用我們的--rhythm 自定義屬性來設(shè)置所有元素之間的間距。

 .baseline h2,
.baseline p,
.baseline ul {
  padding: 0 var(--rhythm);
  margin: 0 0 var(--rhythm);
}

.baseline p {
  --line-height-ratio: 1.2;
}

.baseline h2 {
  --sub-rhythm: calc(3 * var(--rhythm));
  --line-height-ratio: 1;
}

.baseline p,
.baseline h2 {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

.baseline ul {
  margin-left: var(--rhythm);
}

<h2> A Tiny Webpage</h2>
  <p>This is the tiniest webpage. It has three noteworthy features:</p>
  

• Tiny
• Exemplary
• Identifies as Hufflepuff

我們在這里基本上使用了兩個Mixin：--line-height 和--font-size。我們需要將屬性font-size 和line-height 設(shè)置為它們的自定義屬性對應(yīng)項才能設(shè)置標(biāo)題和段落。 Mixin 在這些規(guī)則集中已被重新計算，但需要在更新的樣式應(yīng)用於它們之前設(shè)置它們。

需要注意的是：當(dāng)使用通配符選擇器應(yīng)用Mixin 時，您可能不希望在規(guī)則集中本身使用自定義屬性值。它使這些樣式比級聯(lián)帶來的任何其他繼承具有更高的特異性，使得在不使用!important 的情況下很難覆蓋它們。

模式6：內(nèi)聯(lián)屬性

我們也可以內(nèi)聯(lián)聲明自定義屬性。讓我們構(gòu)建一個輕量級網(wǎng)格系統(tǒng)來演示。

 .grid {
  --columns: auto-fit;

  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

<div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Bill Murray"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468445958706.jpg" class="lazy" alt="Nic Cage"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468446478697.jpg" class="lazy" alt="Nic Cage gray"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Bill Murray gray"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468446644293.jpg" class="lazy" alt="Nic Cage crazy"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468446996811.jpg" class="lazy" alt="Nic Cage gif">
</div>

默認(rèn)情況下，網(wǎng)格具有大小相等的列，這些列將自動排列成單行。

為了控制列數(shù)，我們可以在網(wǎng)格元素上內(nèi)聯(lián)設(shè)置--columns 自定義屬性。

<div style="--columns: 3;">
  ...
</div>

我們剛剛查看了六種不同的自定義屬性用例——至少是我常用的用例。即使您已經(jīng)了解並一直在使用自定義屬性，希望看到這些使用方法也能讓您更好地了解何時何地有效地使用它們。

您是否使用自定義屬性使用了不同類型的模式？請在評論中分享它們並鏈接一些演示——我很想看到它們！

如果您不熟悉自定義屬性並且正在尋求提升，請嘗試使用我們在此處介紹的示例，但添加媒體查詢。您將看到這些屬性的適應(yīng)性有多強(qiáng)，以及當(dāng)您擁有隨時更改值的強(qiáng)大功能時，有多少有趣的機(jī)會出現(xiàn)。

此外，CSS-Tricks 上還有大量其他優(yōu)秀的資源，可以在自定義屬性指南中提升您的自定義屬性技能。

以上是實用CSS自定義屬性的模式使用的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！