帶有自定義屬性的大陷阱

最近我發現不少人（包括我自己）都被CSS自定義屬性的這個特性搞糊塗了，所以決定把它記錄下來。

讓我們在CSS中添加幾個自定義屬性：

 html {
  --color-1: red;
  --color-2: blue;
}

我們立即使用它們來創建一個背景漸變：

 html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}

現在假設頁面上有兩個div：

<div></div>
<div></div>

讓我們來設置它們的樣式：

 div {
  background: var(--bg);
}

這完全有效！太棒了！

現在讓我們修改一下樣式。我不希望它從紅色漸變到藍色，我希望它從綠色漸變到藍色。很簡單，我將紅色更新為綠色：

 html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}
div {
  background: var(--bg);
}
.variation {
  --color-1: green;
}

無效！ （警笛聲大作，喇叭聲震耳，家畜四處躲藏）。

朋友們，這不起作用。

據我理解，問題在於--bg從未在任何div上聲明過。它可以使用--bg ，因為它在更高級別被聲明了，但是當它被使用時，它的值已經被鎖定。僅僅因為你更改了--bg聲明時所使用的其他屬性，並不意味著該屬性會去尋找它被用作依賴項的所有位置並更新所有使用它的內容。

唉，這個解釋感覺不太對。但這已經是我能想到最好的解釋了。

解決方案？嗯，有幾個。

解決方案1：將變量作用域限制在使用它的位置。

你可以這樣做：

 html {
  --color-1: red;
  --color-2: blue;
}

div {
  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
  background: var(--bg);
}
.variation {
  --color-1: green;
}

現在--bg在兩個div上都被聲明了，對--color-1依賴項的更改確實有效。

解決方案2：使用逗號分隔設置大多數變量的選擇器。

假設你做了在:root設置一堆變量的常見操作。然後你遇到了這個問題。你可以簡單地向主要聲明中添加額外的選擇器，以確保你命中正確的範圍。

 html,
div {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}
div {
  background: var(--bg);
}
.variation {
  --color-1: green;
}

在其他一些可能不太牽強的例子中，它可能看起來像這樣：

 :root, 
.button,
.whatever-it-is-a-bandaid {
  --padding-inline: 1rem;
  --padding-block: 1rem;
  --padding: var(--padding-block) var(--padding-inline);
}

.button {
  padding: var(--padding);
}
.button.less-wide {
  --padding-inline: 0.5rem;
}

解決方案3：全面模式

去他的——到處都放變量。

 * {
  --access: me;
  --whereever: you;
  --want: to;

  --hogwild: var(--access) var(--whereever);
}

這不是一個好方案。我最近聽到過一次聊天，其中一個中等規模的網站因頁面渲染延遲了500毫秒，因為頁面的每次繪製都需要計算所有屬性。它“有效”，但這是少數情況下你可以通過選擇器導致合法性能問題的例子之一。

解決方案4：引入新的“默認”屬性和回退

此處所有功勞都歸功於Stephen Shaw，我在他關於所有這些內容的探索中首先看到了這種混淆。

讓我們回到我們第一次演示這個問題的地方：

 html {
  --color-1: red;
  --color-2: blue;

  --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}

我們要做的是給自己兩樣東西：

1. 一種覆蓋整個背景的方法
2. 一種覆蓋漸變背景一部分的方法

所以我們要這樣操作：

 html {
  --color-1: red;
  --color-2: blue;
}
div {
  --bg-default: linear-gradient(to right, var(--color-1), var(--color-2));
  background: var(--bg, var(--bg-default));
}

請注意，我們根本沒有聲明--bg 。它只是坐在那裡等待一個值，如果它得到一個值，那就是“獲勝”的值。但如果沒有，它將回退到我們的--bg-default 。現在……

1. 如果我設置--color-1或--color-2 ，它將按預期替換漸變的那一部分（只要我在接觸到其中一個div的選擇器上執行此操作）。
2. 或者，我可以將--bg設置為將整個背景重置為我想要的任何內容。

感覺是一種很好的處理方式。

有時CSS自定義屬性確實存在錯誤。但這並不是其中之一。即使對我來說它有點像錯誤，顯然它不是。只是你必須了解的那些事情之一。

以上是帶有自定義屬性的大陷阱的詳細內容。更多資訊請關注PHP中文網其他相關文章！