首頁 >web前端 >css教學 >整潔的可選自定義屬性值技巧

整潔的可選自定義屬性值技巧

Lisa Kudrow
Lisa Kudrow原創
2025-03-14 11:22:08431瀏覽

Neat Optional Custom Property Values Trick

處理多值CSS 屬性(例如transform )中的可選自定義屬性值,有時需要一些技巧。 假設您有一個元素,其transform屬性包含多個值:

 .el {
  transform: translate(100px) scale(1.5) skew(5deg);
}

如果只想根據需要應用某些轉換值,則可以使用自定義屬性來實現可選性:

 .el {
  /* |-- default ---| |-- optional --| */
  transform: translate(100px) var(--transform);
}

然而,如果--transform未定義,整個transform屬性將失效。 解決方法是使用一個空值作為回退值:

 .el {
  transform: translate(100px) var(--transform, );
}

注意區別?這裡定義了一個空值( , ) 作為回退。 根據規範:

與通常的逗號省略規則(要求在逗號不分隔值時省略)不同,在var()中,一個單獨的逗號(後面沒有任何內容)必須被視為有效,表示一個空的回退值。

這與CSS 自定義屬性切換技巧類似,該技巧利用自定義屬性具有空格值。

演示

此技巧適用於任何多值CSS 屬性。 下面的演示除了transform之外,還使用了text-shadowbackgroundfilter

對於某些接受多個值的屬性(如text-shadow ),由於它們僅適用於逗號分隔符,因此需要特殊處理。 在這些情況下,當定義CSS 自定義屬性時,您(作為代碼作者)知道它僅在自定義屬性已定義值的上下文中使用。 然後應該在自定義屬性中第一個值之前直接插入逗號,如下所示:

 --text-shadow: ,0 0 5px black;

當然,這會限制在屬性值唯一的情況下使用此變量的能力。 但是,可以通過創建變量的“層”來解決這個問題,即自定義屬性指向更低級別的自定義屬性。

注意Sass 編譯器

在探索此技巧時,我發現Sass 編譯器中存在一個錯誤,它會去除空的回退值( , ),這與規範不符。 我已報告了此錯誤,並希望它很快得到修復。

作為臨時解決方法,可以使用不會導致渲染的回退值,例如:

 transform: translate(100px) var(--transform, scale(1));

以上是整潔的可選自定義屬性值技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn