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

來源 | https://www.cnblogs.com/jimojianghu/archive/2022/03/21/16016516.html

基于級聯(lián)變量的css自定義屬性，已經(jīng)出來很多年了。雖然有l(wèi)ess、sass等預(yù)處理器大行其道，但是自定義屬性也有它的特點和用處，諸如在js中讀寫、作用域設(shè)置等等，在處理UI主題切換等功能上也發(fā)揮著很大的作用。

自定義屬性

CSS自定義屬性(Custom Properties)，在一個css選擇器內(nèi)部進行定義，使用兩個短橫連接線?--?作為開頭命名的名稱即被稱為自定義屬性。

可以給該自定義屬性設(shè)置任意css屬性值。該自定義屬性賦值后，將可以作為變量賦值給css樣式屬性，會立馬生效。

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

示例：

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

上面的代碼，即在body下定義了一個名為?--bg-color 的自定屬性，并設(shè)置值為紅色的顏色值?#f00。
被body的背景色 background-color 引用后，則整個頁面將會呈現(xiàn)為紅色背景。

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

命名規(guī)則

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

• 可以使用數(shù)字[0-9]、字母[a-zA-Z]、下劃線[_]和短橫線[-]組合

• 可以使用中文等文字字符

• 不能使用?$、[、^、(、%?等字符

• 大小寫敏感

div {  --1: #0f0;  --背景: yellow;  --Fontsize: 20px;  color: var(--1);  font-size: var(--Fontsize, 30px);  background-color: var(--背景);}

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

值

在自定義屬性聲明的時候，需要給屬性賦值，可以使用任意css樣式屬性值支持的格式。
如?#000、12px、center、字符串、數(shù)字等等。

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

作用域

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

• 當(dāng)自定義屬性屬性聲明在某個css選擇器內(nèi)的時候，則該選擇器的元素和它的所有子元素，都可以使用該自定義屬性。

• 當(dāng)聲明在?:root 下的時候，則全文檔范圍內(nèi)皆可使用。

:root 是一個偽類選擇器，用來匹配文檔的根元素。而在?html?中，根元素即為??元素，但:root優(yōu)先級更高，其他則相同。

: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()函數(shù)，下面我們將了解var()函數(shù)。

var()函數(shù)

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

定義：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屬性的顏色部分被引用。

默認值參數(shù)

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

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

如上面的代碼，當(dāng)?--Fontsize 不存在時，則 font-size 屬性的值就為 30px。

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

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

如上面的代碼所示，color屬性的缺省值是黑色?#000，幾段文字中：

• "歡迎進入我們的網(wǎng)站" 因為?--text-color 的值不是顏色值，所以默認值不起作用，顯示黑色；

• "晴到多云" 因為?--1color 不存在, 并且默認值 22px 不是顏色值，所以也顯示缺省值黑色；

• "今天是星期天" 因為?--1color 不存在, 默認值?#f00?紅色有效，所以顯示為紅色。

不同值的使用情況

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

用于自定義屬性的值

var() 函數(shù)變量還能應(yīng)用于自定義屬性聲明中，作為值被引用，使用方式一樣。

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

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

用于字符串組合

當(dāng)自定義屬性的值是字符串的時候，可以與樣式屬性值的字符串直接拼接，多用于content屬性，如下：

:root {  --wait-copy: '，請復(fù)制';}div:after {  content: '正文'var(--wait-copy);}

這樣就能在頁面上顯示拼接的 content：正文，請復(fù)制。

用于calc()數(shù)字計算

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

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

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

行內(nèi)樣式中的使用

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

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

在 div 元素的行內(nèi)樣式中聲明了一個顏色屬性?--text-color，在div的子元素中，通過行內(nèi)樣式和類樣式都可以引用生效。

在SVG中使用

svg在html中的使用，既可以像jpg、png等一樣以圖片形式使用，也可以直接以標(biāo)簽的形式使用。
當(dāng)我們在頁面上以標(biāo)簽形式使用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圖標(biāo)，則無法使用自定義屬性。如果確實想要修改svg圖標(biāo)的顏色，可以使用drop-shadow。

drop-shadow 修改svg圖標(biāo)顏色

給icon加樣式 (利用原圖標(biāo)的陰影區(qū)域進行處理)：

• 給svg圖標(biāo)icon元素加上transform屬性，移動到視覺區(qū)域以外隱藏。

• 給icon元素加上filter屬性，利用drop-shadow陰影值的方式處理，陰影位移與translateX移動距離要一樣。

• 給父元素加上overflow屬性，隱藏超出范圍的內(nèi)容，把移動的原圖標(biāo)隱藏掉，顯示陰影區(qū)域。

/*父元素*/.parent {  overflow:hidden;}
/*svg圖標(biāo)*/img.icon {  transform: translateX(-80px);  filter: drop-shadow(red 80px 0);}

這種方式對于不需要進行事件操作的svg圖標(biāo)較合適。

在javascript中讀寫

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

• 操作全局屬性

:root {  --color: red;}
const root = getComputedStyle(document.documentElement)// 獲取全局屬性值const color1 = root.getPropertyValue('--color').trim()// 設(shè)置屬性值document.documentElement.style.setProperty('--color', 'green')const color2 = root.getPropertyValue('--color').trim()
console.log(color1, color2) // red green
// 給元素設(shè)置樣式const body = document.querySelector('body')document.querySelector('body').style.backgroundColor = color2// body的背景色將被設(shè)置為綠色

• 讀寫元素屬性

"welc" style="-text-pos: center;">div>
// 獲取welc元素下定義的屬性值，給body設(shè)置該值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主題切換

當(dāng)我們使用:root選擇器定義全局屬性，就可以通過該選擇器進行主題切換的工作。
這里，我們還需要引入 theme，結(jié)合: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')  }}

通過調(diào)用上面的js函數(shù)，就可以切換主題，改變web頁面的UI樣式。

兼容性

大部分主流瀏覽器都能使用，當(dāng)然，除了IE。

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

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

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

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

本文完~

往期推薦

秒啊！答好這5個問題，就入門Docker了

(字節(jié)/華為/美團)前端面經(jīng)記錄冷冷清清的金三銀四

基于 Vue + 百度地圖的多車實時運動及軌跡追蹤實現(xiàn)

最后

• 歡迎加我微信，拉你進技術(shù)群，長期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認真學(xué)前端，做個專業(yè)的技術(shù)人...

點個在看支持我吧