堅定地使用 CSS Custom Properties

　　自定義屬性（Custom Properties）是一個很有魅力的 CSS 新特性，現代瀏覽器廣泛 支援。但是遇到那些不支援 CSS Custom Properties 的老掉牙瀏覽器我們該怎麼辦？等著這些瀏覽器死翹翹了再支援，還是使用預處理武裝 CSS？又或者強硬起來，對它們一笑了之？

　　之前藉助 LESS 或者 Sass 這樣預處理工具在樣式中使用變數，而今Custom Properties 在 CSS 實現變數的原生支援。

　　如何使用自定義屬性？其實很簡單，在樣式規則錢新增 -- 即可：

--color-text-default: black;

　　偏愛用下劃線？下面這樣也沒問題：

--color_text_default: black;

　　在屬性名稱中，橫線和下劃線都可以使用，作死使用空格是不行的。

　　自定義屬性名大小寫敏感，--color-text-default 和 --Color-Text-Default 是不一樣的哦。

　　使用 var() 函式可以獲取到自定屬性的值，這樣就可以在樣式規則中使用自定義屬性。如下例，瀏覽器獲取 --color-text-default 的值 black，應用到 body 元素上。

body {
    color: var(--color-text-default);
}

　　與 LESS 或者 Sass 中的變數一樣，CSS Custom Properties 可以避免重複地在樣式表中編寫顏色、字型或者尺寸等樣式；不過除了這些 CSS Custom Properties 還有更多的特點，級聯——可以根據平臺的不同，通過 media query 查詢來修改；更厲害的是， JavaScript 可以修改自定義屬性的值。

譯註： Custom Properties 本質上是自定義屬性，即 CSS 屬性前面新增 — 即是自定義屬性；藉助 CSS 的 var() 函式，才可以使用這些自定義屬性。例如：var(--header-color）。比起前處理器提供的變數特性，自定義屬性還有三個特點：層疊／級聯，執行時，JavaScript API。

　　Serg Hospodarets 寫了一篇極好的文章介紹 CSS Custom Properties，示例詳盡，探索了各種可能用法。

　瀏覽器支援

　　看到這裡你因該會問瀏覽器支援情況如何？那我們就來看看。最新版的 Chrome、Edge、Firefox、Opera 和 Safari 支援，IE 11 及以前、Opera Mini 情況不容樂觀。

　　總是這樣對不對？

　　不過別擔心，可以使用 @support 指令來檢查瀏覽器是否支援自定義屬性：

--color-text-default: black;

body {
    color: black;
}

@supports((--foo: bar)) {
    body {
        color: var(--color-text-default);
    }
}

　　在 Demo 中，一開始把 body 文字顏色設定為黑色，後面如果瀏覽器支援我們偽造的 foo 變數，則用一個自定義屬性值覆蓋之。

　預設替代

　　如果使用的變數未定義會怎麼樣？沒有問題，瀏覽器會忽略這一條規則。如果你想確保萬無一失，可以使用替代指定一個備選值。

body {
    color: var(--color-text-default, black);
}

　　替代與 CSS 中的字型定義有點像，一個使用逗號隔開的列表。如果自定義屬性沒有值，瀏覽器忽略之使用列表中的下一個值。

譯註：原文這裡的說並不準確。var( <custom-property-name> [, <declaration-value> ]? )，第一個逗號之後的內容都會被當作備選值。例如，var(--foo, red, blue)，備選值是 red, blue。參考：CSS Custom Properties for Cascading Variables Module Level 1

　前處理器

　　我們確實可以利用前處理器來把 Custom Properties 轉為相容的 CSS 程式碼，不過先打住，兄弟。

　　同樣的方式以前是不是也搞過？過去為了使用 CSS3 的那些“高階”特性，比如 border-radius、css columns、Flexbox 等等，我們工程師各種小技巧還少麼？問題確實解決了，只是程式碼寫得噁心。

　　我想還有一種更好的方式——在支援的瀏覽器中盡情使用 CSS Custom Properties ，為不支援的瀏覽器提供合適的稍有差別的體驗。怎麼地？之前我們也這麼幹過呀！

　兩種色調的 Stuff & Nonsense

譯註：Stuff & Nonsense 是原作者的站點。

　　在 IE6 臭名昭著的時代，我為我的站點提供了兩套設計。

　　針對那個時代的現代瀏覽器，網站上到處都是新潮的各種顏色的箭頭和靶子。我使用了 CSS 屬性選擇來實現，當年這可是高階特性：

[class="banner"] {
    background-colour: red;
}

　　IE6 會忽略那些無法解析的選擇器，因此，如果使用者用 IE6 訪問，會看到一個黑白為主的站點，這些樣式我使用類選擇器實現的：

.banner {
    background-colour: black;
}

[class="banner"] {
    background-colour: red;
}

　　不用說，我這樣做大家會覺得我腦子不正常，但是 Microsoft 曾今使用我的網站作為 IE7 支援屬性選擇器的參考。他們確實做了，就像我說的一樣：”做一個更好的瀏覽器吧！”。

　過時瀏覽器，一邊呆著去

　　好了，這個例子和瀏覽器不支援 CSS Custom Properties，有什麼關係？如何才能利用這些高階特性？不用擔心瀏覽器不支援，不用實現複雜的替代方案，不用花數個小時讓替代方案和設計保持一致。

　　答案就在於 CSS 本身，而且一直如此，瀏覽器會直接忽略它們不認識的東西。

　　我們要做的很簡單，首先指定一個與設計大相徑庭的值，然後在再使用 CSS 自定義屬性覆蓋之。

body{
    color: black;
    color:var(--color-text-default, black);
}

　　所有瀏覽器都懂第一個值（black），如果瀏覽器足夠聰明，懂得 第二個值（var(--color-text-default)），就會覆蓋第一個值。過時瀏覽器不理解就會裝作看不到，沒效果。這沒有問題，更不會死人。

　　對所有的自定義屬性都做這樣的處理。為使用過時瀏覽器的使用者提供更簡單的替代設計到樣式中，就像我在 Stuff & Nonsense 上做的一樣。

　結論

　　我相信沒人願意看到網站變壞或者不被別人喜歡——我也不想這樣——但是沒必要要求在每個瀏覽器裡展示都一致。我們可以為使用過時瀏覽器的用提供一個設計相對簡單的替代方案。

　　做是否啟用新的 CSS 特性的決定時，不要老往技術上考量，有時候可能需要改變一下對所有瀏覽器都要支援的態度。對老舊瀏覽器不要心慈手軟，接受 CSS Custom Properties 帶來的紅利，堅定地用起來！

　　更多資源：

• It’s Time To Start Using CSS Custom Properties—Smashing Magazine
• Using CSS variables correctly—Mike Riethmuller
• Developing Inspired Guides with CSS Custom Properties (variables)—Andy Clarke