这是一个笔记博客

分类标签

当前:首页 > CSS3两个非常有用的新特性(CSS Variables & calc)

CSS3两个非常有用的新特性(CSS Variables & calc)

2018-03-20 17:12    浏览量:0    作者

CSS3自发布到现在已经很久了,由于各浏览器的兼容性问题,发展还是较为缓慢的,不过现在开发的应用也逐渐脱离太老旧的浏览器版本,旧的浏览器版本也加速退出历史舞台。本文选出并讲讲CSS3的三个在我看来非常实用的新特性。

一、CSS变量(CSS Variables/Custom Properties)

1、浏览器兼容性

从目前来看,CSS变量人兼容性还是不错的,如果是针对微信的二次开发项目,完全可以使用。

2、基本使用

CSS变量可以让我们不需要使用SASS等预处理器,直接在CSS中定义并使用CSS属性变量。

(1)变量属性的定义

如:

1
2
3
4
5
6
7
8
 
 
 
.container{
--mainColor: #dd3333;
--mainBgColor: #eeeeee;
--mainLightColor: #ffffff;
--mainFontColor: #444444;
--mainBorder: 1px solid #dddddd;
--mainBlankSize: 5px;
}
 
 
 
 

如上面代码所示,在一个类选择器下,使用”–”加上变量名,就可以定义一个CSS变量属性。

(2)CSS变量的使用

1
2
3
4
5
6
7
 
 
 
.container p{
color: var(--mainFontColor);
margin: var(--mainBlankSize);
}
.container section{
border: var(--mainBorder);
}
 
 
 
 

如上面所示,使用CSS变量只需要在属性值中使用val()函数把变量名传入即可。

3、变量作用域及变量继承

CSS变量有作用域范围的概念,上面的例子中,CSS变量是定义在类选择器.container中的,所以,作用域范围仅限于.container这个类下面的标签。

如果要创建全局的CSS变量,可以使用关键字“:root”,在“:root”下创建的CSS变量将可应用到全局中。如:

1
2
3
4
5
6
7
8
 
 
 
:root{
--mainColor: #dd3333;
--mainBgColor: #eeeeee;
--mainLightColor: #ffffff;
--mainFontColor: #444444;
--mainBorder: 1px solid #dddddd;
--mainBlankSize: 5px;
}
 
 
 
 

另外,CSS变量也有变量继承的概念,在一个父类中创建的变量作用域,在其子类中如果有创建相同名称的变量,则在子类选择器下,子类的变量会覆盖父类的变量,因此会以子类创建的CSS变量为准;如果子类中没有相同的变量,则会继承父类的变量设置。

如:

1
2
3
4
5
6
7
8
9
 
 
 
<div class="container">
<h2>CSS Variables</h2>
<div class="box1">
<p>1</p>
</div>
<div class="box2">
<p>2</p>
</div>
</div>
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
 
:root{
--mainColor: #dd3333;
--mainBgColor: #eeeeee;
--mainLightColor: #ffffff;
--mainFontColor: #444444;
--mainBorder: 1px solid #dddddd;
--mainBlankSize: 5px;
}
.container{
color: var(--mainFontColor);
}
.box1{
--mainFontColor: #dd3333;
}
.box1 p, .box2 p{
color: var(--mainFontColor);
}
 
 
 
 

上面的例子中,h2标签的文本和box2下面文本颜色都是#444444,因为它们都继承了全局:root的变量属性,而box1下自定义了相同名称的变量属性,覆盖了全局变量属性,因此,box1下的文本颜色将是#dd3333。

4、默认参数(样式)

上面在提到使用CSS变量的时候是使用var()函数,在使用var()函数获取变量属性值的时候,也可以传递一个参数,当获取的变量属性值不存在的时候,则将CSS样式设置为这个会传入的属性值。如我们在上面的例子中稍微改一下(只改变box1和box2的样式设置):

1
2
3
4
5
6
 
 
 
.box1 p{
color: var(--mainFontColor);
}
.box2 p{
color: var(--boxFontColor, #0a8acd);
}
 
 
 
 

我们可以看到,box1下面的文本并不会变化,因为它所引用的–mainFontColor是存在有值的,而box2下引用了不存在(根本没有定义)的–boxFontColor,但是它第二个参数传了一个颜色值#0a8acd,–boxFontColor变量不存在,但有默认样式值,因此,box2下的文本颜色会是#0a8acd。

5、使用实例

下面是一个使用实例,读者可供参考。

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
 
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>CSS Variables</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<s tyle>
*{margin: 0; padding: 0; box-sizing: border-box;}
h1{text-align: center;}
section{
width: 80%;
margin: 10px auto;
padding: var(--mainBlankSize);
min-height: 100px;
}
.container{
}
/**/
:root{
--mainColor: #dd3333;
--mainBgColor: #eeeeee;
--mainLightColor: #ffffff;
--mainFontColor: #444444;
--mainBorder: 1px solid #dddddd;
--mainBlankSize: 5px;
}
/**/
.greenTheme{
--themeColor: #75af11;
border: var(--mainBorder);
border-color: var(--themeColor);
--mainFontColor: #0a0acd;
}
.blueTheme{
--themeColor: #0a8acd;
border: var(--mainBorder);
border-color: var(--themeColor);
}
section h2{
text-align: center;
border-bottom: 1px solid var(--mainColor);
color: var(--mainFontColor);
}
section h2 span{
display: inline-block;
background-color: var(--themeColor);
color: var(--mainLightColor);
padding: 0 var(--mainBlankSize);
}
section p{
color: var(--sectionColor, #8e1296);
}
</style>
</head>
<body>
<h1>CSS Variables</h1>
<div class="container">
<section class="greenTheme">
<h2><span>绿</span></h2>
<p class=""></p>
<div>
<h3>西</h3>
</div>
</section>
 
<section class="blueTheme">
<h2><span></span></h2>
<p class=""></p>
</section>
 
</div>
</body>
</html>
 
 
 
 
 

6、参考文档

var()

Using CSS variables

Custom properties (–*)

 

二、calc

calc是一个计算函数,可以用来计算多种不同的CSS计量单位属性值,如vw,vh,px,em,rem,百分比等等都可以混合计算,在布局时将会给我们带来巨大的便利。

1、浏览器兼容性

可以看到,calc()函数的兼容性还是很好的。对于移动端开发基本上问题不大。

2、基本使用

calc()函数的使用非常简单,只需要传入一个计算表达式即可。如:

1
 
 
 
div{width: calc(100% - 40px);}
 
 
 
 

上面样式将宽度设置为当前屏幕尺寸宽度减去40px的宽度。

3、运算

calc()函数的参数(计算表达式)支持“+”、“-”、“*”和“/”四种基本运算。

1
2
3
4
 
 
 
.div1{width: calc(100% - 40px);}
.div2{width: calc(50% + 10px);}
.div3{width: calc(5 * 20vw - 30px);}
.div4{width: calc(100vw / 4 - 20px);}
 
 
 
 

4、一个简单使用实例

这里做一个简单的实例,一个WebApp经典的页面,上下两部分固定,中间垂直超出滚动,这种布局很常用,可使用绝对定位布局、Flexbox布局等多种方式实现,在这里用calc()来实现。

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
 
 
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>CSS Calc()</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<s tyle>
*{margin: 0; padding: 0; box-sizing: border-box;}
*:before, *:after { box-sizing: inherit; }
.container{width: 100vw; height: 100vh; overflow: hidden;}
.main{width: 100%; height: calc(100vh - 52px - 44px); background-color: #f8f8f8; position: relative; overflow-y: scroll;}
.main p{font-size: 14px; text-align: center; }
.main section{width: 100%; height: 1000px;}
header, footer{width: 100vw; background-color: #dd3333; color: #ffffff;}
header{height: 44px;}
header h2{text-align: center; height: 44px; line-height: 44px; font-size: 16px; font-weight: 500;}
footer{height: 52px; }
footer ul{ height: 100%; list-style: none; font-size: 0;}
footer ul li{display: inline-block; list-style: none; height: 100%; line-height: 52px; text-align: center; font-size: 14px; width: calc(100% / 4);}
footer ul li:not(:last-child){border-right: 1px solid #fff;}
footer .active{background-color: #0a8acd;}
</style>
</head>
<body>
<div class="container">
<header>
<h2>APP</h2>
</header>
<div class="main">
<p></p>
<section></section>
</div>
<footer>
<ul>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</footer>
</div>
</body>
</html>
 
 
 
 
 

5、参考文档

calc()

 

CSS3新特性还有很多,如针对动画的,针对布局的CSS-Grid等等,都值得慢慢发掘,上面就两个CSS Variables 和 calc 两个新特性做一下简述。

本文完。

 

转载自----http://www.thatyou.cn/css3%E4%B8%A4%E4%B8%AA%E9%9D%9E%E5%B8%B8%E6%9C%89%E7%94%A8%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7%EF%BC%88css-variables-calc%EF%BC%89/

推荐阅读