CSS的未来如此精彩：一方面，它是一种全新的页面布局方式；另一方面，它是炫酷的滤镜、颜色和其他视觉效果。这些CSS受到开发人员的追捧，在杂志和博客文章中都有介绍。如果说这些特性是CSS华丽的一面，那么让我们看看它简单的一面：很不起眼的东西，比如选择器、单位、函数（方法）。我经常说这是乏味的事情，但我的意思是他们做得很好，这就是我要分享的内容。不管怎样，让我们??来看看一些最有效、最朴实的CSS细节——远不如那些炫酷的CSS效果那么引人注目的细节。其中一些已经存在了一段时间，但值得更好地理解，而另一些则刚刚被引入。他们谦逊，但他们可以让我们更有效率——以一种谦逊的姿态。相对单位聪明且有远见的开发人员已经在使用相对单位（例如em或百分比），因此开发人员了解通常由于元素继承而使用计算器来辅助计算大小的问题。例如，现在常见的做法是为页面上的字体设置全局大小，然后使用相对单位来定义页面上的其他元素。CSS大概会这样写：html{font-size:10px;}这没问题，直到有子元素需要设置不同的字体大小，比如在这样的标签中：Thecatsatonthemat.如果要设置span的字体大小为1.2em，需要怎么做？拿出你的计算器，计算1.2除以1.4。结果如下：pspan{font-size:0.85714em;}这个问题不限于em。如果使用百分比来创建响应式流体布局网站，百分比与容器有关，因此如果要将元素定义为其容器的40%，则其高度为75%，其宽度需要设置为53.33333%。显然，这是不方便的。根相对长度单位为了解决字体大小定义的问题，现在可以使用单位rem（根em）。rem也是一个相对单位，但它对应一个固定的基本值，即文档根元素（在HTML文件中为html元素）的字体大小。假设和前面的例子一样，10px的字体大小也被设置为根元素的大小，那么这样写CSS就可以了：p{font-size:1.4rem;}这两个CSS规则是相对于根元素的字体大小，这段代码更加优雅和简洁，尤其是在设置简单的值如10px或12px时。这与使用px值非常相似，不同之处在于rem是可扩展的。在本文介绍的特性中，rem特性相对来说兼容性更好，可以被高级浏览器支持，包括IE9，除了OperaMobile。window相关的长度单位觉得rem单位很酷，如果再有一套单位可以解决百分比的问题就更酷了。它与rem类似，不同的是它不是相对于文档的根元素，而是相对于设备窗口本身的大小。这两个单位是vh和vw，是相对于窗口大小的高度和宽度。每个单位前面都有一个数字，代表百分比。div{height:50vh;}在上面的示例中，高度设置为窗口高度的一半。1vh相当于窗口高度的百分比，所以50vh就是窗口高度的50%。如果窗口大小改变，这个值也会相应改变。与百分比相比，好处是不用担心父容器，不管它的父容器是什么，10vw元素永远是窗口大小的10%。相应地，有vmin单位，它相当于vh或vw的最小值，并且最近宣布vmax单位将被添加到规范文档中（虽然不是在这篇文章的时候）。目前支持该功能的有IE9+、Chrome和Safari6。固定像素宽度。如：div{如果布局只用padding和border，可以用box-sizing解决，但是margin就没办法了。更好更灵活的方法是使用calc()函数建立不同单位之间的数学方程式，如：div{它不仅可以用来计算宽度，还可以用来计算长度——如果需要的话，它也可以在addcalc()insidecalc()中使用。IE9+和Firefox都支持此功能。Firefox需要加上-moz-前缀（在16或17版本中，它可能没有前缀）。还支持Chrome和Safari，但需要以-webkit-为前缀。但是，MobileWebkit还不支持它。加载字体库的一些字体的优越性能往往非常重要，尤其是市场上的移动设备种类繁多——导致连接速度的差异和不确定性——更能体现这种重要性。加快页面加载的方法之一是减少外部文件的数量。为此诞生了@font-face的新属性unicode-range。该属性为unicode-range（编码范围），表示编码字体的参数范围。加载外部文件时，只会加载那些使用到的字体，而不是整个字体库。下面的代码演示了如何从foo.ttf字体库中只加载三种字体：@font-face{这对于使用字体图标的页面特别有用。我测试过，使用unicode-range，加载字体文件的平均时间减少了0.85秒，这是一个不小的数字。当然，你可能不这么认为。该属性目前适用于IE9+、Webkit浏览器（如Chrome和Safari）。应该好好利用新的伪类单位和值，但是，我对选择器和伪类更感兴趣。我很高兴看到选择器模式的完成，即使只有少数浏览器支持它。引用史蒂夫·乔布斯的话：你让栅栏的里面和外面一样美丽，即使没有人能看到里面——因为你知道。第一次使用:nth-of-type()，是一种突破，就像是挣脱了思想的束缚。好吧，我有点夸张了。但是有一些新的CSS伪类确实值得狂热。否定伪类你可能不知道:not()伪类是好的，除非你自己练习。:not()带参数只是一个普通的选择器——不是复合选择器。一组元素加上选择器:not()，表示满足该参数的元素将被排除。听起来很复杂？但其实很简单。假设：要选择项目列表的奇数行，最后一行除外。如果是以前，需要这样写：li{color:#00F;}现在，通过将:last-child设置为否定伪类的参数，可以排除最后一个元素，这样就省去了一行代码并使其更加简单易维护。li{color:#00F;}否定伪类看起来并不惊人，你可以不用它，但它仍然很有用。我在基于Webkit的项目中使用过，优势还是比较明显的。老实说，这是我最喜欢的伪类之一。是的，我有最喜欢的伪类。在本文提到的特性中，负伪类是最兼容的，IE9+和高级浏览器都支持（不需要浏览器厂商前缀）。如果您熟悉jQuery，您可能已经习惯了它——它从1.0版开始就有了，还有一个类似的not()方法。“适用于”伪类：matches()伪类可以将普通选择器、复合选择器、逗号分隔列表或选择器的任意组合作为参数。奇妙！但是它能做什么呢？:matches()伪类的最大优点是聚合多行选择器。比如在父容器中选取几个不同子容器中的p个元素，在此之前，代码可能会这样写：.homeheaderp，配合:matches()伪类，可以提取共同点，减少代码数量。本例中选择器的共同点是home为起点，p为终点，所以可以用:matches()把中间的所有元素集合起来。使困惑？看代码就知道了：.home:matches(header,footer,aside)p{color:#F00;}这个其实是CSS4的一部分（准确的说是CSS选择器的第四层），这个规范文档也是提到将有一个类似的语法（逗号分隔的复合选择器）应用于:not()伪类。兴奋的！目前:matches()可以在Chrome和Safari浏览器中运行，但是需要加上-webkit-前缀，Firefox也支持，但是需要用老方法写成：any()，并且需要以-moz-为前缀。你喜欢这些土气的CSS细节吗？本文介绍的功能的最大优点之一是它们解决了现实世界中的问题，从琐碎和复杂的选择器到构建响应式网站的新挑战。事实上，我希望每个功能都能在最常见的项目中使用。过滤器等新功能可能直观而华丽，但我更愿意发现隐藏在深处的有用小技巧。在积极探索的过程中，每一个特性都能让你的事业更加顺畅——想一想，就不会觉得乏味。原文链接：http://www.w3cfuns.com/thread-5594394-1-1.html【编者推荐】你可以使用精美的jQuery&CSS3特效制作CSS3精美动画菜单如何编写兼容各种浏览器的CSSCSS3Paint：安卓机器人！精品jQueryAjax分页插件和教程
