【譯】巧用 CSS 變數實現自動首碼

標籤：syntax   status   post   top   blog   init   div   sha   ant   

轉https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html

最近，當我在製作 markapp.io 這個小網站的時候，我想出一個巧妙的技巧用在 CSS 變數上，我們可以天然地使用它們的動態本質。讓我們看一下當你想使用一個屬性，但是這個屬性有不同的版本，一個無首碼的標準版和一個或多個有首碼的版本的情形。在這裡我舉一個例子，比如我們使用clip-path，目前需要同時使用無首碼的版本和一個-webkit-首碼的版本，我的這個方法可以適用於這種情況，不管這個 CSS 屬性是什麼，有多少種首碼，只要它不論什麼首碼的值都是同樣的就可以。

第一步是在所有元素上定義一個 --clip-path 屬性，值是 initial。這樣阻止這個屬性在每一次使用的時候被繼承，而由於 * 沒有特異性，任何使用了 --clip-path 的聲明都能被覆蓋。然後你定義所有不同版本的屬性名稱，值為 var(--clip-path)：

* {  --clip-path: initial;  -webkit-clip-path: var(--clip-path);  clip-path: var(--clip-path);}

這樣，在我們需要使用 clip-path 的地方，我們都用 --clip-path 替代，它可以正常工作：

header {  --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%);}

甚至連 !important 都可以正常工作，因為它影響 CSS 變數的級聯。此外，如果由於某些原因你想要明確地設定 -webkit-clip-path，你也可以正常寫，這也是因為 * 是零特異性（意味著是最低優先順序的選擇符——譯者注）。這種用法的主要缺點是要求瀏覽器必須同時支援你使用的屬性和 CSS 變數才能正常工作。不過，除了 Edge 之外，所有的瀏覽器都支援 CSS 變數而 Edge 也在準備支援它。除了上面這個問題，我沒發現其它的缺點了（除了顯然必須使用與標準屬性有些不同的屬性之外），但是如果你有發現別的坑，請在評論裡面留言讓我知道！

我想，CSS 變數的巧妙用法還有許多有待發掘。我想要知道這個技巧是否能改進一下讓它支援自訂 css 屬性全寫，比如將 box-shadow 分開成 --box-shadow-x 和 --box-shadow-y 等等，但是目前我還沒想到好辦法。你有好辦法嗎？??

 

【譯】巧用 CSS 變數實現自動首碼