CSS自定義屬性 —— 別說你懂CSS相對單位

Yuying_Wu發表於2018-07-31
CSS

前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對relative units的講解和舉例可以說相當全面，看完之後發現自己並不太懂CSS相對單位，也希望分享給大家，所以有了這個譯文系列。（若有勘誤或翻譯建議，歡迎 Github PR ^_^）

《別說你懂CSS相對單位》系列譯文：

  1. 如何更愉快地使用em
  2. 如何更愉快地使用rem
  3. 視口相關單位的應用
  4. 無單位數字和行高
  5. CSS自定義屬性 [本文]

本文對應的章節目錄：

  • 2.6 自定義屬性（也叫“CSS變數”）
    • 2.6.1 動態改變自定義屬性的值
    • 2.6.2 通過JavaScript改變自定義屬性的值
    • 2.6.3 初探自定義屬性
  • 總結

譯者說
 
在今年年初，我也寫過一篇《CSS Variables學習筆記》，裡面有更多的CSS Variables的語法解釋和例項demo，感興趣的朋友可以看看 ：）
 
本文也是《別說你懂CSS相對單位》系列的最後一篇，感謝小夥伴們的支援和建議，enjoy ??? 意猶未盡的朋友們，可以去看看Keith J.Grant的《CSS in Depth》。  
 

2.6 自定義屬性（也叫“CSS變數”）

在2015年，一個大家期待已久的名為“用作層疊式變數的自定義屬性”（Custom Properties for Cascading Variables）的CSS規範終於釋出為“候選推薦標準”（Candidate Recommendation）。這套規範引入了CSS中“變數”的概念，支援一種新的基於上下文的動態樣式定義方式。你可以宣告一個變數，再給它賦值，然後就可以在樣式表的任何地方引用它。你可以通過這樣的方式，減少樣式表中的重複程式碼，以及後續你會看到的一些有用的應用場景。

在寫這本書的時候，自定義屬性已經被大多數主流瀏覽器支援了，除了IE。檢視最新的瀏覽器支援情況，可以檢視Can I Use的caniuse.com/#feat=css-v…。

筆記

如果你剛好在用支援自定義變數的CSS前處理器，如Sass（syntactically awesome stylesheets）或Less，你可能會下意識拒絕CSS變數。千萬別這麼做。因為原生的CSS變數比任何一個前處理器能實現的功能都要強大和靈活。為了強調它們之間（原生CSS變數和前處理器自定義變數）的差異，我會把它叫作“自定義屬性”，而不用“CSS變數”。

宣告一個自定義屬性，跟宣告其他屬性類似。程式碼片段2.23是自定義屬性宣告的例子。新建一個頁面和樣式表吧，然後新增以下的CSS程式碼。

 
[ 程式碼片段 2.23 宣告一個自定義屬性 ]

:root {
  --main-font: Helvetica, Arial, sans-serif;
}
複製程式碼

程式碼片段中，定義了一個名叫--main-font的變數，然後把它的值設定為普通的字型sans-serif。為了和其他屬性區分開，命名的字首必須是兩道橫槓（--），然後寫上你想要的名字。

變數一定要宣告在一個宣告區塊內。在這裡，我使用了:root選擇器，那麼這個變數就可以在整個頁面的樣式裡使用 —— 後面我會簡單解釋這個問題。

變數的宣告，就它本身而言，不會做任何事情，直到我們在程式碼裡引用它。我們在一個段落中使用它吧，做成像圖2.13那樣的效果。

 
[ 圖 2.13 對一個簡單段落使用用變數宣告的字型sans-serif ]

我們可以用一個叫作var()的函式去引用自定義屬性的值。現在，你可以利用這個函式去引用我們剛才宣告的變數--main-font。把下面展示的程式碼片段新增到你的樣式表中吧，把變數用起來。

 
[ 程式碼片段 2.24 使用一個自定義屬性 ]

:root {
  --main-font: Helvetica, Arial, sans-serif;
}

p {                                    1
  font-family: var(--main-font);       1
}   
複製程式碼
  • 1 把段落的字型定義為 Helvetica, Arial, sans-serif

 
自定義屬性可以讓你在一個地方宣告它的值，作為一個“單一資料來源”（single source of truth），然後在樣式表的任意一個地方引用。這一點對一些反覆出現的值特別有用，譬如顏色。下一個程式碼片段新增了一個名叫brand-color的自定義屬性。你可以在樣式表中多次使用這個變數，但假如你需要（全域性）修改它的值，只需要在一行程式碼中編輯它的值就可以了。

 
[ 程式碼片段 2.25 對color使用自定義屬性 ]

:root {
  --main-font: Helvetica, Arial, sans-serif;
  --brand-color: #369;                           1
}

p {
  font-family: var(--main-font);
  color: var(--brand-color);
}
複製程式碼
  • 1 宣告一個藍色的brand-color變數

 
var()函式支援第二個引數，代表一個預設值。假如一個變數被宣告的時候，第一個引數沒有被宣告，那麼第二個引數值就會被引用。

[ 程式碼片段 2.26 提供回退預設值 ]

:root {
  --main-font: Helvetica, Arial, sans-serif;
  --brand-color: #369;
}

p {
  font-family: var(--main-font, sans-serif);         1
  color: var(--secondary-color, blue);               2
}
複製程式碼
  • 1 宣告一個預設值 sans-serif
  • 2 變數 secondary-color 沒有被宣告，於是預設值 blue 會被使用

 
這段程式碼在兩個不同的宣告中，定義了預設值。第一個宣告裡，--main-font被宣告，值為Helvetica, Arial,sans-serif，於是這個值就會被用到了。第二個宣告裡，--secondary-color是一個沒有宣告過的變數，所以預設值 blue 被用到了。

 

筆記
如果var()被定義為一個無效值，這個屬性會被定義為它的初始值。舉個例子，如果在padding: var(--brand-color)中，變數是一個色號，那對於padding來說這就是一個無效值。在這個情況下，padding的值會被定義為0。

 

2.6.1 動態改變自定義屬性的值

從這些例子可以看到，自定義屬性只是更方便了一點，也可以幫助你減少很多的重複程式碼。但讓自定義屬性更有意思的是，自定義屬性的宣告是可以層疊和繼承的。你可以在多個選擇器中宣告同一個變數，這些變數在頁面的不同部分可以有著不一樣的值。

你可以宣告一個變數是黑色的，舉個例子，然後在一個特定的容器裡把它重新定義為白色的。於是，在這個容器以外的所有依賴這個變數的顏色是黑色，而在容器內的就是白色。通過這樣的方式，我們來實現一個像圖2.14這樣的效果。

 
[ 圖 2.14 自定義屬性基於不同域下的值，生成兩個顏色不一樣的皮膚 ]

這個皮膚類似你之前看到的那個（圖2.7），HTML在程式碼片段2.27。這個皮膚有兩個例項，一個在body下，另一個在一個深色的區塊。來，更新下你的程式碼。

 
[ 程式碼片段 2.27 頁面上不同上下文的兩個皮膚 ]

<body>
  <div class="panel">                               1
    <h2>Single-origin</h2>
    <div class="body">
      We have built partnerships with small farms
      around the world to hand-select beans at the
      peak of season. We then careful roast in
      small batches to maximize their potential.
    </div>
  </div>

  <aside class="dark">                              2
    <div class="panel">                             2
      <h2>Single-origin</h2>
      <div class="body">
        We have built partnerships with small farms
        around the world to hand-select beans at the
        peak of season. We then careful roast in
        small batches to maximize their potential.
      </div>
    </div>
  </aside>
</body>
複製程式碼
  • 1 頁面上一個普通的皮膚
  • 2 第二個皮膚在深色容器裡

 
我們用變數重新改寫一下皮膚中的文字和背景顏色。把下面的程式碼片段加進你的樣式表。這裡把背景顏色設成白色，文字顏色設成黑色。在你新增深色主題之前，我會解釋這段程式碼的工作原理。

 
[ 程式碼片段 2.28 利用變數定義皮膚的顏色 ]

:root {
  --main-bg: #fff;                       1
  --main-color: #000;                    1
}

.panel {
  font-size: 1rem;
  padding: 1em;
  border: 1px solid #999;
  border-radius: 0.5em;
  background-color: var(--main-bg);      2
  color: var(--main-color);              2
}

.panel > h2 {
  margin-top: 0;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
}
複製程式碼
  • 1 分別把背景色和文字顏色定義為白色和黑色
  • 2 在皮膚樣式中使用變數

 
你再一次把變數宣告在:root選擇器裡。很明顯，這樣的話我們就可以在根元素（整個頁面）下的任何元素中引用這個變數了。當根元素下的子元素使用這些變數時，它們就能拿到這些變數對應的值。

你有兩個皮膚，不過它們仍然看起來是一樣的。現在，再一次定義這些變數，但這次是在一個不同的選擇器中。下一個程式碼片段是深色容器的，它有深灰色的背景色，以及小小的padding和margin。同時，它也重寫了兩個變數。新增到你的樣式表吧。

 
[ 程式碼片段 2.29 設定深色容器的樣式 ]

.dark {
  margin-top: 2em;                   1
  padding: 1em;
  background-color: #999;            2
  --main-bg: #333;                   3
  --main-color: #fff;                3
}
複製程式碼
  • 1 在深色容器和上一個容器間設定一個margin
  • 2 給深色容器設定深灰色的背景色
  • 3 在當前容器的作用域下，重新定義--main-bg 和 --main-color的值

 
重新整理頁面，第二個皮膚就會有深色背景和白色文字。這是因為當這個皮膚去呼叫這些變數時，拿到的是深色容器作用域下的值，而不是根元素域下的值。注意，你並不需要修改這個容器裡的樣式或者新增額外的類名。

在這個例子裡，你兩次定義了自定義屬性，第一次在根元素作用域上（--main-color是黑色的），第二次在深色容器作用域（--main-color是白色的）。自定義屬性表現得像作用域變數，因為值會被後代元素繼承。在深色容器中，--main-color是白色的，而在頁面的其他位置，它是黑色的。

2.6.2 通過JavaScript改變自定義屬性的值

在瀏覽器中，自定義屬性還可以被JavaScript訪問和動態地修改。畢竟這不是一本講JavaScript的書，我會告訴你足夠多的基本概念，然後你再把這些融入到自己的JavaScript專案中。

 
[ 程式碼片段 2.30 在JavaScript裡訪問一個自定義變數 ]

<script type="text/javascript">
  var rootElement = document.documentElement;
  var styles = getComputedStyle(rootElement);                 1
  var mainColor = styles.getPropertyValue('--main-bg');       2
  console.log(String(mainColor).trim());                      3
</script>
複製程式碼
  • 1 獲取元素的樣式物件（style object）
  • 2 從樣式物件中獲得 --main-bg 的值
  • 3 確認 mainColor 是一個字串以及把空格去掉，輸出“#fff”

 
因為你可以隨手修改自定義屬性的值，你可以用JavaScript給--main-bg動態地定義一個新的值。如果你把它定義為淺藍色，它就是展示成這樣（圖2.15）。

 
[ 圖 2.15 JavaScript可以通過改變變數--main-bg的值改變皮膚的背景色 ]

下面的程式碼片段，會在根元素下給--main-bg定義一個新的值，在<script>標籤的最下面，加上這些的程式碼。

 
[ 程式碼片段 2.31 在JavaScript定義一個自定義變數的值 ]

var rootElement = document.documentElement;
rootElement.style.setProperty('--main-bg', '#cdf');            1
複製程式碼
  • 1 把根元素下的 --main-bg 定義為淺藍色

 
如果你執行這段程式碼，任何繼承了--main-bg屬性的元素都會發生改變，對應的值會變成新的。在你的頁面上，這會把第一個皮膚的背景色變成淺藍色。第二個皮膚保持不變，因為它繼承的還是在深色容器裡定義的值。

利用這項技術，你可以在瀏覽器裡用JavaScript給你的站點換主題。或者你可以高亮頁面上的某些部分，又或者隨手就可以做一些改變。只需要少量幾行JavaScript程式碼，你做的改變就可以影響到頁面上大量的元素。

2.6.3 初探自定義屬性

自定義屬性是一個全新的CSS領域，開發者才剛剛開始探索。因為目前瀏覽器的支援比較有限，所以還沒有到使用它的“黃金時間”。我相信，一段時間之後，你會看到很多關於自定義屬性的最佳實踐和新穎的玩法。這是你需要留意的。嘗試使用自定義屬性，看看你可以做出些什麼吧。

需要關注的一點，如果你使用var()宣告，低版本瀏覽器不能識別就會忽略它。如果可以的話，給那些瀏覽器提供一個回退（fallback）方案。

 
[ 程式碼片段（沒有編號） ]

color: black;
color: var(--main-color);
複製程式碼

自定義屬性原生的動態特性，並不是總是可以使用的，可以關注它的瀏覽器支援情況caniuse.com。

總結

  • 擁抱和使用相對單位，讓頁面的結構去定義樣式程式碼的含義
  • 個人喜歡對字號大小使用rem，選擇性地對頁面元件的一些簡單縮放效果使用em
  • 你可以讓整個頁面實現響應式縮放，而不需要任何的媒體查詢
  • 在宣告行高時，使用不帶單位的數值
  • 開始瞭解和使用CSS最新的特性之一——自定義屬性吧！

《別說你懂CSS相對單位》系列譯文：

  1. 如何更愉快地使用em
  2. 如何更愉快地使用rem
  3. 視口相關單位的應用
  4. 無單位數字和行高
  5. CSS自定義屬性 [本文]

章節：

  • 2.1 相對單位值的魔力
    • 2.1.1 完美畫素設計（pixel-perfect design）的掙扎
    • 2.1.2 完美畫素網頁的終結
    • 畫素（pixel）、點（point）和pc（pica）
  • 2.2 em和rem
    • 2.2.1 對font-size使用em
      • 當我們在一個元素內用em同時宣告font-size和其他屬性
      • 字號收縮問題
    • 2.2.2 對font-size使用rem
      • 可用性：對font-size使用相對長度單位
  • 2.3 停止使用畫素思維去思考
    • 2.3.1 設定一個合理的字號預設值
    • 2.3.2 讓這個皮膚變得“響應式”
    • 2.3.3 調整單個元件的大小
  • 2.4 視口相關單位（viewport-relative units）
    • CSS3
    • 2.4.1 在font-size上使用vw
    • 2.4.2 在font-size上使用calc()
  • 2.5 不帶單位的數字（unitless number）和行高（line-height）
  • 2.6 自定義屬性（也叫“CSS變數”）
    • 2.6.1 動態改變自定義屬性的值
    • 2.6.2 通過JavaScript改變自定義屬性的值
    • 2.6.3 初探自定義屬性
  • 總結

原著版權資訊：

作者：Keith J.Grant
書籍：CSS in Depth
章節：Working with relative units

筆者 @Yuying Wu，前端愛好者 / 鼓勵師 / 紐西蘭打工度假 / 鏟屎官。目前就職於某大型電商的B2B前端團隊。

感謝你讀到這裡，對上文若有任何疑問或建議，歡迎留言。

如果你和我一樣喜歡前端，喜歡搗騰獨立部落格或者前沿技術，或者有什麼職業疑問，歡迎關注我以及各種交流哈。

獨立部落格：wuyuying.com
知乎ID：@Yuying Wu
Github：Yuying Wu

相關文章