前端開發:CSS變量知識
這個重要的 CSS 新功能,所有主要瀏覽器已經都支持了。本文全面介紹如何使用它,你會發現原生 CSS 從此變得異常強大。
一、變量的聲明
聲明變量的時候,變量名前面要加兩根連詞線(--)
上面代碼中,body選擇器裡面聲明瞭兩個變量:--foo和--bar .
它們與color、font-size等正式屬性沒有什麼不同,只是沒有默認含義。所以 CSS 變量(CSS variable)又叫做“CSS 自定義屬性”(CSS custom properties)。因為變量與自定義的 CSS 屬性其實是一回事。
你可能會問,為什麼選擇兩根連詞線(--)表示變量?因為$foo被 Sass 用掉了,@foo被 Less 用掉了。為了不產生衝突,官方的 CSS 變量就改用兩根連詞線了。
各種值都可以放入 CSS 變量。
變量名大小寫敏感,--header-color和-Header-color是兩個不同變量
二、var() 函數
var()函數用於讀取變量。
var()函數還可以使用第二個參數,表示變量的默認值。如果該變量不存在,就會使用這個默認值。
第二個參數不處理內部的逗號或空格,都視作參數的一部分。
var()函數還可以用在變量的聲明。
注意,變量值只能用作屬性值,不能用作屬性名。
上面代碼中,變量--side用作屬性名,這是無效的
三、響應式佈局
CSS 是動態的,頁面的任何變化,都會導致採用的規則變化。
利用這個特點,可以在響應式佈局的media命令裡面聲明變量,使得不同的屏幕寬度有不同的變量值。
四、兼容性處理
對於不支持 CSS 變量的瀏覽器,可以採用下面的寫法。
也可以使用@support命令進行檢測。
五、JavaScript 操作
JavaScript 也可以檢測瀏覽器是否支持 CSS 變量。
JavaScript 操作 CSS 變量的寫法如下。
這意味著,JavaScript 可以將任意值存入樣式表。下面是一個監聽事件的例子,事件信息被存入 CSS 變量。
那些對 CSS 無用的信息,也可以放入 CSS 變量。上面代碼中,--foo的值在 CSS 裡面是無效語句,但是可以被 JavaScript 讀取。這意味著,可以把樣式設置寫在 CSS 變量中,讓 JavaScript 讀取。
切版 qieban(.cn)