CSS自定義屬性級聯變量var()

全部隨筆/CSS3

---

 

作為前端小白，熱衷於前端技術，最近正在學習CSS3。前幾天看見一篇文章：《必須了解的CSS變量（var）》，看見這標題就立刻被吸引了。納尼納尼？var不是JavaScript的關鍵字么，什么時候CSS也能用了？話說啥時候CSS也能聲明變量了？難道不是像SASS/SCSS這樣的CSS預編譯器的功能么？

在閱讀博文及更加深入的查閱后，寫了此篇博文，以供交流。文中有多處引用原博文內容，若有侵權，請聯系我速刪。文末附原博文及相關引用鏈接。

名稱

• 開始時被叫做“CSS變量”
• 經過擴展和重構后，改為“CSS自定義屬性”
• CSS增加@apply規則后，名稱變為“CSS自定義屬性級聯變量”

語法

 1.定義語法：--variableName: value;

  變量名稱（variableName）使用規范：

• 以"--"開頭，后面可以是數字、字母、下划線、連字符、漢字等，但不能包含$、[、^、(、%等字符
• 大小寫敏感（另:CSS中，書寫屬性名時大小寫不敏感，但是書寫選擇器時大小寫敏感）
• 定義只能出現在塊{}內
• 可以使用!important修飾
• 作用域就是選擇器的選定范圍，作用域出現交叉時，同名變量覆蓋規則取決於選擇器權重

 

.a{
    --container-bg-color: #0ff;
}
div {
  --container-bg-color: #0f0 !important;
}

 

2.使用語法：cssPropertyName: var(--variableName[,declarationValue]);

• declarationValue：僅限於當--variableName變量未定義時的備用選項
• val()只能被引用，不能被賦值。即只能出現在":"右側
• 不能用作地址，如：url(var(--url));
• var()后面默認帶有一個空格，因此在其后面加單位無效，如：

--size: 20; font-size: var(--size)px;

會解析成font-size: 20 px;注意此時“20”與“px”之間有個空格，導致該語句無效。單位應在定義時加上，如：

--size: 20px; font-size: val(--size);

檢查瀏覽器支持

1.使用@supports方法

 

@supports ( (--size: 0)) {

  /* 支持 */

}

@supports ( not (--size: 0)) {

 /* 不支持 */

}

 

2.使用JavaScript

if(window.CSS && window.CSS.supports && window.CSS.supports('--size', 0)) {

  /* 支持 */

}else{

  /* 不支持 */

}

使用JavaScript操作原生屬性變量

•  window.getComputedStyle(element, '偽類'|null)：[IE9+，Firefox，Chrome，Safari, Opera]獲得當前元素最終使用的所有CSS屬性值，返回一個只讀CSS樣式聲明對象。
•  window.getComputedStyle(element, '偽類'|null).getPropertyValue('propertyName')
•  window.getComputedStyle(element, '偽類'|null).setProperty('propertyName', value)

 

var d1 = document.getElementById("d1"),
style1 = window.getComputedStyle(d1, ":after");
 
var d2 = document.getElementById("d2"),
style2 = window.getComputedStyle(d2, null);

var value = d1.getPropertyValue('--variableName');

 瀏覽器兼容

參考文章：

• 必須了解的CSS變量（var）
• 深入學習CSS自定義屬性（CSS變量）