[CSS]CSS自定义属性
CSS自定义属性
Custom Properties for Cascading Variables（用做层叠式变量的自定义属性）的CSS规范将“变量”的概念引入了CSS。你能够声明一个变量，再给它赋值，而后能够在样式表的任何地方引用它。能够经过这种方式，减小样式表中的重复代码。javascript
定义
:root { --main-font : STKaiti; --font-size-base: 8px; }
自定义属性命名以两道横杠--为前缀，必定要声明在一个声明区块里，这里在:root选择器内声明。以后这个变量能够在整个页面的样式里使用。css
使用
.refer { font-family: var(--main-font); }
对一段文字使用用变量声明的字体STKaiti：html
一次声明，在样式表的任意一个地方引用。若是须要修改它的值，只须要在一行代码中编辑它的值就能够。java
支持第二个参数
var()函数支持第二个参数，表明一个默认值。假如一个变量被声明时，第一个参数没有被声明，第二个参数值就会被引用。css3
.refer { font-family: var(--main-font); color: var(--main-color, gray); font-weight: var(--brand-color); }
- color声明一个默认值gray，变量–main-color没有被声明，因而默认值就会被使用。
- 若是var()被定义为一个无效值，则属性会被定义为初始值。如
font-weight: var(--brand-color)变量是一个色号，对于font-weight是一个无效值，这种状况下font-weight的值会被定义为normal。（根据实验，若是其祖先元素定义了font-weight这种状况下使用继承的值）
动态改变自定义属性的值
声明能够层叠和继承
自定义属性的声明能够层叠和继承，你能够在多个选择器中声明同一个变量，这些变量在页面的不一样部分能够有着不同的值。git
<!DOCTYPE html>
<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内使用，能够说变量具备“块级做用域”github
变量组合
变量能够组合使用web
--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()声明，能够给这类浏览器提供回退方案svg