使用 CSS 自定義屬性獲得更好的用戶體驗
已發表: 2019-11-29
最後更新 - 2021 年 7 月 8 日
CSS3 帶來了 CSS 規范長期以來的最大補充之一。 它引起了很多轟動，因為它解決了多年來困擾開發人員的一個關鍵問題，也是人們更喜歡使用像 SASS 這樣的預處理器的主要原因：使用變量的能力。
隨著 CSS 變量的添加，許多必須編寫以支持主題等基本功能的代碼不再需要。 這是一個有用的功能，可用於避免重複並啟用更多用例，例如動態字體大小和在 Web 應用程序中添加響應性的簡單性。
擺脫 CSS 變量的混亂
大多數應用程序的一個共同特點是品牌顏色需要在整個應用程序中保持相同和一致。 沒有人會在腦海中存儲十個不同的十六進制值以供將來參考，並且在文件之間來回複製值不僅麻煩，而且對生產力也是不利的。 現在，想像一下如果這些顏色需要改變，必須完成的工作量。
在 WordPress 中使用 CSS 預處理器是處理該問題的最常用方法。 這些提供了對諸如 mixins、嵌套聲明，當然還有變量等一系列特性的支持，這些特性極大地提高了生產力。
您需要做的就是編寫一次代碼，然後將其編譯為 CSS，如果您願意，您可以自由訪問和更改。 但是，無法在運行時找到和更改這些值，例如向您的 Web 應用程序添加深色主題是它們最大的缺點。 這是一個主要問題，不僅因為 SASS 不支持它，而且它可能永遠不會支持。
在 CSS opens 中添加自定義內置變量對我們編寫應用程序的方式產生了重大影響，尤其是在主題和響應式設計方面。
瀏覽器對 CSS 變量的支持是什麼？
這是在討論 CSS 變量時最常見的問題。 根據Caniuse的說法，瀏覽器對 CSS 變量的支持率為 93.16%。 所有現代瀏覽器（Chrome 49+、Firefox 31+、Safari 9.3+、Opera 36+ 和 Edge 16+）都支持它。 與往常一樣，IE 沒有出現在展會上，並且擁有驚人的6.47%的市場份額。 對於必須支持舊瀏覽器的可憐的開發人員，不要擔心。 Polyfills ，或者更準確地說是 ponyfills，是為了拯救這一天。
CSS變量的正式介紹
如果您熟悉 CSS 變量，那麼使用 CSS 變量應該不會有任何問題。
SASS 變量聲明如下：
<上一頁>
$facebook-藍色：#4267B2；
</pre>
雖然 CSS 變量的聲明略有不同：
<上一頁>
：根 {
--品牌顏色：#4267B2；
}
.品牌導航欄{
背景：var（--品牌顏色）；
}
</pre>
請注意兩種語法之間的一些差異：
- CSS 變量前面需要有兩個破折號
- CSS 變量通常在 ':root' 中聲明，但可以隨時重新聲明。
- CSS 屬性是使用 'var()' 函數檢索的。
CSS 變量還提供對幾個附加功能的訪問。
級聯值
CSS 屬性按照正常的級聯規則進行級聯。 換句話說，下面的重新聲明不會影響上面的那些。
<上一頁>
:root { –color: 黃色; }
div {–顏色：藍色； }
#great { –顏色：綠色； }
* { 顏色: var(–color); }
<p>我會變黃，從根繼承！</p>
<div>我是藍色的！</div>
<div id=”太棒了”>
有效！ 我是綠色的！
<p>我也是綠色的！ 從上面繼承！</p>
</div>
</pre>
後備值
'var()' 函數接受幾個參數。 在未定義自定義 CSS 屬性的情況下，第二個可以用作後備值。 對於需要通過 JavaScript 訪問 CSS 變量的任何人來說，這都是一個有用的功能。
它的簽名看起來像 'var(<custom-property-name> [, <declaration-value> ]?)' 並且可以通過以下方式使用
<上一頁>
.品牌導航欄{
背景：var（–品牌顏色，“#4267B2”）；
}
</pre>
如果 '-brand-color' 未定義，將使用“#4267B2”，
通過 JavaScript 訪問
在預處理器上使用 CSS 變量的最佳理由之一是能夠通過 JavaScript 訪問自定義變量。 預處理器變量不在瀏覽器中。 它們在編譯代碼時進行評估。 這樣，無法在瀏覽器中訪問預處理器變量。 使用 CSS 變量，該屬性存在於瀏覽器中，允許即時編輯值。
考慮一個儀表板，它允許用戶通過彈出窗口或類似的方式選擇自定義顏色。
<上一頁>
.品牌導航欄{
背景：var（–品牌顏色，“#4267B2”）；
}
//獲取當前值
getComputedStyle(document.documentElement).getPropertyValue('–brand-color');
//設置值
document.documentElement.style.setProperty('–brand-color', 'red');
//你甚至可以將一個 CSS 屬性分配給另一個
document.documentElement.style.setProperty('--brand-color','var(--secondary-color)');
</pre>
全局和局部範圍
如果您熟悉 JavaScript（或任何編程語言，真的），那麼您可能了解作用域的概念。 變量通常可以定義為只能被代碼的某些部分訪問，稱為本地範圍，或者可以在整個應用程序中使用，稱為全局範圍。
CSS 變量的工作方式類似。 一些變量應該在全局範圍內以便於參考，例如品牌顏色和垂直間距。 這些通常在整個應用程序中保持不變，並且在發生更改時，應該在任何地方反映出來。 相反，可能需要局部作用域的變量包括具有不同大小變體的按鈕。 如果您想更改特定按鈕上的填充，您不希望更改遍歷整個 DOM。 只需在應用程序中的一個點進行更改。
默認情況下，CSS 屬性是本地範圍的。 如果您使用過 JavaScript 或任何其他編程語言，則範圍界定有其自身的一系列問題。 由於它們可以被繼承，它們也像局部變量一樣，如果你不注意它們的使用方式，可能會產生一些有趣的影響。 由於值是級聯的，因此您需要注意如何更改它們，尤其是在涉及 JavaScript 時。
將自定義屬性與媒體查詢一起使用
就像預處理器一樣，使用 CSS 屬性的一個主要缺點是它們不能在媒體查詢中使用。 例如，這將不起作用。
<上一頁>
@media（最小寬度：var（–斷點））{
填充：1rem；
}
</pre>
您可以做的是在媒體查詢中重新定義自定義屬性。 如果您需要在瀏覽器縮小時更改字體大小，那麼您很幸運。 使用 CSS 變量，您可以使用 JavaScript 監聽瀏覽器的更改，並只需一次更改需要縮小的任何大小。
自定義 CSS 屬性有哪些實際應用？
“今天，除了使用 CDN 服務來提高網站性能外，使用 CSS 自定義屬性是提高生產力的最快方法之一，”自定義論文寫作服務網頁設計師 Colby Stuart 建議道。
除了突出的好處之外，它還提高了生產力，是否有任何實際示例可以說明如何在 Web 應用程序中使用它們？
添加暗模式
佔領消費市場的一個新趨勢是所有現代軟件（包括網絡應用程序）對暗模式的需求。 它可能比添加深色背景顏色要復雜一些。 其他需要考慮的事情包括文本顏色將如何變化以及白色背景的圖像將如何受到影響。
所有這一切都是通過首先在整個應用程序中聲明變量來實現的。 當用戶觸發開關使網站主題變暗時，觸發一個改變 CSS 變量的 JavaScript 函數。 如果您的網絡應用程序更複雜，這還可能包括用暗模式友好的圖像替換當前圖像。
在 WordPress 上添加暗模式
CSS 變量的影響力如此之大，以至於它們已經進入了 WordPress 的世界。 今天，為 WordPress 應用程序創建一個黑暗模式（或更一般地說，主題化）是相當簡單的。
大多數 WordPress 開發人員依靠定制器來更改其網站的外觀和功能。 它通過訪問您網站的 CSS 提供對顏色、字體、背景圖像等內容的訪問。 這樣做的主要問題是，通過這種方式更改 CSS 會強制 PHP 重新呈現您的 HTML，並且這樣做會導致服務器將整個文件重新發送到瀏覽器。 您的應用發出了不必要的請求，消耗的數據超出了它的需要。
“如果這樣的應用程序是面向消費者的，你可能會收到很多投訴。 如果你沒有專門的 CSS 文件來存儲你想要更改的任何變量，事情會變得更糟。” Paperowl 評論和簡歷寫作服務出版商的高級開發人員 Helena Newman認為它是 CSS 規範的必要補充。
使用 CSS 變量，在瀏覽器中使用 JavaScript 更改所有顏色。 如果有必要，唯一的請求是將當前主題持久化到服務器。 即便如此，這樣的變量也可以保存在瀏覽器中。
將響應式設計添加到網站
隨著互聯網上的手機數量比以往任何時候都多，對響應式網站的需求從未如此明顯。 響應式設計讓開發人員措手不及的最關鍵方面是改變字體大小。 對於使用多種字體或動態字體的應用程序，跟踪它們並為不同的瀏覽器更改它們是一件苦差事。
相反，自定義 CSS 屬性允許您定義可以在整個網站中使用和重用的通用字體大小。 如果需要更改，您只需調用一個 JavaScript 函數即可。
如果您不需要支持古老的瀏覽器，自定義 CSS 變量可以與（相對）新的網格 CSS 系統一起使用，以完全消除對媒體查詢的需要。
再說一次，如果你需要監聽 CSS 本身的寬度變化，媒體查詢可能仍然是必要的。 這是支持不允許運行 JavaScript 的瀏覽器的唯一方法。
結論
很長一段時間以來，自定義 CSS 變量是規範中最重要的補充。 它們可以通過從您的 CSS 文件中去除雜亂無章並消除提出任何不必要的額外請求的需要來簡化您的設計過程。