<p class="zw">我在后面的章节展示CSS，你很快就会发现一个反复出现的主题——并不是所有的浏览器都支持用同一种方式来使用相同的属性，例如，Edge和Safari在Mac OS X和iOS上原生支持多列布局。</p> <pre class="代码无行号"><code>.content { columns : 10rem; }</code></pre> <p class="zw">但是，在其他浏览器上使用多列布局，需要使用厂商特定的前缀。例如，针对Chrome、Opera和安卓浏览器，需要使用<code>-Webkit-</code>前缀，Firefox需要<code>-moz-</code>前缀。因此，要实现跨浏览器的多列布局，意味着你要先写几遍带厂商前缀的属性，然后才是W3C约定的没有前缀的语法。</p> <pre class="代码无行号"><code>.content { -moz-columns : 10rem; -Webkit-columns : 10rem; columns : 10rem; }</code></pre> <p class="zw">如果你觉得写多个厂商前缀的属性太繁琐，Autoprefixer是一个方便的工具，它从浏览器普及率以及可用的CSS属性支持数据来解析CSS，然后添加厂商的前缀。</p> <p class="zw">你也可以使用Lea Verou的<code>-prefix-free</code>，只要在页面的任何一个地方引入这个脚本，它就会在需要的地方，为每一个外链或内嵌的样式表，添加那些厂商的特定前缀。</p> <p class="图"><img alt="0301.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/11.jpg"></p> <p class="图题">你可以根据自己的开发环境，以多种方式使用Autoprefixer。那我呢？我把Autoprefixer集成到CodeKit中，然后每天用这个工具把Sass编译成CSS。</p> <p class="zw">标准产生之前，编写带厂商前缀的属性列表是一件很麻烦的事。因此，2010年彼得•保罗•科赫（PPK）呼吁浏览器厂商停止使用它们。</p> <p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“厂商前缀让开发人员的样式表变得累赘。为什么我们非得用好几个声明才获得一个单一的效果呢？兄弟们，让我们停止厂商前缀这个无稽之谈，适可而止吧。”</span></p> <p class="zw">对此我持不同的意见。如果新属性没有厂商前缀，而在每个浏览器的显示效果各不相同，那么PPK又该抱怨了。</p> <p class="zw">难道多写几个厂商前缀属性要花很多时间吗？什么？你以为做一个专业的开发人员很容易？那么我有一个妙计：我们不写盒模型hack，但事实上，没有任何人能做到。</p> <p class="zw">厂商前缀起初只是浏览器厂商和CSS2规范用来警告我们的，而不是让我们真地去使用它们。</p> <p class="zw">在现实中，厂商前缀通常还是必要的，它使得我们今天可以使用新的属性。在考虑到快速变化的网络前提下，建议还是使用厂商特定的前缀，以便安全地使用这些新属性。</p> <p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“我们不建议您在实际应用中使用这些扩展，那些未实现的CSS属性最好是用来做测试或者尝试。”</span></p> <p class="zw">但是，网络现在最需要的不是安全，它需要我们充分利用新的标准的技术，这样我们就可以创造一些神奇的事情。</p>
