[CSS]CSS自定义属性

  • CSS自定义属性
    • 定义
    • 使用
      • 支持第二个参数
      • 动态改变自定义属性的值
        • 声明可以层叠和继承
        • 变量组合
      • 通过JavaScript改变自定义属性的值
      • 为低版本浏览器提供回退(fallback)方案
    • demo
    • 参考资料

CSS自定义属性

Custom Properties for Cascading Variables(用作层叠式变量的自定义属性)的CSS规范将“变量”的概念引入了CSS。你可以声明一个变量,再给它赋值,然后可以在样式表的任何地方引用它。可以通过这种方式,减少样式表中的重复代码。

定义

:root {
    --main-font : STKaiti;
    --font-size-base: 8px; 
}

自定义属性命名以两道横杠--为前缀,一定要声明在一个声明区块里,这里在:root选择器内声明。之后这个变量可以在整个页面的样式里使用。

使用

.refer {
    font-family: var(--main-font);
}

对一段文字使用用变量声明的字体STKaiti:

一次声明,在样式表的任意一个地方引用。如果需要修改它的值,只需要在一行代码中编辑它的值就可以。

支持第二个参数

var()函数支持第二个参数,代表一个默认值。假如一个变量被声明时,第一个参数没有被声明,第二个参数值就会被引用。

.refer {
    font-family: var(--main-font);
    color: var(--main-color, gray);
    font-weight: var(--brand-color);
}
  1. color声明一个默认值gray,变量–main-color没有被声明,于是默认值就会被使用。
  2. 如果var()被定义为一个无效值,则属性会被定义为初始值。如font-weight: var(--brand-color)变量是一个色号,对于font-weight是一个无效值,这种情况下font-weight的值会被定义为normal。(根据实验,如果其祖先元素定义了font-weight这种情况下使用继承的值)

[CSS]CSS自定义属性_第1张图片

动态改变自定义属性的值

声明可以层叠和继承

自定义属性的声明可以层叠和继承,你可以在多个选择器中声明同一个变量,这些变量在页面的不同部分可以有着不一样的值。


<html>
<head>
    <title>CSS自定义属性title>
    <style type="text/css">
        :root {
            --main-font : STKaiti;
            --font-size-base: 16px;
        }
        .refer {
            font-family: var(--main-font);
            font-size: var(--font-size-base);
        }
        article {
            --main-font : YouYuan;
            --font-size-base: 18px;
            font-family: var(--main-font);
            font-size: var(--font-size-base);
        }
    style>
head>
<body>
    <div>
        <h2>CSS自定义属性h2>
        <p class="refer">如果你刚好在用支持自定义变量的CSS预处理器,如Sass(syntactically awesome stylesheets)或Less,你可能。p>
        <article>
        在2015年,一个大家期待已久的名为“用
        article>
    div>
body>
html>

如下图,article下定义的变量可以在article内使用,可以说变量具有“块级作用域”

[CSS]CSS自定义属性_第2张图片

变量组合

变量可以组合使用

--variable-name: var(--another-variable-name);
.block__highlight { 
    /* DOESN'T WORK */ 
    --block-highlight-font-size: var(--block-font-size)*1.5; 
    font-size: var(--block-highlight-font-size); 

    /* WORKS */ 
    font-size: calc(var(--block-font-size)*1.5); 
}

通过JavaScript改变自定义属性的值

function changeProperties() {
    var rootElement = document.documentElement;
    var styles = getComputedStyle(rootElement);
    var mainFont = styles.getPropertyValue('--font-size-base');
    var mainColor = styles.getPropertyValue('--color');
    console.log(styles, mainColor, mainFont);
    rootElement.style.setProperty('--font-size-base', '28px');
    rootElement.style.setProperty('--main-color', '#cdf');
}

通过getProperty和setProperty对自定义属性进行读写

为低版本浏览器提供回退(fallback)方案

.refer {
    font-family: STKaiti;
    font-size: 16px;
    font-family: var(--main-font);
    font-size: var(--font-size-base);
}

低版本浏览器不能识别var()声明,可以给这类浏览器提供回退方案

demo

demo code

参考资料

CSS自定义属性

自定义属性 MDN

深入学习CSS自定义属性(CSS变量)

你可能感兴趣的:(前端,CSS/CSS3)