關(guān)于CSS自定義屬性與前端頁面的主題切換問題
我要評(píng)論基于級(jí)聯(lián)變量的CSS自定義屬性，已經(jīng)出來很多年了。
雖然有l(wèi)ess、sass等預(yù)處理器大行其道，但是自定義屬性也有它的特點(diǎn)和用處，諸如在js中讀寫、作用域設(shè)置等等，在處理UI主題切換等功能上也發(fā)揮著很大的作用。
自定義屬性
CSS自定義屬性(Custom Properties)，在一個(gè)css選擇器內(nèi)部進(jìn)行定義，使用兩個(gè)短橫連接線 -- 作為開頭命名的名稱即被稱為自定義屬性。
可以給該自定義屬性設(shè)置任意css屬性值。
該自定義屬性賦值后，將可以作為變量賦值給css樣式屬性，會(huì)立馬生效。 定義：--custom-property-name: custom-property-value。
示例：
body {
/* 聲明自定義屬性 */
--bg-color: #f00;
/* 使用 */
background-color: var(--bg-color);
}
上面的代碼，即在body下定義了一個(gè)名為 --bg-color 的自定屬性，并設(shè)置值為紅色的顏色值 #f00。
被body的背景色 background-color 引用后，則整個(gè)頁面將會(huì)呈現(xiàn)為紅色背景。
在使用自定義屬性給css樣式賦值時(shí)，需要使用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ù)字、中文等方式定義，都能生效。
值
在自定義屬性聲明的時(shí)候，需要給屬性賦值，可以使用任意css樣式屬性值支持的格式。
如 #000、12px、center、字符串、數(shù)字等等。
{
--1: #0f0;
--2: center;
--f: '測(cè)試';
--n: 22;
--z: 12px;
}
作用域
css自定義屬性存在作用域，即它聲明時(shí)候所處的css選擇器。
- 當(dāng)自定義屬性屬性聲明在某個(gè)css選擇器內(nèi)的時(shí)候，則該選擇器的元素和它的所有子元素，都可以使用該自定義屬性。
- 當(dāng)聲明在
:root下的時(shí)候，則全文檔范圍內(nèi)皆可使用。
:root 是一個(gè)偽類選擇器，用來匹配文檔的根元素。而在 HTML 中，根元素即為 <html> 元素，但:root優(yōu)先級(jí)更高，其他則相同。
: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ù)會(huì)返回所引用自定義屬性對(duì)應(yīng)的值，并被應(yīng)用到相應(yīng)的CSS屬性上。
var()函數(shù)只能作為屬性的值使用，而且是可以代替樣式屬性中的值的任何部分。
var()函數(shù)不能作為屬性名、選擇器或除屬性值外的其他值，如果這樣做，只會(huì)產(chǎn)生無效語法或無效值。
定義：var(custom-property-name, value)。
- custom-property-name 必需，自定義屬性的名稱。
- value 可選，默認(rèn)回退值。
div {
--1: #0f0;
--border-color: yellow;
color: var(--1);
border: 1px solid var(--border-color);
}
--border-color 作為border屬性的顏色部分被引用。
默認(rèn)值參數(shù)
var()函數(shù)的第二可選參數(shù)，表示默認(rèn)回退值；如果該自定義屬性不存在，就會(huì)使用這個(gè)默認(rèn)參數(shù)值作為屬性值。
div {
font-size: var(--Fontsize, 30px);
}
如上面的代碼，當(dāng) --Fontsize 不存在時(shí)，則 font-size 屬性的值就為 30px。
需要注意：只有當(dāng)我們的自定義屬性沒有定義時(shí)，才會(huì)使用默認(rèn)回退值。
如果自定義屬性的值是錯(cuò)誤值或不合法的，就不會(huì)使用默認(rèn)值，而是會(huì)用樣式屬性的缺省值代替。
如果默認(rèn)值也是是錯(cuò)誤的值，則會(huì)使用屬性的缺省值。
<div style="--text-color: 11px;"> <span style="color: var(--text-color, #f00);">歡迎進(jìn)入我們的網(wǎng)站</span> <span style="color: var(--1color, #f00);">今天是星期天</span> <span style="color: var(--1color, 22px);">晴到多云</span> </div>
如上面的代碼所示，color屬性的缺省值是黑色 #000，幾段文字中：
- "歡迎進(jìn)入我們的網(wǎng)站" 因?yàn)?
--text-color的值不是顏色值，所以默認(rèn)值不起作用，顯示黑色； - "晴到多云" 因?yàn)?
--1color不存在, 并且默認(rèn)值22px不是顏色值，所以也顯示缺省值黑色； - "今天是星期天" 因?yàn)?
--1color不存在, 默認(rèn)值#f00紅色有效，所以顯示為紅色。
不同值的使用情況
var()函數(shù)變量在使用時(shí)，有幾種特殊的情況，需要注意。
用于自定義屬性的值
var() 函數(shù)變量還能應(yīng)用于自定義屬性聲明中，作為值被引用，使用方式一樣。
div {
--1: #0f0;
--背景: var(--1);
color: var(--1);
border: 1px solid var(--背景);
}
--背景 屬性使用了 -1 屬性來進(jìn)行賦值。
用于字符串組合
當(dāng)自定義屬性的值是字符串的時(shí)候，可以與樣式屬性值的字符串直接拼接，多用于content屬性，如下：
:root {
--wait-copy: '，請(qǐng)復(fù)制';
}
div:after {
content: '正文'var(--wait-copy);
}
這樣就能在頁面上顯示拼接的 content：正文，請(qǐng)復(fù)制。
用于calc()數(shù)字計(jì)算
當(dāng)自定義屬性的值是數(shù)字的時(shí)候，除了可以用于 opacity、z-index等使用數(shù)字的css屬性以外，還可以使用calc函數(shù)進(jìn)行計(jì)算處理。
如下所示：
:root {
--size: 5;
--width: calc(100px * 5);
}
.div {
width: var(--width);
font-size: calc(var(--size) * 10px);
}
可以通過calc計(jì)算改變樣式屬性。
行內(nèi)樣式中的使用
自定義屬性和一般的css屬性一樣，我們同樣可以在元素的行內(nèi)樣式中使用這些屬性。
如下所示：
<div style="--text-color: red;"> <span style="color: var(--text-color);">歡迎進(jìn)入我們的網(wǎng)站</span> <span class="week">今天是星期天</span> </div>
.week {
color: var(--text-color);
}
在 div 元素的行內(nèi)樣式中聲明了一個(gè)顏色屬性 --text-color，在div的子元素中，通過行內(nèi)樣式和類樣式都可以引用生效。
在SVG中使用
svg在html中的使用，既可以像jpg、png等一樣以圖片形式使用，也可以直接以標(biāo)簽的形式使用。
當(dāng)我們?cè)陧撁嫔弦詷?biāo)簽形式使用svg的時(shí)候，就可以直接引用自定變量屬性，和在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)，則無法使用自定義屬性。如果確實(shí)想要修改svg圖標(biāo)的顏色，可以使用drop-shadow。
drop-shadow 修改svg圖標(biāo)顏色
- 給icon加樣式 (利用原圖標(biāo)的陰影區(qū)域進(jìn)行處理)：
- 給svg圖標(biāo)icon元素加上transform屬性，移動(dòng)到視覺區(qū)域以外隱藏
- 給icon元素加上filter屬性，利用drop-shadow陰影值的方式處理，陰影位移與translateX移動(dòng)距離要一樣給父元素加上overflow屬性，隱藏超出范圍的內(nèi)容，把移動(dòng)的原圖標(biāo)隱藏掉，顯示陰影區(qū)域
/*父元素*/
.parent {
overflow:hidden;
}
/*svg圖標(biāo)*/
img.icon {
transform: translateX(-80px);
filter: drop-shadow(red 80px 0);
}
這種方式對(duì)于不需要進(jìn)行事件操作的svg圖標(biāo)較合適。
在javascript中讀寫
自定義屬性變量，可以通過javascript進(jìn)行讀寫，就能很方便的進(jìn)行操作。
這里主要用到樣式對(duì)象的 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è)置為綠色
讀寫元素屬性
<div id="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選擇器定義全局屬性，就可以通過該選擇器進(jìn)行主題切換的工作。
這里，我們還需要引入 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進(jìn)行檢測(cè)，ie下支持這種方式檢測(cè)：
// 是否支持自定義屬性
window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)
也可以使用css的 @supports 進(jìn)行判斷，但ie不支持該css特性，所以幾乎沒用：
@supports ((--a: 0)) {
/* 支持 */
}
@supports (not (--a: 0)) {
/* 不支持 */
}
到此這篇關(guān)于CSS自定義屬性與前端頁面的主題切換的文章就介紹到這了,更多相關(guān)CSS主題切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 本文主要介紹了CSS變量實(shí)現(xiàn)主題切換的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-23
這篇文章主要介紹了基于Css Variable的主題切換完美解決方案，本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參2020-06-18
這篇文章主要介紹了詳解如何簡單實(shí)現(xiàn)CSS主題的切換，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-06-15- 今天，CSS預(yù)處理器是Web開發(fā)的標(biāo)準(zhǔn)。 預(yù)處理器的一個(gè)主要優(yōu)點(diǎn)是它們使您能夠使用變量， 這有助于您避免復(fù)制和粘貼代碼，并簡化了開發(fā)和重構(gòu)。今天通過本文給大家分享如何將2018-11-14
