CSS Variables學習筆記

時間 2019-11-08

標籤 css variables 學習筆記欄目 CSS 简体版

原文原文鏈接

注：本文首發於我的博客《CSS Variables學習筆記》。javascript

最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟你們分享一下個人學習筆記。css

1、什麼是CSS Variables

來，直接看MDN上的描述：html

CSS 變量是由CSS做者定義的實體，其中包含要在整個文檔中重複使用的特定值。使用自定義屬性來設置變量名，並使用特定的 var() 來訪問。

color: var(--main-color);

2、學習筆記

1. 聲明 & 調用

i. 聲明方式

CSS變量聲明的方式很是簡單，以下，聲明瞭一個名叫color的CSS變量。java

在css文件中寫
寫在html標籤的inline-style裏
用JS給某個元素聲明，方法.style.setProperty

body{
  --color: red;
}

<body style="--color: red;"></body>

document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')

ii. 調用方式

經過var()函數調用，如：git

.block{
  color: var(--color);
}

iii. 變量的命名

說完聲明和調用，還有個小問題。那麼，CSS變量的命名，有什麼限制麼？下面咱們來測試一下。github

.foo-test{
  --foo:;
  --ffoo:;
  --Foo: red;
  --FOo: blue;
  --FOO: green;
  /* 如下省略測試className的代碼 */
}

從以上測試代碼能夠看出：瀏覽器

CSS變量的命名是大小寫敏感的
不賦值或者賦值空格，都是無效的

2. 做用域 & 繼承

CSS變量也有做用域一說，而最頂層的做用域就是:root，下面的全部的元素均可以共享相關CSS變量。dom

:root{
  --color: green;
}

剛纔咱們在body上，定義了--color，在body下的子元素，都會默認繼承這個屬性，隨意使用。固然也能夠重載，把--color定義爲別的值。函數

<div class="block">
  <p>inherit color</p>
  <p class="css-var-text">overwrite color - hello world</p>
</div>

body{
  --color: green;
}
.block{
  color: var(--color);
}
.css-var-text{
  --color: red;
  color: var(--color);
}

.block，做爲body的子元素，繼承了--color屬性，因此邊框出來就是green。學習

而.css-var-text在本身的做用域中，重寫了--color，出來的字體顏色是overwrite後的blue。

3. 瀏覽器支持

i. 瀏覽器支持現狀

來看看caniuse上CSS Variables (Custom Properties)的支持度：

PC的話，IE 11和Edge的支持度都不好，而Chrome（2016.3）、Firefox（2017.11）和Safari(2017.3)的一些新版本都是支持的，相信很快就能普及。

Mobile的話，Safari在2016年的版本已經支持CSS變量了，但Opera、Chrome、UC等的支持還不太好。

ii. fallbacks

瀏覽器的支持度不太好，咱們又想玩新東西的話，就須要考慮若是瀏覽器不支持CSS變量，怎麼優雅降級。（嗷，兩套代碼是有點……）

/* 當瀏覽器不支持CSS變量 */
.browser-support{
  background: red;  
}

/* 當瀏覽器支持CSS變量 */
@supports (--css: variables) {
  .browser-support{
    background: var(--color);
  }
}

3、代碼習做

1. codepen

在學習CSS Variables的時候，有邊寫一些教程的demo，除了以上，還包括一些實際場景的應用，如像box-shadow複合屬性的拆解，以及JS操做CSS變量等。

CSS Varibles Study Notes on Codepen.io.

2. flexbox屬性的DEMO

以前在團隊也作過一下下flexbox的分享，你們也知道，flex屬性和對應的值特別多，當時就很想作個能夠隨時變屬性值看效果的playground。

但想了下傳統的實現方式，貌似沒有優雅的方法。

CSS+JS實現：寫一批classname，option切換時，經過JS修改classname改變樣式；
純JS實現，根據option的value用JS改寫元素的inline style（一直修改dom）

哎喲，換CSS Variables以後，一切就不同了，可繼承、可複用、易維護，目前實現比較簡單，可能跟以上的傳統方式差異不太大，不事後續要修改或者作更多優化，我相信優點就會凸顯出來了。

demo傳送門：wuyuying.com/flexbox-css-var

github傳送門

小結

哈哈，沒想到小結寫什麼，若是你們有好玩的CSS Variables的應用，歡迎分享給我：）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。