真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

CSS自定義屬性的示例分析

這篇文章主要為大家展示了“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è)資訊頻道!


網(wǎng)站標(biāo)題:CSS自定義屬性的示例分析
標(biāo)題路徑:http://weahome.cn/article/ihicgi.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部