CSS自定義屬性與前端頁面的主題切換

jimojianghu發表於2022-03-21
CSS前端

基於級聯變數的CSS自定義屬性，已經出來很多年了。
雖然有less、sass等前處理器大行其道，但是自定義屬性也有它的特點和用處，諸如在js中讀寫、作用域設定等等，在處理UI主題切換等功能上也發揮著很大的作用。

自定義屬性

CSS自定義屬性(Custom Properties)，在一個css選擇器內部進行定義，使用兩個短橫連線線 -- 作為開頭命名的名稱即被稱為自定義屬性。
可以給該自定義屬性設定任意css屬性值。
該自定義屬性賦值後，將可以作為變數賦值給css樣式屬性，會立馬生效。

定義：--custom-property-name: custom-property-value。

示例：

body {
  /* 宣告自定義屬性 */
  --bg-color: #f00;
  /* 使用 */
  background-color: var(--bg-color);
}

上面的程式碼，即在body下定義了一個名為 --bg-color 的自定屬性，並設定值為紅色的顏色值 #f00。
被body的背景色 background-color 引用後，則整個頁面將會呈現為紅色背景。

在使用自定義屬性給css樣式賦值時，需要使用var()函式，見後文。

命名規則

自定義屬性的的命名規則，具體的如下：

  • 可以使用數字[0-9]、字母[a-zA-Z]、下劃線[_]和短橫線[-]組合
  • 可以使用中文等文字字元
  • 不能使用 $、[、^、(、% 等字元
  • 大小寫敏感
div {
  --1: #0f0;
  --背景: yellow;
  --Fontsize: 20px;
  color: var(--1);
  font-size: var(--Fontsize, 30px);
  background-color: var(--背景);
}

如上，使用數字、中文等方式定義，都能生效。

值

在自定義屬性宣告的時候，需要給屬性賦值，可以使用任意css樣式屬性值支援的格式。
如 #000、12px、center、字串、數字等等。

{
  --1: #0f0;
  --2: center;
  --f: '測試';
  --n: 22;
  --z: 12px;
}

作用域

css自定義屬性存在作用域，即它宣告時候所處的css選擇器。

  • 當自定義屬性屬性宣告在某個css選擇器內的時候，則該選擇器的元素和它的所有子元素，都可以使用該自定義屬性。
  • 當宣告在 :root 下的時候，則全文件範圍內皆可使用。

:root 是一個偽類選擇器，用來匹配文件的根元素。而在 HTML 中，根元素即為 <html> 元素，但:root優先順序更高，其他則相同。

:root {
  --color: red;
}
body {
  --bg-color: #ddd;
  color: --color;
  background-color: var(--bg-color);
  width: var(--width); /*自定義屬性變數無效*/
}
body .header {
  --width: 1000px;
  color: var(--color);
  background-color: var(--bg-color);
  width: var(--width);
}

上面的示例程式碼，:root中宣告的全域性變數，將可以使用在任何地方，而body中的可以被body以及.header引用，在.header中宣告的則不能被body引用。

使用自定義屬性，必須要使用var()函式，下面我們將瞭解var()函式。

var()函式

var()函式會返回所引用自定義屬性對應的值，並被應用到相應的CSS屬性上。
var()函式只能作為屬性的值使用，而且是可以代替樣式屬性中的值的任何部分。
var()函式不能作為屬性名、選擇器或除屬性值外的其他值，如果這樣做，只會產生無效語法或無效值。

定義：var(custom-property-name, value)。

  • custom-property-name 必需，自定義屬性的名稱。
  • value 可選，預設回退值。
div {
  --1: #0f0;
  --border-color: yellow;
  color: var(--1);
  border: 1px solid var(--border-color);
}

--border-color 作為border屬性的顏色部分被引用。

預設值引數

var()函式的第二可選引數，表示預設回退值；如果該自定義屬性不存在，就會使用這個預設引數值作為屬性值。

div {
  font-size: var(--Fontsize, 30px);
}

如上面的程式碼，當 --Fontsize 不存在時，則 font-size 屬性的值就為 30px。

需要注意：只有當我們的自定義屬性沒有定義時，才會使用預設回退值。
如果自定義屬性的值是錯誤值或不合法的，就不會使用預設值，而是會用樣式屬性的預設值代替。
如果預設值也是是錯誤的值，則會使用屬性的預設值。

<div style="--text-color: 11px;">
  <span style="color: var(--text-color, #f00);">歡迎進入我們的網站</span>
  <span style="color: var(--1color, #f00);">今天是星期天</span>
  <span style="color: var(--1color, 22px);">晴到多雲</span>
</div>

image

如上面的程式碼所示，color屬性的預設值是黑色 #000，幾段文字中：

  • "歡迎進入我們的網站" 因為 --text-color 的值不是顏色值，所以預設值不起作用，顯示黑色；
  • "晴到多雲" 因為 --1color 不存在, 並且預設值 22px 不是顏色值，所以也顯示預設值黑色；
  • "今天是星期天" 因為 --1color 不存在, 預設值 #f00 紅色有效，所以顯示為紅色。

不同值的使用情況

var()函式變數在使用時，有幾種特殊的情況，需要注意。

用於自定義屬性的值

var() 函式變數還能應用於自定義屬性宣告中，作為值被引用，使用方式一樣。

div {
  --1: #0f0;
  --背景: var(--1);
  color: var(--1);
  border: 1px solid var(--背景);
}

--背景 屬性使用了 -1 屬性來進行賦值。

用於字串組合

當自定義屬性的值是字串的時候，可以與樣式屬性值的字串直接拼接，多用於content屬性，如下：

:root {
  --wait-copy: '，請複製';
}
div:after {
  content: '正文'var(--wait-copy);
}

這樣就能在頁面上顯示拼接的 content：正文，請複製。

用於calc()數字計算

當自定義屬性的值是數字的時候，除了可以用於 opacity、z-index等使用數字的css屬性以外，還可以使用calc函式進行計算處理。
如下所示：

:root {
  --size: 5;
  --width: calc(100px * 5);
}
.div {
  width: var(--width);
  font-size: calc(var(--size) * 10px);
}

可以通過calc計算改變樣式屬性。

行內樣式中的使用

自定義屬性和一般的css屬性一樣，我們同樣可以在元素的行內樣式中使用這些屬性。
如下所示：

<div style="--text-color: red;">
  <span style="color: var(--text-color);">歡迎進入我們的網站</span>
  <span class="week">今天是星期天</span>
</div>

.week {
  color: var(--text-color);
}

在 div 元素的行內樣式中宣告瞭一個顏色屬性 --text-color，在div的子元素中，通過行內樣式和類樣式都可以引用生效。

在SVG中使用

svg在html中的使用，既可以像jpg、png等一樣以圖片形式使用，也可以直接以標籤的形式使用。
當我們在頁面上以標籤形式使用svg的時候，就可以直接引用自定變數屬性，和在html中一樣使用，如下所示：

:root {
  --color: red;
}
body {
  --color: green;
  --bg-color: #ddd;
  background-color: var(--bg-color);
}

<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" fill-rule="evenodd">
    <circle stroke="var(--color)" cx="16" cy="16" r="12"/>
    <path d="M16.5 21.5c.672 0 1.5-.084 1.5-.5V11a1 1 0 0 0-1-1h-3.5a.5.5 0 0 0-.5.5v1.112c0 .223.18.404.404.404.135 0 .667.161 1.596.484V21c0 .416.828.5 1.5.5Z" fill="var(--color)" fill-rule="nonzero"/>
  </g>
</svg>

而圖片形式引用的svg圖示，則無法使用自定義屬性。如果確實想要修改svg圖示的顏色，可以使用drop-shadow。

drop-shadow 修改svg圖示顏色

給icon加樣式 (利用原圖示的陰影區域進行處理)：

  • 給svg圖示icon元素加上transform屬性，移動到視覺區域以外隱藏
  • 給icon元素加上filter屬性，利用drop-shadow陰影值的方式處理，陰影位移與translateX移動距離要一樣
  • 給父元素加上overflow屬性，隱藏超出範圍的內容，把移動的原圖示隱藏掉，顯示陰影區域
/*父元素*/
.parent {
  overflow:hidden;
}

/*svg圖示*/
img.icon {
  transform: translateX(-80px);
  filter: drop-shadow(red 80px 0);
}

這種方式對於不需要進行事件操作的svg圖示較合適。

在javascript中讀寫

自定義屬性變數，可以通過javascript進行讀寫，就能很方便的進行操作。
這裡主要用到樣式物件的 setProperty() 和 getPropertyValue() 方法。

  • 操作全域性屬性
:root {
  --color: red;
}

const root = getComputedStyle(document.documentElement)
// 獲取全域性屬性值
const color1 = root.getPropertyValue('--color').trim()
// 設定屬性值
document.documentElement.style.setProperty('--color', 'green')
const color2 = root.getPropertyValue('--color').trim()

console.log(color1, color2) // red green

// 給元素設定樣式
const body = document.querySelector('body')
document.querySelector('body').style.backgroundColor = color2
// body的背景色將被設定為綠色
  • 讀寫元素屬性
<div id="welc" style="-text-pos: center;">
</div>

// 獲取welc元素下定義的屬性值，給body設定該值
const welc = document.getElementById('welc')
const align = welc.style.getPropertyValue('--text-pos')
// welc.style.setProperty('--text-pos', 'left')
document.querySelector('body').style.textAlign = align

使用:root主題切換

當我們使用:root選擇器定義全域性屬性，就可以通過該選擇器進行主題切換的工作。
這裡，我們還需要引入 theme，結合:root選擇器和js就可以較好的處理了，具體如下：

  • 定義不同主題的全域性屬性，如下就是定義了黑色和白色主題：
:root[theme="black"] {
  --color: #000;
}
:root[theme="white"] {
  --color: #fff;
}
  • 在web頁面中使用這些自定義屬性變數，略過
  • 通過js改變theme的值，就可以切換主題，如下：
const setDocumentTheme = (theme = 'white') => {
  const docElm = document.documentElement
  if (!docElm.hasAttribute('theme')) {
    docElm.setAttribute('theme', theme)
  } else {
    docElm.removeAttribute('theme')
  }
}

通過呼叫上面的js函式，就可以切換主題，改變web頁面的UI樣式。

相容性

大部分主流瀏覽器都能使用，當然，除了IE。

image

也可以使用js進行檢測，ie下支援這種方式檢測：

// 是否支援自定義屬性
window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)

也可以使用css的 @supports 進行判斷，但ie不支援該css特性，所以幾乎沒用：

@supports ((--a: 0)) {
  /* 支援 */
}
@supports (not (--a: 0)) {
  /* 不支援 */
}

相關文章