CSS自定義屬性的示例分析

這篇文章主要為大家展示了“CSS自定義屬性的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS自定義屬性的示例分析”這篇文章吧。

兼容性

第一個問題是:CSS 自定義屬性能用在哪?目前從 Can I use 上獲取的信息顯示除了 Edge 外主流瀏覽器的最新版都已經支持這個特性了,而 Edge 也將支持這個屬性.

這說明現在 CSS 自定義屬性已經能用在實際項目中了,相信不久以后開發者們將大大依賴這個特性.但還請在使用之前請先檢查一下本文附錄中 Postcss 對于 CSS 自定義屬性的支持情況,以便做好兼容.

設一個值,任何值都可以

那么……什么是自定義屬性呢?簡單來說就是一種開發者可以自主命名和使用的 CSS 屬性.瀏覽器在處理像 color 、position 這樣的屬性時,需要接收特定的屬性值,而自定義屬性,在開發者賦予它屬性值之前,它是沒有意義的.所以要怎么給 CSS 自定義屬性賦值呢?這倒和習慣無異:

.foo {

  color: red;

  --theme-color: gray;

}

自定義元素的定義由 -- 開頭,這樣瀏覽器能夠區分自定義屬性和原生屬性,從而將它倆分開處理.假如只是定義了一個自定義元素和它的屬性值,瀏覽器是不會做出反應的.如上面的代碼, .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);

}

使用

假如自定義屬性只能用于設值,那也太沒用了點.至少,瀏覽器得能獲取到它們的屬性值.

使用 var() 方法就能實現:

.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);

}

缺省值

如果開發者并沒有定義過 --theme-color 這個變量呢?var() 可以接收第二個參數作為缺省值:

.button {

  background-color: var(--theme-color, gray);

}

注意:如果你想把另一個自定義屬性作為缺省值,語法應該是 background-color: var(--theme-color, var(--fallback-color))

傳參數時總是傳入一個缺省值是一個好習慣,特別是在構建 web components 的時候.為了讓你的頁面在不支持自定義屬性的瀏覽器上正常顯示,別忘了加上兼容代碼:

.button {

  background-color: gray;

  background-color: var(--theme-color, gray);

}

作用域和級聯

要在什么時候定義這些屬性?在使用之前嗎?自定義屬性遵從標準的作用域和級聯規則,開發者按照平時使用的習慣來就可以了!

你可能希望將 --theme-color 設置為全局變量,處處可用.最簡單的方法是使用 :root 偽元素:

:root {

  --theme-color: gray;

}

這樣定義以后,無論是按鈕、標題還是圖片網格乃至整個文檔,都可以使用 --theme-color 了.

但當你希望不同的模塊使用不同的 --theme-color 值怎么辦呢?和初始化自定義屬性的步驟相同,只需要在模塊的作用域中給屬性重新賦值,新的顏色就會分模塊生效,而不需要開發者一個個重置使用到 --theme-color 的屬性.

section.about {

  --theme-color: darkblue;

}

section.contacts {

  --theme-color: darkred;

}

section.news {

  --theme-color: teal;

}

當然,你也可以定義復雜的選擇器規則,應用特定的屬性值:

section.news > .sidenote {

  --theme-color: gray;

}

以上是“CSS自定義屬性的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！