/* 全文风格诡谲，与原作者无关，翻译今天抽风，不好好翻译，走什么网红路线（嫌弃） */
你们所有人，所有人都会写CSS前缀。当然我说的是前端程序员，有时候还有几个设计师。啊，会写CSS就要写浏览器前缀啊！-webkit-、-moz-、-ms-、-o-，耳熟能详多少年了是不是啊！你不写，老浏览器不认啊！亲妈都不认啊！没办法啊！猴赛雷啊！厂商就是牛逼啊！程序员只能给他们擦屁股啊！本来我们设计师，我们程序员是受害者，肉体受伤，良心纯洁。BUT，NOW！我也发现，程序员们搞了一些逆袭工具，拨乱反正矫枉过正地，在写CSS的时候，把所有的CSS前缀都加上去了！这样做对吗！-webkit-、-moz-、-ms-、-o-，耳熟能详多少年了哈，写一个带一串哈！不全写完不舒服斯基了哈！不管是用的样式前处理器还是后处理器，还是手写拷贝啪啪啪粘贴的，需要写这么多前缀吗！需要吗！要吗！吗！！
作为长者，我给你们接下来写点不拿衣服的，给你们看看，我哪个前缀没写到吐过？我也没有自暴自弃啊！前缀嘛，写得够用就行，我换个体位还是很享受啊！你们哪！啧啧啧，看我给你们谈笑风生。
/* 前方有4段废话，可以选择跳过 */
在给你们看例子之前，我还是要说几句废话，反正我就爱说废话，文章到这我才写了四分之一不到，你们就举手要打我的脸，有人说：“狗带！就是有人用那么那么老的浏览器，你不写全了，用户咒你全家！”唉呀妈呀吓死我了，老子唱高调的时候你还没学会写div的吧，你今天给我扯用户，老子还就给你谈谈思想。你说要照顾老浏览器，这是什么思想？优雅降级吧？你牛逼！我告诉你，Aaron那本渐进增强的书都出到第2版了，优雅降级马上去见马克思了，为了用老设备的用户爽，我们就得让使用新设备的用户撸？我们就是要让新用户，爽！爽！爽！不仅他们爽，你们也要爽！写那么多前缀，你不累啊，真的条件反射啊，-webkit-、-moz-、-o-、-ms-，抱歉，顺序和刚才说的有点不一样，你们耳熟能详这么多年了呀！不是亲生胜似亲生呀！少写几个让代码干净点，管理起来容易点，不行吗！哎哟你是斯德哥尔摩综合症还是干脆是个M啊！老子这么有文化真的不想批评你了，抱歉。
其实吧，有些基本的前缀是优先可以干掉的，比如圆角这种东西，设计师画了个布局，给了5像素的圆角，然后你觉得，圆角呀，必须得写呀，IE8以下不支持，我搞九宫格（一种老技术，不懂请百度）也得搞出来呀！我的妈呀！别写了成不，难道用户看不到圆角，你们网站的体验就low成当年的12306了吗？你可不可以和设计师商量下，咱就别（四声）写前缀了，火狐3.6，Chrome9，iOS4下才需要用-webkit-前缀来写圆角，你们真的有这么多用户在用这些古董吗？
可能你们又想戳我，工匠精神呀。我给你讲，什么是工匠精神，工匠精神除了一丝不苟，更重要的是对作品负责。打个比方，有客户找了几个木工，想拿榫卯结构做一把椅子，选料包浆从头到尾样样讲究，但是雕花那师傅说了，拉大锯的，嘿，说你呢，椅背我要一块完整的板，我好雕个符合人机工程学的大雕。拉大锯的说，你咋不早出需求呢？王师傅榫眼都打好了，我这有块现成的料，一扎宽的正好合榫，再说了，客户出的钱也买不了这么多料哎。雕花师傅一听火了，老王！谁叫你开榫的，填上，我要雕个符合人机工程学的大雕！这时候，老王该怎么办？咱们跳出来，这就是设计和性能的平衡问题。老王听话填上这个榫，这木工质量肯定好不了，椅子坐上去，不出三天得散架。要是老王说老子三代木工给帝王将相造祠堂的，就没被雕花师傅为难过！不填不填就不填！这雕花的师傅也没辙，符合人机工程学的大雕飞了，椅子的用户体验也就吹了，坐上去倍结实，但是坐一会能把腰硌得生疼。怎么办呢？拉锯的一想，自己转行当木工之前也当过几年产品经理啊，孰轻孰重还是分得清的，就去找雕花师傅说，大雕咱不要了，咱不改榫，人机工程学这块您麻烦想个别的辄行么？在小板子上雕个凤雏您还是在行的。
于是，中庸之道上线重要的道理，被拉锯师傅成功应用了了项目之中。
/* 废话结束 */
下面，我们来说说前缀该怎么加！
border-radius
不需要加前缀！
.example {
border-radius:10px;
}
box-shadow
不需要加前缀！
.example {
box-shadow:0 0 5px rgba(0,0,0,0.5);
}
background-origin, background-size and background-clip
不需要加前缀！
.example {
background-origin:content-box;
background-size:100% auto;
background-clip:content-box;
}
Gradients
渐变能节省大量的前缀，这玩意兼容起来太麻烦了，W3C自己也晕，2011年和2012年的草案写法都不一样，所以也怪不了人家厂商。
这是普遍的写法：
.overkill-example {
background:#f9f9f9;
background:-moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
background:-webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:-o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:-ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
}
可是我就这么写！
.example {
background:#f9f9f9;
background:-webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
}
浏览器兼容越来越好了，这么写足够了！不相信你自己去查CanIUse(http://www.caniuse.com)，内行应该知道我在说什么。
calc()
保留-webkit-前缀！
.example {
background-position:100% 100%;
background-position:-webkit-calc(100% + 30px) -webkit-calc(100% + 16px);
background-position:calc(100% + 30px) calc(100% + 16px);
}
这东西好使是好使，计算个动态高度什么的，有他没谁了，你要是用，就先查CanIUse，考虑好再用，关于布局的东西，兼容不做好，看着闹心。
##Transitions
保留-webkit-前缀！
.example {
-webkit-transition:background-position 0.5s;
transition:background-position 0.5s;
}
有时候看看CanIUse，看那些浏览器啥时候能兼容一个属性啊，看着看着望穿秋水，再坚持坚持，这个transition属性也快不用写-webkit-前缀了，加油。
写有用的，不写没用的 结尾的废话
上面说的都是兼容这回事，我考虑的是普遍情况。你在写的时候最好参考下你的用户数据，如果你的用户数据显示大家都用火狐3.6，iOS2.1啥的，那你该写啥前缀写啥，刨点W3C的坟啥的，也有必要。
顺嘴提一句，过去我们说的兼容，发展着发展着变成了优雅降级，发展着发展着又变成了渐进增强，当然，每次发展都是进步，确实是值得学习的。关于优雅降级的好处，有诗为证：
世上有很多设备和浏览器！
家里有仨小兄弟 大哆大来和小咪
要问大名叫什么 股哥火葫和艾衣
它们长得都不一样！
大哆打小能自理 大来人笨善学习
小咪话唠又懒惰 偏偏爸比喜欢你
我们采取的兼容方案也不一样！
一日全家去野炊 小咪要吃椒麻鸡
大来要吃冰激凌 大哆要吃KFC
有时候呢，我们用优雅降级的办法，让老设备或浏览器获取一些降级体验！
爸比跑到KFC 买了一桶大炸鸡
大哆吃相很优雅 大来随地掉鸡皮
但是总有一些设备或浏览器，体验上实在是挂不住！
爸比说
KFC没有椒麻鸡 爸比对不起小咪
小咪哭声震天地 爸比你是不是傻逼
于是，我们选择了渐进增强，先满足老设备或浏览器的需要！
大来说
爸比爸比没关系 冰激凌没有我也可以吃炸鸡
大哆说
爸比爸比没关系 我去给弟弟买椒麻鸡
基本的代码是通用的！
兄弟几个一合计 谁都不吃KFC
为了家庭能和谐 全家都吃椒麻鸡
然后我们再去为现代浏览器或新的设备提供增强的体验设计！
爸比说
你们都是乖BB 以后我不再偏心意
明天小咪不在家
爸比买上冰激凌 我们再聚KFC！
恭喜你掌握了渐进增强的精髓。
原文：
http://www.456bereastreet.com/archive/201311/cutting_down_on_vendor_prefixes/
