《CSS揭秘》引言

就在最近这几年，CSS领域已经发生了极大的好转。（绝大多数）浏览器已经在兼容性上逐渐趋同，它们不兼容的地方几乎都是因为某一家支持了某个特性，而另一家还没支持——这比两家都支持但效果不一样要强多了。我们现在不需要再刻意记录某个浏览器的bug了。

一、标准的制定过程

与大众的理解大相径庭的是，W3C并不“生产”标准。实际上，它扮演的是一个论坛的角色：W3C以工作组的方式，把某项技术的相关各方聚集起来，最终由他们来产出标准。

CSS规范通常是由CSS工作组的成员来编写的。在编写本书时，CSS工作组共有98名成员，人员结构如下：

•86名来自W3C会员公司的成员（88%）

比如浏览器厂商、主流网站、研究机构、常规技术公司等

•7名特邀专家（包括本书作者）（7%）

•5名W3C工作人员（5%）

二、冰与火之歌：浏览器前缀

常见的有Firefox的-moz-，IE的-ms-，Opera的-o-，Safari和Chrome的-webkit-。通过浏览器前缀的方式，每个浏览器可以实现实验性的（甚至是私有的、非标准的）特性。浏览器前缀极易滥用，未来需要打补丁，所以很多开发者会直接写上所有浏览器前缀，再把无前缀的代码放在最后，以希望满足所有情况，造成冗余。

三、CSS编码技巧：

1. 尽量减少要改动的地方

举例来说，如果在放大一个按钮时需要在一堆规则中进行10处修改，那就很可能会漏改其中某处，当你在给别人善后时更是如此。

如果某些值互相依赖，那就用代码体现出来。比如：

font-size:20px;

line-height:30px;

行高是字号的1.5倍，就写成

line-height:1.5;

2. 使用em单位，百分比单位。

弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小。

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如，如果某元素以 12pt 显示，那么 2em 是24pt。

相对的计算必然会一个参考物，比如字体大小，相对所指的是相对于元素父元素的font-size。比如说：如果在一个<div>设置字体大小为“16px”，此时这个<div>的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；

但决定使用相对单位之前，要考量哪个元素（效果）是需要（再放大缩小等情况下）保持不变的，它们不能使用相对单位。如边框

border:1px;

3. 代码易维护和代码量少不等同，拆开的代码可能更好。针对简写。但简写是一种很好的防卫性编码方式，不易被覆盖。简写时消除歧义，使用/分隔。

4. 颜色关键字：currentColor,是一个借鉴自SVG的变量，首次出现在CSS3颜色。表示当前颜色，如果没有指定颜色，就自动从文本颜色处获得颜色。本身currentColor就是很多边框的默认颜色值。

实际上，这个特性让它成为了CSS中有史以来的第一个变量。虽然功能很有限，但它真的是个变量。

举个例子，假设我们想让所有的水平分割线（所有<hr>元素）自动与文本的颜色保持一致。有了currentColor之后，我们只需要这样写：

hr {

height: .5em;

background: currentColor;

}

5. 继承：inherit。从父辈继承。是一个值。

尽管绝大多数开发者都知道有inherit这个关键字，但还是很容易遗忘它。inherit可以用在任何CSS属性中，而且它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）。

举例来说，要把表单元素的字体设定为与页面的其他部分相同，你并不需要重复指定字体属性，只需利用inherit的特性即可：

input, select, button { font: inherit; }

6. 消除视觉错觉。比如：如果给容器四边指定相同的padding，实际效果看起来并不相等。因为字母的形状在两端比较整齐，而底部顶部则参差不齐。为了取得一致效果，往往减少底部顶部的padding。

7. 响应式网页设计（Responsive Web Design，RWD）。添加媒体查询（Media Query）会增加成本，要尽量避免，作为最后的解决办法。减少媒体查询的方法:

使用百分比相对长度。使用窗口化单位（vw/vh/vmin/vmax）使用max-width而不是width background-size：cover

欢迎关注公众号:webstudyroom