自訂屬性(--*):CSS 變數

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

* Some parts of this feature may have varying levels of support.

-- 為前綴的屬性名稱,例如 --example-name,代表包含值的自訂屬性,可以使用 var() 函數在其他宣告中使用。

自訂屬性作用於其宣告的元素,並參與層疊:這類自訂屬性的值是由層疊演算法決定的宣告值。

預設值see prose
Applies toall elements
繼承與否yes
Computed valueas specified with variables substituted
Animation typediscrete

語法

css
--some-keyword: left;
--some-color: #0000ff;
--some-complex-value: 3px 6px rgb(20 32 54);
<declaration-value>

此值匹配一個或多個標記的序列,只要該序列不包含任何不允許的標記。它代表有效宣告可以具有的值的全部內容。

備註: 自訂屬性名稱區分大小寫——--my-color--My-color 將被視為不同的自訂屬性。

範例

HTML

html
<p id="firstParagraph">這段文字應該有藍色背景和黃色文字。</p>
<p id="secondParagraph">這段文字應該有黃色背景和藍色文字。</p>
<div id="container">
  <p id="thirdParagraph">這段文字應該有綠色背景和黃色文字。</p>
</div>

CSS

css
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

結果

規範

Specification
CSS Custom Properties for Cascading Variables Module Level 1
# defining-variables

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
--*
env()
Safe area inset variable safe-area-inset-bottom
Safe area inset variable safe-area-inset-left
Safe area inset variable safe-area-inset-right
Safe area inset variable safe-area-inset-top
Window Controls Overlay variable titlebar-area-height
Window Controls Overlay variable titlebar-area-width
Window Controls Overlay variable titlebar-area-x
Window Controls Overlay variable titlebar-area-y
var()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Uses a non-standard name.
Has more compatibility info.

參見