css自定义属性

css自定义属性也就是css变量

变量语法

声明变量

选择器 {
  --main-bg-color: red;
}

使用变量

div{
  color:var(--main-bg-color);
}

作用域

使用的变量包含在声明的元素中生效

自定义属性备用值

它仅对支持 CSS 自定义属性的浏览器提供了一个备份机制，该机制仅当给定值未定义或是无效值的时候生效。 示例

:root{
  --color1:red;
}
p{
  /* 使用属性值作为备用值 */
  color:var(--color99,orange)
}
h4{
  /* 嵌套多个变量备用 */
  color:var(---color99,var(--color1))
}

无效变量

当浏览器遇到无效的 var() 时，会使用继承值或初始值代替。
浏览器将 --text-color 的值替换给了 var(--text-color)，但是 16px 并不是 color 的合法属性值。
代换之后，该属性不会产生任何作用。浏览器会执行如下两个步骤：
- 检查属性 color 是否为继承属性。是，但是
  没有任何父元素定义了 color 属性。转到下一步。
- 将该值设置为它的默认初始值，比如 black。

:root{
  --color:16px;
}
p{
  color:blue;
}
.p{
  color:var(--color)
}

<p class="p">无效变量，没有可以继承的color属性，默认color为 balck</p>

JavaScript 中的值

在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：

获取一个 Dom 节点上的 CSS 变量（内联)

注意： style.getPropertyValue的方式只能获取到内联样式的css变量值要想获取任意位置的CSS变量要使用 getComputedStyle

element.style.getPropertyValue("--my-var");

获取任意 Dom 节点上的 CSS 变量

css定义的变量和内联变量都能进行获取

getComputedStyle(element).getPropertyValue("--my-var");

修改或添加一个 Dom 节点上的 CSS 变量(内联)

注意: 调用过setProperty后是针对的内联style，有则修改，无则添加需要注意的是，通过css添加的变量还是存在的，只是权重没有内联高而已

element.style.setProperty("--my-var", 'value');

获取:root上的css变量根元素html，即document.documentElement

document.documentElement.style.getPropertyValue('--my-var')
getComputedStyle(document.documentElement).getPropertyValue("--my-var");
document.querySelector(':root') === document.documentElement;

@property 规则声明自定义属性

点击查看前论-MDN

语法

自定义属性(变量)`

<style>
  @property --property-name {
    syntax: '<color>';
    inherits: false;
    initial-value: #fff;
  }

  p {
      color: var(--property-name);
  }
</style>

syntax：该自定义属性的语法规则，也可以理解为表示定义的自定义属性的类型 支持的语法类型有
- <length>：长度类型，如px、em等；
- <number>：数字类型；
- <percentage>：百分比类型；
- <length-percentage>：长度或百分比类型；
- <color>：颜色类型；
- <image>：图片类型；
- <url>：URL类型；
- <integer>：整数类型；
- <angle>：角度类型；
- <time>：时间类型；
- <resolution>：分辨率类型；
- <transform-function>：变换函数类型；
- <custom-ident>：自定义标识符类型； syntax可以接受自定义值，例如css有很多关键字，如auto、inherit等，这些关键字可以作为的值，如 | auto | inherit
- <transform-list>：变换列表类型；
inherits：是否允许继承
initial-value：初始值

一个有效的 @property 规则代表一项自定义属性的注册，使用自定义属性名作为规则内代码序列的序部。

@property 规则中 syntax 和 inherits 描述符是必需的; 如果其中任何一项缺失，整条规则都将失效并且会被忽略。
initial-value 描述符仅在 syntax 描述符为通用 syntax 定义时是可选的，否则initial-value也是必需的——如果此时该描述符缺失，整条规则都将失效且被忽略。

未知的描述符自身都是无效的，且会被忽略。但是不会造成整条@property规则的失效。

| + # 的使用

'|' 使自定义变量能够接受多个语法结构。 syntax: '|<length+>': 这样可以接受颜色值或者数值。

@property --property-name {
  syntax: '<color>|<length>+';
  inherits: false;
  initial-value: 10px;
}

'+' 使自定义变量能够接受以空格分隔的多个值。 syntax: '+' : 这样可以接受用空格分隔的颜色值。"red blue"

@property --array {
  syntax: '<length>|<percentage>+';
  inherits: false;
  initial-value: 10px;
}
.div1 {
  width: 400px;
  height: 200px;
  background-color: pink;
  margin: var(--array);
  transition: 1s margin;
}

.div1:hover {
  /* 鼠标移入生效 */
  --array: 5% 10%;
}

'#' 使自定义变量能够接受以逗号分隔的多个值。 syntax: '#' : 这样可以接受用空格分隔的颜色值。"red,blue"

@property --array {
    syntax: '<percentage>|<percentage>#';
    inherits: false;
    initial-value: 10%, 20%;
}
应该是类似'+'的使用，这里就不验证了

重新赋值?

@property --property-name {
    syntax: '<color>';
    inherits: false;
    initial-value: blue;
}
p {
    color: var(--property-name);
}
p:hover {
    /* 这里还是要遵守@property声明的规则的，否者导致整条规则被忽略，比如这里只能赋值颜色 */
    --property-name: #000;
}
div {
    /* 鼠标移入p中，div里面的颜色没有跟着改变，说明只是p中重新声明的这个变量 */
    color: var(--property-name);
}

补充

@property 声明的自定义属性，比普通 --name 声明的自定义属性更好,有更好的过度效果比如 @property 在transition上面来过度背景色，普通声明是无法完成的

点击查看更多

JavaScript @property自定义属性

js语法

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: '#c0ffee',
})

注意

@property 在谷歌浏览器表现和其它浏览器会有所不同，存在兼容问题。

css自定义属性(css变量)