为flexbox订购供应商前缀的正确方法是什么?

时间:2016-03-25 17:55:57

标签: css css3 flexbox

摩擦

  • CSS Tricks表示flexbox的display供应商前缀的顺序非常重要,并显示了一个排序(-webkit-box-moz-box-ms-flexbox,{{ 1}},-webkit-flex
  • MDN显示的顺序与CSS技巧不同,并为flex-moz-box-moz-flex-webkit-box,{{-webkit-flex换算-moz-flex 1}},-ms-flexbox
  • Bourbon显示了不同的顺序并引入flex,其他两页甚至没有提及(box-webkit-box-moz-boxbox-webkit-flex-moz-flex-ms-flexbox

问题

  • 订单真的很重要吗?
  • 这样做的正确方法是什么?

3 个答案:

答案 0 :(得分:7)

只要W3C版本(官方财产)排在最后,就没有区别。

CSS渲染引擎将始终选择适用的最后一个属性。因此,如果实际支持flex,则您不希望Chrome跳过-webkit-flex并选择flex

您在CSS-Tricks,MDN和Bourbon中看到供应商前缀排序的变化,因为订单并不重要。请注意它们的共同点:flex是最后一个。

以下是一些更多细节:

答案 1 :(得分:3)

大多数情况下,供应商前缀的顺序并不重要,但请确保您使用最标准化的版本,最后添加一个没有供应商前缀(只是flex)的版本。如果属性相等,CSS总是优先考虑最后一个。

无论如何,最常见的浏览器现在支持没有前缀的flex:http://caniuse.com/#feat=flexbox。 96%的浏览器可以使用flexbox,其中82%的浏览器支持flex而无需加前缀。

答案 2 :(得分:2)

我正在添加一个新的正确答案。因为确实很重要,特别是对于flexbox。你指出的最后两个例子对于今天所需的最终语法并不是最新的,需要被丢弃。

像尼克拉斯所说的那样,你总是希望获得官方W3C标准的无标题属性。原因是CSS一个接一个地解析所有规则。相同(或类似)属性的最后一个规则将始终优先于前一个。然而,flexbox的情况很奇怪,因为有3种不同类型的规则和规范。

首先,忽略给定的MDN和Bourbon规则集,它们不是最新的。

MDN示例中的规则display: -moz-flex;遗憾地错了。 Firefox确实(并且确实)没有正式支持它。 Firefox官方仅支持-moz-boxflex。我将编辑该文章以更正-moz-box替换。

Bourbon的box引用不再准确。你不需要它。一些演示可能包括它的原因是官方的&#flex;'标准财产在当时(2009年)成为boxflex此时并不存在。 flex语法是2013年晚些时候的最终建议。

在IE10之间实施了-ms-flexbox中间2011-2012 draft spec

因此,在正确给定的CSS Tricks顺序中,首先声明旧属性对于flex规则集非常重要。您可以找到规则集here, with additional explanations on full browser support

可以以任何方式交换但没有太大影响的两个规则是-webkit-box-moz-box

请注意,Firefox和Edge必须为旧版属性或webkit前缀规则添加别名,以尝试解决网络上的各种bugs occuring due to inaccurate order和/或缺少的属性。

因此,在这个意义上,使用完整的current flexbox rule set非常重要。