编程技术

Document

CSS 【详解】自定义属性（又名 CSS 变量）


声明变量 - -

变量命名规则

  • 支持数字命名
  • 支持使用短横线和空格命名
  • 支持中文等CJK文字
  • 不支持包含$、[、]、^、(、)、%、"等特殊字符的命名，要使用这些特殊字符，需要使用反斜杠转义。

变量值

可以是任意值或表达式

--direction: to top;
 --gradientColor: deeppink, deepskyblue;
 --gradient: to top, deeppink, deepskyblue;
 --linear-gradient: linear-gradient(to top, deeppink, deepskyblue);
  • 1.
  • 2.
  • 3.
  • 4.

变量作用域

后代元素可以原封不动地继承祖先元素设置的CSS自定义属性值。

body {
    --color: deepskyblue;
}
.box {
    background-color: var(--color);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

全局变量

:root {
  --borderColor: #ccc;
}
  • 1.
  • 2.
  • 3.

变量的特征

变量值可以相互传递

body {
    --green: #4CAF50;   
    --successColor: var(--green);
}
  • 1.
  • 2.
  • 3.
  • 4.

css变量不能给自己赋值

/* 这种写法是非法的 */
--primary-color: var(--primary-color, #2a80eb);
  • 1.
  • 2.

css变量不能用于@media媒体特征的值

:root {
    --maxWidth: 640px;
}
/* 不合法，语法无效 */
@media (max-width: var(--maxWidth)) {}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

CSS变量作为content属性值没有任何效果

/* 无效 */
.bar::before {
    content: var(--percent);
}
  • 1.
  • 2.
  • 3.
  • 4.

使用变量 var()

p {  
   background-color: var(--any-what, deepskyblue); 
}
  • 1.
  • 2.
  • 3.

deepskyblue为缺省值，当–any-what无效时使用 deepskyblue

var() 函数参数非法时

body {
    --color: 20px;
    background-color: deeppink;
    background-color: var(--color, deepskyblue);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

最终 body 的背景色为 transparent，因为background-color的初始值是transparent

var()函数只要第一个参数值可能有效，哪怕这个参数值是一个乱七八糟的东西，依然会正常解析。如果第一个参数值是不合法的，则var()函数解析为当前CSS属性的初始值或继承值（如果有继承性），也就是按照unset全局关键字的规则渲染。（注意，只是渲染规则类似，并不等同于直接设置unset关键字。）

var() 函数的空格尾随特性

html {
    font-size: 14px;
}
body {
    --size: 20;
    font-size: 16px;
    font-size: var(--size)px;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

最终body的font-size大小是14px

原理：此处font-size:var(–size)px等同于font-size:20 px，注意，20后面有一个空格，这属于不合法的font-size属性值。由于语法上var(–size)px又是合法的，因此会重置font-size:16px，最终使用父元素设置的字号大小14px。

改进方案是：

body {
    --size: 20;   
    font-size: calc(var(--size) * 1px);
}
  • 1.
  • 2.
  • 3.
  • 4.

或

body {
    --size: 20px;   
    font-size: var(--size);
}
  • 1.
  • 2.
  • 3.
  • 4.

js 获取CSS全局变量的值

let borderColor= getComputedStyle(document.documentElement).getPropertyValue("--borderColor");
  • 1.
// 获取 --color CSS变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 
// 输出cssVarColor值，结果是deepskyblue 
console.log(cssVarColor);
  • 1.
  • 2.
  • 3.
  • 4.

js 修改CSS全局变量的值

document.documentElement.style.setProperty("--borderColor","green");
  • 1.

js 设置CSS局部变量的值

<div id="box">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>
  • 1.
  • 2.
  • 3.
box.style.setProperty('--color', 'deepskyblue');
  • 1.

实战范例

  • 借助CSS计数器在页面中显示CSS变量的值
/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

进度条


多处使用的svg图像

:root {
    --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32'%3E%3Cpath 
fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 
20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-check {
    background: var(--icon-check) no-repeat center / 16px;
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
.valid-pass::after {
    content: var(--icon-check);
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

效果见  https://demo.cssworld.cn/new/8/1-3.php

按钮点击特效

效果见  https://demo.cssworld.cn/new/8/1-1.php

button {
    /* 这里的空格很重要 */
    --open: ;
    color: #2a80eb;
    -webkit-text-fill-color: #fff;
    border-radius: 4px;
    padding: 9px 20px;
    border: 1px solid var(--open, rgba(0,0,0,.1));
    box-shadow: var(--open, inset 0 1px 2px rgba(0,0,0,.1));
    background: var(--open, linear-gradient(#0003, transparent)) currentColor;
    text-shadow: var(--open, -1px -1px #0003);
    transition: .15s;
}
button:active {
    /* 任意全局关键字都可以 */
    --open: inherit;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

实现原理

  • –open:;前面有一个空格，也就是–open属性值是一个空格，在语法上是可能有效的。但是空格对于box-shadow和background等CSS属性是无效的，因此，box-shadow和background等CSS属性均解析为初始值
  • 点击按钮触发:active伪类后，会运行–open:inherit这个CSS声明，全局CSS关键字作为CSS自定义属性值一定无效，因此var()函数会使用后备CSS属性值进行渲染

自定义 CSS 函数 keyword()

模拟 attr() 函数



原创作者: u_15715491 转载于: https://blog.51cto.com/u_15715491/11457382