冰与火之歌:浏览器前缀

以下内容摘自《CSS揭秘》一书 

 在标准的开发过程中,总是有大大的"第22 条军规"1①挡在面前:标准的工作组需要网页开发者这一端的输入,以确保各项规范可以处理真实的开发需求;但是开发者往往没有兴趣尝试那些在生产环境中还不能使用的东西。当实验性的技术被广泛应用到生产时,工作组就被这些技术早期的、实验性的版本捆住手脚了,因为一旦这些技术有变动,那些已经在用这些技术的网站就挂了。显然,这完全否定了让开发者尝试早期标准的好处。

  这些年来,为了解决这个难题,许多方案被提了出来,但都不够完美。饱受诟病的浏览器前缀就是其中之一。这个方案是指每个浏览器都可以实现这些实验性的(甚至是私有的、非标准的)特性,但要在名称前面加上自己特有的前缀。最常见的前缀分别是Firefox 的-moz-、IE 的-ms-、Opera 的-o- 以及Safari 和Chrome 的-webkit-。网页开发者可以自由地尝试这些加了前缀的特性,并把试用结果反馈给工作组,而工作组随后会将这些反馈吸收到规范之中,并且逐渐完善该项特性的设计。由于最终标准化的版本会有一个不同的名称(没有前缀),它在实际应用中就不会跟加前缀版本相冲突了。

  听起来不错,对吧?但是你可能也猜到了,现实与我们的期望往往有很大的落差。当开发者发现这些实验性的、加了前缀的属性可以轻而易举地实现以前大费周章才能达到的效果时,他们就开始滥用了。这些加了浏览器前缀的属性迅速成为CSS 领域的一大潮流。网上的教程会写到它们,Stack Overflow 上的问答会提到它们……很快,几乎每个有上进心的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。

  由于网页开发者使用无前缀的属性是想确保代码的向前兼容,那么工作组想要修改这些无前缀语法就变得不可能了。我们基本上就跟这些半生不熟的早期规范绑在一起了,只能通过极其有限的途径来修改它们。用不了多久,这个"坑"里的每个人就会意识到,浏览器前缀已是一场史诗般的失败。

  最近,浏览器厂商已经很少以前缀的方式来实验性地实现新特性了。取而代之的是,这些实验性特性需要通过配置开关来启用,这可以有效防止开发者在生产环境中使用它们,因为你不能要求用户为了正确地浏览你的网站而去修改浏览器设置。当然,这会导致一个后果:尝试这些实验性特性的开发者会减少;但我们仍然会得到足够多的反馈,甚至是更高质量的反馈(你可能会质疑),同时还避免了浏览器前缀的所有缺点。不过我们还需要很长的时间,才能从浏览器前缀所引发的涟漪效应中解脱出来。

时间: 2024-10-25 20:49:13

冰与火之歌:浏览器前缀的相关文章

iOS冰与火之歌番外篇 - 在非越狱手机上进行App Hook(转载)

作者简介:郑旻(花名蒸米),阿里巴巴移动安全部门资深安全工程师,香港中文大学移动安全(Android & iOS)方向博士,曾在腾讯.百度以及硅谷的FireEye实习.在博士期间发表了多篇移动安全方向的论文(BlackHat.AsiaCCS等),去过10多个不同的国家做论文演讲. 曾帮助Apple公司修复了多处iOS安全问题,并且Apple在官网表示感谢.同时也是蓝莲花战队和Insight-labs的成员,在业余时间多次参加信息安全竞赛(Defcon.AliCTF.GeekPwn等),并取得优异

冰与火之歌第六季了

我好想那个带我看冰与火之歌的那个人 好想好想 整整一年了 . . .

iOS冰与火之歌

iOS冰与火之歌 – Objective-C Pwn and iOS arm64 ROP 蒸米 · 2016/01/26 10:29 0x00 序 冰指的是用户态,火指的是内核态.如何突破像冰箱一样的用户态沙盒最终到达并控制如火焰一般燃烧的内核就是<iOS冰与火之歌>这一系列文章将要讲述的内容.目录如下: Objective-C Pwn and iOS arm64 ROP █████████████ █████████████ █████████████ █████████████ 另外文中涉

AI创投的冰与火之歌:泡沫、跟风、短板和有钱花不出去的沮丧【转】

转自:http://36kr.com/p/5071386.html 国内的AI行业仍处于野蛮生长阶段.热钱不少,优质项目却不多.创业者拿钱难,投资者有钱却花不出去. 编者按:本文来自微信公众号“刺猬公社”(ID:ciweigongshe),作者哲铭:36氪经授权发布. 江山代有风口出,各领风骚一两年.这两年在全世界的创投圈都异军突起的人工智能(AI),最近风头似乎被共享充电宝盖过了.AI创投圈呈现出一面是冰.一面是火的奇异景象. 今年3月5日雷军表示,小米将增加对人工智能的投资.恰巧就在同一天,

常见的浏览器前缀

有些时候,某些CSS属性还只是最新版的预览版,并未发布成最终的正式版,而大部分浏览器已经为这些属性提供了支持,但这些属性是小部分浏览器专有的:有些时候,有些浏览器为了扩展某方面的功能,它们会选择新增的一些CSS属性,这些自行扩展的CSS属性也是浏览器专属的.为了让这些浏览器识别这些专属属性,CSS规范允许在CSS属性前增加各自的浏览器前缀. 常见的浏览器前缀有: 前缀 组织 示例 说明 -ms- Microsoft -ms-interpolation-mode IE浏览器专属的CSS属性需添加-

浏览器前缀-----[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西.尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀.像这样: a{      transition :transform 1s } Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀: a{      -webkit-trans

Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器

Autoprefixer,通过Can I Use数据库来确定哪些浏览器前缀是需要的,然后解析CSS文件,将前缀添加到CSS规则里. 你所要做的就是添加你的资源构建工具(比如:Grunt),然后你就可以忘记CSS前缀了,按照最新的W3C标准尽情书写无前缀的CSS,像这样: a { transition: transform 1s } Autoprefixer使用一个浏览器流行度和属性支持度的数据库来给你的CSS添加前缀. a { -webkit-transition: -webkit-transf

转:[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

原文来自于:http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西.尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀.像这样: a{      transition :transform

webpack通过postcss-loader添加浏览器前缀

在webpack中,我们可以很方便的使用autoprefixer来为css3属性添加不同的浏览器前缀. 首先,需要安装autoprefixer不用多说了,其次是安装postcss-loader(npm install --save-dev postcss-loader) 接下来在webpack.config.js文件里添加如下代码(红圈部分): 接下来,在webpack.config.js的同级目录下新建postcss.config.js文件,配置如下: module.exports = { p