自定义属性(--*):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() 函数在全文档范围内复用的。

CSS 自定义属性是可以级联的:每一个自定义属性可以多次出现,并且变量的值将会借助级联算法和自定义属性值运算出来。

初始值see prose
适用元素所有元素
是否是继承属性
计算值as specified with variables substituted
动画类型离散值

语法

css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 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: #488cff;
  --second-color: #ffff8c;
}

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

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

#container {
  --first-color: #48ff32;
}

#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.

参见