這篇文章主要為大家展示了“CSS自定義屬性的示例分析”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS自定義屬性的示例分析”這篇文章吧。
創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設(shè)計、網(wǎng)站制作與策劃設(shè)計,鄒平網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:鄒平等地區(qū)。鄒平做網(wǎng)站價格咨詢:18980820575
兼容性
第一個問題是:CSS 自定義屬性能用在哪?目前從 Can I use 上獲取的信息顯示除了 Edge 外主流瀏覽器的最新版都已經(jīng)支持這個特性了,而 Edge 也將支持這個屬性.
這說明現(xiàn)在 CSS 自定義屬性已經(jīng)能用在實際項目中了,相信不久以后開發(fā)者們將大大依賴這個特性.但還請在使用之前請先檢查一下本文附錄中 Postcss 對于 CSS 自定義屬性的支持情況,以便做好兼容.
設(shè)一個值,任何值都可以
那么……什么是自定義屬性呢?簡單來說就是一種開發(fā)者可以自主命名和使用的 CSS 屬性.瀏覽器在處理像 color 、position 這樣的屬性時,需要接收特定的屬性值,而自定義屬性,在開發(fā)者賦予它屬性值之前,它是沒有意義的.所以要怎么給 CSS 自定義屬性賦值呢?這倒和習(xí)慣無異:
.foo {
color: red;
--theme-color: gray;
}
自定義元素的定義由 -- 開頭,這樣瀏覽器能夠區(qū)分自定義屬性和原生屬性,從而將它倆分開處理.假如只是定義了一個自定義元素和它的屬性值,瀏覽器是不會做出反應(yīng)的.如上面的代碼, .foo 的字體顏色由 color 決定,但 --theme-color 對 .foo 沒有作用.
你可以用 CSS 自定義元素存儲任意有效的 CSS 屬性值:
.foo {
--theme-color: blue;
--spacer-width: 8px;
--favorite-number: 3;
--greeting: "Hey, what's up?";
--reusable-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.85);
}
使用
假如自定義屬性只能用于設(shè)值,那也太沒用了點.至少,瀏覽器得能獲取到它們的屬性值.
使用 var() 方法就能實現(xiàn):
.button {
background-color: var(--theme-color);
}
下面這段代碼中,我們將 .button 的 background-color 屬性值賦值為 --theme-color 的值.這例子看起來自定義屬性也沒什么了不起的嘛,但這是一個硬編碼的情況.你有沒有意識到,--theme-color 的屬性值是可以用在任意選擇器和屬性上的呢?這可就厲害了.
.button {
background-color: var(--theme-color);
}
.title {
color: var(--theme-color);
}
.image-grid > .image {
border-color: var(--theme-color);
}
缺省值
如果開發(fā)者并沒有定義過 --theme-color 這個變量呢?var() 可以接收第二個參數(shù)作為缺省值:
.button {
background-color: var(--theme-color, gray);
}
注意:如果你想把另一個自定義屬性作為缺省值,語法應(yīng)該是 background-color: var(--theme-color, var(--fallback-color))
傳參數(shù)時總是傳入一個缺省值是一個好習(xí)慣,特別是在構(gòu)建 web components 的時候.為了讓你的頁面在不支持自定義屬性的瀏覽器上正常顯示,別忘了加上兼容代碼:
.button {
background-color: gray;
background-color: var(--theme-color, gray);
}
作用域和級聯(lián)
要在什么時候定義這些屬性?在使用之前嗎?自定義屬性遵從標(biāo)準(zhǔn)的作用域和級聯(lián)規(guī)則,開發(fā)者按照平時使用的習(xí)慣來就可以了!
你可能希望將 --theme-color 設(shè)置為全局變量,處處可用.最簡單的方法是使用 :root 偽元素:
:root {
--theme-color: gray;
}
這樣定義以后,無論是按鈕、標(biāo)題還是圖片網(wǎng)格乃至整個文檔,都可以使用 --theme-color 了.
但當(dāng)你希望不同的模塊使用不同的 --theme-color 值怎么辦呢?和初始化自定義屬性的步驟相同,只需要在模塊的作用域中給屬性重新賦值,新的顏色就會分模塊生效,而不需要開發(fā)者一個個重置使用到 --theme-color 的屬性.
section.about {
--theme-color: darkblue;
}
section.contacts {
--theme-color: darkred;
}
section.news {
--theme-color: teal;
}
當(dāng)然,你也可以定義復(fù)雜的選擇器規(guī)則,應(yīng)用特定的屬性值:
section.news > .sidenote {
--theme-color: gray;
}
以上是“CSS自定義屬性的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!