<p class="zw">flexbox布局有一个悠久且势头良好的发展过程，它的语法经过了数次的迭代和修订。如果本书是两年前写的，我可能会鼓励大家尽可能使用浏览器私有前缀属性，以便弹性布局能够兼容不同的浏览器。</p> <p class="zw">幸运的是，当前几乎所有的现代桌面和移动浏览器对于flexbox布局的支持鲜有差异。除非，你的网站或者APP仍然需要考虑老旧的浏览器，如IE11、OS X之前的浏览器，以及iOS下的Safari8，否则几乎完全无需写额外的浏览器私有前缀。在我的公司，我们只在客户要求支持一些老旧浏览器的时候，才使用<code>-webkit-</code>前缀属性以及一些其他的hack方法。下面是一个有代表性的弹性布局声明，带前缀的属性在最前面，后面跟着标准语法。</p> <pre class="代码无行号"><code>.hb-shelf { display : -webkit-flex; -webkit-flex-direction : column; -webkit-flex-wrap : wrap; display : flex; flex-direction : column; flex-wrap : wrap; flex : 1; }</code></pre> <h3 class="sigil_not_in_toc">Autoprefixer</h3> <p class="zw">像很多人一样，我很少手工书写如此之多的私有属性。取而代之的，我会使用Autoprefixer工具，它是可以自动为CSS添加可用、有效的私有前缀。它运行在命令行模式下，不过如果你也有终端恐惧症，你也可以在网上找到编译好的可视化版本，比Codekit。</p> <h3 class="sigil_not_in_toc">Modernizr</h3> <p class="zw">Modernizr是一款强大的特性嗅探库，在本书第一版中，它扮演了非常重要的角色。它会根据浏览器的分级支持情况，检测每个浏览器可用的弹性布局语法，从最开始的草案版本到最新的版本，并给<code>class</code>增加相应的样式名。我们可以利用这些样式，来区分对待现代浏览器和老旧浏览器。</p> <pre class="代码无行号"><code>.hb-shelf { display : flex; } .no-flexbox .hb-shelf { display : table; }</code></pre> <p class="zw">尽管相较于五年前，我们现在无需那么频繁地使用Modernizr来做前沿的CSS属性支持检测，但它仍然是为老旧浏览器做弹性布局的神器。</p> </blockquote>
