目录

  1. 属性定义
  2. 使用自定义属性
    1. CSS 自定义属性遵循 CSS 级联及继承规则
    2. 循环依赖
    3. 多皮肤主题中的应用
    4. 组件化开发中的应用
  3. 浏览器检测
  4. 总结

自2015年12月W3C发布自定义属性级联变量推荐性规范已经有一段时间了,今天本文首先会对自定义属性使用做一个基本的介绍,后面将主要讲述在我们日常组件开发中CSS自定义的应用。浏览器兼容性参见CSS Variables (Custom Properties)

属性定义

基本语法:–: ,以“–”开头(为了和Sass/Less等预处理器变量进行区分),自定义属性名对大小写敏感,--foo--FOO 会映射到不同的值。

1
2
3
4
5
6
7
:root {
--btn-color: #fff;
}

.btn {
color: var(--btn-color);
}

使用自定义属性

基本语法:: var([,]);此处括号的意思是如果没有指定值,则使用值。这个扩展非常有用,比如我们做多皮肤主题时,可以使用此语法设置默认皮肤。

CSS 自定义属性遵循 CSS 级联及继承规则

  • 定义全局变量
1
2
3
4
:root {
--global-variables: 'global-value';
--bg-color: #f0f;
}
  • 定义组件局部变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.header {
--bg-color: #f00;
height: 20px;
background-color: var(--bg-color);
}
.main {
/* use global variable --bg-color: #f0f */
background-color: var(--bg-color);
}
.footer {
--bg-color: #00f;
height: 20px;
background-color: var(--bg-color);
}

循环依赖

  • 示例一:
1
2
3
4
5
6
7
8
9
:root {
--a: calc(var(--b) + 20px);
--b: calc(var(--a) - 20px);
}
/* box的 width 和 height 仍为初始值,自定义属性无效 */
.box {
width: var(--a);
height: var(--b);
}
  • 示例二:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
:root {
--font-size: 40px;
}
.parent {
font-size: var(--font-size);
}
.son {
--son: calc(var(--font-size) * 2);
/* font-size: 80px */
font-size: var(--son);
}
.grandson {
--font-size: calc(var(--son) * 2);
/* font-size: 160px */
font-size: var(--font-size);
}
</style>
<span class="parent">
parent
<span class="son">
on
<span class="grandson">grandson</span>
</span>
</span>

多皮肤主题中的应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style>
:root {
--default-color: #000;
}

body {
margin: 0;
color: #fff;
}

.header {
text-align: center;
background-color: var(--default-color);
}

.main {
background-color: #fff;
}

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: linear-gradient(to bottom, #ccc, var(--default-color));
}
select {
width: 100px;
height: 24px;
font-size: 14px;
line-height: 24px;
color: #333;
border: 1px solid #ccc;
background-color: none;
}
</style>
<header class="header">
<select id="theme-select">
<option value="#000" selected>Black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
</select>
</header>
<section class="main">
Main
</section>
<footer class="footer">
Footer
</footer>
<script>
/* change theme */
document.querySelector('#theme-select').addEventListener('change', function() {
document.documentElement.style.setProperty("--default-color", this.value);
}, false);
</script>

组件化开发中的应用

开发一个 Button 组件,并使用 CSS 自定义属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<style>
.btn-groups {
display: flex;
flex-wrap: wrap;
padding: 10px 5px;
background-color: #eee;
}

.btn {
--btnColor: #5eb5ff;
border: 1px solid var(--btnColor);
color: var(--btnColor);
background-color: white;
padding: 10px 25px;
text-decoration: none;
font-family: "Output Sans";
font-weight: 600;
border-radius: 3px;
margin: 5px;
transition: all .3s ease;
}

.btn-red {
--btnColor: #ff6969;
}

.btn-green {
--btnColor: #7ae07a;
}

.btn-gray {
--btnColor: #555;
}

.btn-purple {
--btnColor: #ef34ef;
}

.btn:hover {
color: #fff;
background-color: var(--btnColor);
}

.btn:active {
opacity: .6;
}
</style>
<div class="btn-groups">
<a href='javascript:void(0)' class='btn'>Submit</a>
<a href='javascript:void(0)' class='btn btn-red'>Submit</a>
<a href='javascript:void(0)' class='btn btn-green'>Submit</a>
<a href='javascript:void(0)' class='btn btn-gray'>Submit</a>
<a href='javascript:void(0)' class='btn btn-purple'>Submit</a>
</div>

浏览器检测

1.CSS @supports 检测

1
2
3
4
5
6
7
@supports ( (--a: 0)) {
/* supported */
}

@supports ( not (--a: 0)) {
/* not supported */
}

2.javascript检测

1
2
3
4
5
6
7
8
const isSupported = window.CSS &&
window.CSS.supports && window.CSS.supports('--a', 0);

if (isSupported) {
/* supported */
} else {
/* not supported */
}

总结

通过上面内容,我们了解了CSS自定义属性的定义、语法、检测、应用、示例及与javascript交互,同时我们也了解到 CSS 自定义属性的优点。如果你还没有使用过 CSS 自定义属性,动手get起来吧。