目录

  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起来吧。

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。