炫意html5
最早CSS3和HTML5移动技术网站之一

CSS变量初体验

根据Mozilla软件工程师Cameron McCormack的透露,火狐浏览器从V29版开始支持一种新的CSS特征——CSS变量。下面这个视频可以让你大概的了解一下CSS变量的基本情况:

CSS变量定义通过在变量名前加var-前缀实现,引用时使用var()获取变量值。例如:

:root {
var-companyblue: #369;
var-lighterblue: powderblue;
}
h1 {
color: var(companyblue);
}
h2 {
color: var(lighterblue);
}
<h1>WebTian.com</h1>
<h2>关注HTML5, CSS3, WEB前端技术</h2>

这里定义了两个CSS变量,分别是companyblue lighterblue ,变量的应用范围是document的根节点,使用效果如下:

CSS变量是有应用范围的,这就是说,你可以覆盖它们:

:root {
var-companyblue: #369;
var-lighterblue: powderblue;
}
.partnerbadge {
var-companyblue: #036;
var-lighterblue: #cfc;
}
h1 {
color: var(companyblue);
}
h2 {
color: var(lighterblue);
}
<h1>WebTian.com</h1>
<h2>关注HTML5, CSS3, WEB前端技术</h2>
<div class="partnerbadge">
<h1>WebTian.com</h1>
<h2>关注HTML5, CSS3, WEB前端技术</h2>
</div>

这样定义后,在.partnerbadge类下的h1h2就变成了另外一种蓝色:

CSS变量可以赋予任何值,可以像使用任何其它值一样使用它们,例如,你可以把它们放到calc()计算表达式里。CSS变量值可以重新赋值,比如,在不同的media query里赋不同的值。下面是一些使用场景的例子。

:root {
var-companyblue: #369;
var-lighterblue: powderblue;
var-largemargin: 20px;
var-smallmargin: calc(var(largemargin) / 2);
var-borderstyle: 5px solid #000;
var-headersize: 24px;
}
.partnerbadge {
var-companyblue: #036;
var-lighterblue: #369;
var-headersize: calc(var(headersize)/2);
transition: 0.5s;
}
@media (max-width: 400px) {
.partnerbadge {
var-borderstyle: none;
background: #eee;
}
}
/* Applying the variables */
body {font-family: 'open sans', sans-serif;}
h1 {
color: var(companyblue);
margin: var(largemargin) 0;
font-size: var(headersize);
}
h2 {
color: var(lighterblue);
margin: var(smallmargin) 0;
font-size: calc(var(headersize) - 5px);
}
.partnerbadge {
padding: var(smallmargin) 10px;
border: var(borderstyle);
}

根据上面的CSS定义,当浏览器窗口小于400px时,mediaQuery就会发生作用,里面的CSS变量值发生变化。

CSS变量这个新的CSS功能是在火狐Aurora版里第一次出现,也只是实现了基本功能。在这项功能真正的出现在正式发布版前,还有不少的CSS3规范里规定的内容要实现。Cameron对这些有一个比较详细的说明:

按照CSS3规范,火狐里还没有实现的部分是CSSVariableMap,它是一个对象,功能很像JavaScript里的Map,有getset等其它方法,使用这些方法能从CSS样式声明中获取变量的值。需要注意的是,你仍有可以使用getPropertyValue setProperty等方法从DOM值获取这些变量,但需要使用完整名称,例如var-theme-colour-1

试一试CSS变量吧,使用最新的火狐Nightly版就可以体验上面的这些代码演示的新功能。

炫意HTML5 » CSS变量初体验

Java基础教程Android基础教程