Page 37 - css揭秘

-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
这里面有两条声明是完全多余的：-ms-border-radius 和 -o-border-
radius 这两个属性从来没有在任何浏览器中出现过，因为 IE 和 Opera 从一
开始就是直接实现 border-radius 这个无前缀版本的。

显然，把每个声明都重复五遍是相当枯燥的，而且很难维护。因此出现
某个工具来把这项工作自动化只是个时间问题。
„ 像 CSS3, Please!（http://css3please.com）和 pleeease（http://pleee-
ase.io/playground.html）这样的网站允许你把无前缀的 CSS 代码粘贴
进去，它们会自动帮你把必要的前缀都加好。这类网站是“前缀危
机”所催生出的第一批工具，很快就过气了，因为跟其他方案相比，
它们的使用成本太高了。
„ Autoprefixer（https://github.com/ai/autoprefixer）采用 Can I Use...
（http://caniuse.com）的数据库来判断哪些前缀是需要添加的；此外，
它是在本地完成编译的，类似预处理器。
„ 我自己开发的 -prefix-free（http://leaverou.github.io/prefixfree）会在
浏览器中进行特性检测，来决定哪些前缀是需要的。它的好处在于
几乎不需要更新，因为其所有信息都是用一份属性清单在真实的浏
览器环境中跑出来的结果。
„ 类 似 Stylus（http://stylus-lang.com/）、LESS（http://lesscss.org） 或
Sass（http://sass-lang.com）的预处理器并不自带任何加前缀的方法，
但很多人开发过一些能为常用属性加前缀的 mixin；社区中也有一些
库提供了这类 mixin。
由于网页开发者使用无前缀的属性是想确保代码的向前兼容，那么工
作组想要修改这些无前缀语法就变得不可能了。我们基本上就跟这些半生
不熟的早期规范绑在一起了，只能通过极其有限的途径来修改它们。用不
了多久，这个“坑”里的每个人就会意识到，浏览器前缀已是一场史诗般
的失败。
最近，浏览器厂商已经很少以前缀的方式来实验性地实现新特性了。取
而代之的是，这些实验性特性需要通过配置开关来启用，这可以有效防止开
发者在生产环境中使用它们，因为你不能要求用户为了正确地浏览你的网站
而去修改浏览器设置。当然，这会导致一个后果：尝试这些实验性特性的开
发者会减少；但我们仍然会得到足够多的反馈，甚至是更高质量的反馈（你
可能会质疑），同时还避免了浏览器前缀的所有缺点。不过我们还需要很长
的时间，才能从浏览器前缀所引发的涟漪效应中解脱出来。

6 第 1 章 引言

඀ࠡ JOEC