實用CSS自定義屬性的模式使用

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

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

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

我們將看到的示例是從我創建和維護的CSS 框架Cutestrap 中簡化和濃縮的模式。

關於瀏覽器支持的簡短說明

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

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

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

模式1：變量

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

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

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

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

我們為舊版瀏覽器聲明了一個粉紅色的後備值。在第二個fill 聲明中，我們將--brand-color 傳遞到var() 函數中，該函數將返回我們為該自定義屬性設置的值。

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

模式2：默認值

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

例如，假設我們為按鈕提供圓角邊框。我們可以創建一個變量——我們將其稱為--roundness——但我們不會像以前那樣定義它。相反，我們在使用變量時將分配一個默認值。

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

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

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

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

模式3：級聯值

現在我們已經掌握了基礎知識，讓我們開始構建我們應得的未來。我真的很懷念AIM 和MySpace 通過允許用戶在個人資料上使用自定義文本和背景顏色來表達自我的個性。

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

基於用戶的主題

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

 .message {
  background-color: var(--student-background, https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff);
  color: var(--student-color, https://www.php.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: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bd55349;
  --student-color: https://www.php.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;
}

這是標記：

<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] 選擇器為我們的學生主題規則集設置了所有學生主題。如果為該學生設置了背景、顏色和字體的自定義屬性，則這些自定義屬性將應用於我們的.message 規則集，因為.message 是包含data-attribute 的div 的子元素，而該div 又包含要使用的自定義屬性值。否則，將使用我們提供的默認值。

可讀性主題覆蓋

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

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

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

 ...

我們利用級聯通過設置更高的特異性來覆蓋學生主題，以便背景、顏色和字體在範圍內，並將應用於每個.message 規則集。

模式4：作用域規則集

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

 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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Example</a>

現在我們已經在<a></a>元素上全局編寫了自定義屬性，並在我們的鏈接狀態上使用了它們，我們不需要再次編寫它們。這些屬性的作用域限定在我們<a></a>元素的規則集中，因此它們僅設置在錨點標籤及其子元素上。這使我們不必污染全局命名空間。

示例：灰度鏈接

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

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

 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Example</a>

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

示例：自定義鏈接

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

 .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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Example</a>
Link Example

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

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

模式5：Mixin

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

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

示例：基線網格基礎

讓我們通過創建一個基線網格來幫助垂直節奏來了解更多關於Mixin 的知識。這樣，我們的內容通過使用一致的間距來獲得令人愉悅的節奏。

 .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);
}

我們將基線網格的規則集應用於.baseline 類及其任何後代。

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

我們還在.baseline 規則集中設置了font-size 和line-height 以使用基線網格中的--font-size 和--line-height。簡而言之，每當節奏發生變化時，行高和字體大小都會相應地變化，同時保持易讀的體驗。

好的，讓我們使用基線。

讓我們創建一個小型網頁。我們將使用我們的--rhythm 自定義屬性來設置所有元素之間的間距。

 .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 id="A-Tiny-Webpage"> 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 設置為它們的自定義屬性對應項才能設置標題和段落。 Mixin 在這些規則集中已被重新計算，但需要在更新的樣式應用於它們之前設置它們。

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

模式6：內聯屬性

我們也可以內聯聲明自定義屬性。讓我們構建一個輕量級網格系統來演示。

 .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>

默認情況下，網格具有大小相等的列，這些列將自動排列成單行。

為了控制列數，我們可以在網格元素上內聯設置--columns 自定義屬性。

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

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

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

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

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

以上是實用CSS自定義屬性的模式使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！