css 样式的一些细节

将来的CSS太让人兴奋了：一方面，是全新的页面布局方式；另外一方面，是酷炫的滤镜、颜色等视觉效果。这些CSS，受开发者追捧，被杂志和博客文章铺天盖地地介绍。

　　若是说这些特性是CSS华丽的一面，那咱们来看看它朴实的一面：很不起眼的东西，如选择器、单位、函数（方法）。我常常说这是繁琐的东西，但我意思是它们能干漂亮的活，这就是我要分享的。

　　怎么说呢，让咱们看看这些效果最好的朴实的CSS细节——这些细节远远没有那些酷炫的CSS效果那么引人注目。它们有些已经存在一段时间了，但值得咱们更好地认识，而有些则刚刚面世。虽然不起眼，可是它们能够提升咱们的工做效率——以谦虚的姿态。

　　相对单位

　　聪明又有前瞻头脑的开发者们已经使用相对单位了——如em或者百分比——因此，开发者们了解这个问题：每每由于元素的继承性而须要使用计算器做为辅助工具来计算大小。例如，如今广泛的作法是给页面的字体设置全局尺寸，而后用相对单位来定义页面中其它的元素。CSS大概会这样写：

html { font-size: 10px; } p { font-size: 1.4em; }

　　这样写是没问题，直到有个子元素须要设置一个不一样的字体大小，好比，在这样的标签当中：

The cat sat on the <span>mat</span>.

　　若是你要设置span的字体大小为1.2em，你须要作什么？拿出计算器，算算1.2除以1.4是多少，结果以下：

p span { font-size: 0.85714em; }

　　这个问题不局限于em。若是用百分比来建立响应式的流式布局网站，而百分比是与容器相关的，因此，若是要定义一个元素为它的容器的40%，它的高是75%，宽则须要设置为53.33333%。

　　很明显，这很不方便。

　　根相关的长度单位

　　为了修复字体大小定义的问题，如今可使用单位rem（root em）。rem一样是相对单位，可是它所对应的是固定的基本值，这个固定的基本值也就是文档的根元素的字体大小（在HTML文件中，就是html元素）。假设和上个例子同样，一样设定10px的字体大小为根元素的大小，那么CSS这样写就OK了：

p { font-size: 1.4rem; } p span { font-size: 1.2rem; }

　　这两个CSS规则都是相对于根元素的字体大小，这样的代码更加优雅和简便，特别是在设置简单的数值如10px或者12px的时候。这样和使用px值很类似，不一样点在于rem是可扩展的。

　　在整篇文章介绍的特性中，rem特性相对来讲是兼容性比较好，高级浏览器都能支持，包括IE9在内，除了Opera Mobile。

　　窗口相关的长度单位

　　以为rem单位很酷吧，若是还有另一组单位能解决百分比的问题，那就更酷了。它和rem的道理类似，不一样点在于，它相对的不是文档的根元素，而是相对于设备窗口自己的大小。

　　这两个单位就是vh和vw，便是相对于窗口大小的高和宽。每一个单位在前面加上数字，表明的是多少个百分比。

div { height: 50vh; }

　　在上面的例子，高度被设定为窗口高度的一半。1vh至关于一个百分比的窗口高度，因此50vh便是50%的窗口高度。

　　若是窗口大小变了，那么这个值也随之改变。这相对百分比来讲，好处是不须要担忧父容器，无论它的父容器如何，10vw的元素会一直是10%的窗口大小。

　　相应地，有vmin单位，至关于vh或者vw的最小值，最近还宣布有vmax单位会被加到规范文档里面（虽然在这篇文章发布的时候尚未）。

　　如今支持这个特性的有IE9+、Chrome和Safari 6。

　　运算式的值

　　若是你在作响应式的流式布局网站，常常会遇到混合单位的问题——用百分比设置栅格，可是又用固定像素宽度设置margin。如：

div { margin: 0 20px; width: 33%;}

　　若是布局只用到padding和border，你可使用box-sizing来解决，可是对于margin就无能为力了。更好、更灵活的方法是使用calc()函数，设置不一样单位之间的数学方程式，如：

div { margin: 0 20px; width: calc(33% - 40px);}

　　它不只能够用来计算宽，还能够用来计算长度——若是有必要，还能够在calc()里面再加calc()。

　　这个特性IE9+和Firefox都支持，Firefox须要加上 -moz- 前缀（在版本16或17可能不用加前缀），Chrome和Safari也支持，但须要加上 -webkit- 前缀。然而，移动Webkit还不支持。

　　加载字体库的部分字体

　　优越的性能每每很重要，尤为是市场上各类各样的移动设备——致使链接速度的差别和不肯定性——更加体现了这个重要性。其中一个加快页面加载速度的方法，就是减小外部文件个数，@font-face的一个新属性unicode-range就是为此而生。

　　这个属性就是unicode-range（编码范围），表明的是编码字体的参数范围。在加载外部文件的时候，只有那些被使用的字体才会被加载，而不是整套字体库。下面的代码演示了如何从foo.ttf字体库中仅加载三个字体：

@font-face {font-family: foo;src: url('foo.ttf');unicode-range: U+31-33;}

　　这点对于使用字体图标的页面尤为有用。我测试过，使用unicode-range，加载字体文件的时间平均减小了0.85秒，也不是小数目了。固然，你可能不会这么想。

　　这个属性，目前能够在IE9+、Webkit浏览器（如Chrome和Safari）中运行。

　　新的伪类

　　单位和值都应该好好利用，可是，让我更兴奋的是选择器和伪类。完善的选择器模式，即便只有少数浏览器支持，都让我兴奋不已。引用乔布斯的话：你要把栅栏的里面修得和外面同样漂亮，即便别人看不到里面——由于你本身知道。

　　我第一次使用:nth-of-type()的时候，简直是一次突破，就像我冲出了思想的桎梏。好吧，我有些夸张了。但有些新的CSS伪类，确实值得狂热一番。

　　否认伪类

　　你大概不知道 :not() 伪类的好，除非你亲自实践一番。带有参数的 :not() 其实就是普通的选择器——不是复合选择器。一组元素加上选择器 :not()，表示知足这个参数的元素会被排除出去。听起来有些复杂吧？可是实际上很是简单。

　　假设：要对项目列表的奇数行进行选择，可是最后一行除外。若是是之前，须要这样写：

li { color: #00F; } li:nth-child(odd) { color: #F00; } li:last-child { color: #00F; }

　　如今，经过设定:last-child做为否认伪类的参数，就能够把最后一个元素排除，这样少了一行代码，从而更加的简洁和易维护。

li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

　　否认伪类看起来并无什么惊人之处，你能够不用它，可是它仍是挺实用的。我曾经把它用在基于Webkit的项目当中，优点仍是挺明显的。说实话，它是我最喜欢的伪类之一。

　　是的，我有最喜欢的伪类。

　　在本文提到的特性当中，否认伪类是兼容性最好的，它被IE9+和高级浏览器支持（不须要加浏览器产商前缀）。若是你熟悉jQuery，你可能习惯用它——版本1.0开始就有了，以及类似的not()方法。

　　“适用于”伪类

　　:matches() 伪类能够用普通的选择器、复合选择器、逗号隔开的列表或任何的选择器组合做为参数。太棒了！可是，它能作什么？

　　:matches() 伪类最强大的地方就是聚合多行选择器。例如，要选择父容器里面其中几个不一样子容器里面的p元素，在这以前，代码或许会写成这样：

.home header p,.home footer p,.home aside p {color: #F00;}

　　有了:matches()伪类，就能够把共同点提取出来，缩减代码量。该例子里面，选择器的共同点是以home为起点、以p为终点，因此能够用:matches()把中间的全部元素集合起来。是否是有些困惑？看看代码就明白了：

.home :matches(header,footer,aside) p { color: #F00; }

　　这实际上是CSS4的一部分（确切地说，是CSS选择器第四等级），这份规范文档还提到将会有相似的语法（以逗号隔开的复合选择器）应用于:not()伪类。兴奋ing！

　　目前，:matches()能够在Chrome和Safari浏览器中运行，可是要加上前缀-webkit-，Firefox也支持，可是要按照旧的写法:any()，同时要加上-moz-前缀。

　　你爱上这些朴实的CSS细节了吗？

　　这篇文章讲到的特性，最赞的一点是它们解决了现实的问题，从琐碎而繁复的选择器到创建响应式网站的新挑战。实际上，我期待每个特性被使用到最普通的项目当中。

　　新特性如滤镜可能很直观很华丽，可是我更愿意发现隐藏在深处的实用小技巧。

　　在积极探索的过程当中，每个特性可让你的职业生涯更顺利——想到这里，就不会以为繁琐了。