What is the proper way to order vendor prefixes?

Question

The rub

• CSS Tricks says that the order of the display vendor prefixes for flexbox is important and shows one ordering (-web

Answer 1

Mostly, the order of the vendor prefixes aren't that important, but be sure that you are using the most standarized version by add the one without the vendor prefix (just flex) at the end. The CSS always prioritize the last if the properties are equal.

Anyway, the flex without prefixing is now supported by the most common browsers: http://caniuse.com/#feat=flexbox. 96% of the browsers can use flexbox, and 82% of them do support flex without prefixing.

Answer 2

I am adding a new proper answer. Because it does matter, especially for flexbox. And the last two examples you pointed out aren't up-to-date to today's required final syntax, and need to be discarded.

Like Niklas said, you always want the official W3C standard unprefixed property last. The reasoning is that CSS parses all rules one after another. The last rule of the same (or similar) property will always take precedence over a previous one. The case of flexbox is peculiar however, because of the 3 different types of rules and specs.

First, ignore the given MDN and Bourbon rule sets they are not up-to-date.

The rule display: -moz-flex; from the MDN example is sadly wrong. Firefox did (and does) not officially support it. Firefox officially only supports -moz-box or flex. I will have the article edited for corrections with the -moz-box substitution.

The box reference from Bourbon is no longer accurate. You do not need it. The reason some demos might include it, is that the official 'flexbox' standard property was to become box at the time (2009). flex did not exist at the point. The flex syntax came as final recommendation later in 2013.

And in between IE10 implemented the -ms-flexbox intermediate 2011-2012 draft spec.

So it's important for flex rule sets to declare older properties first, in the correctly given CSS Tricks order. You can find the rule set here, with additional explanations on full browser support.

The two rules that could be swapped either way without much effect are -webkit-box and -moz-box.

Note that Firefox and Edge have had to alias older properties, or the webkit prefixed rules, to try and solve various bugs occuring due to inaccurate order, and/or missing properties out there on the web.

So in that sense, using the full current flexbox rule set very much matters.

Answer 3

As long as the W3C version (the official property) comes last, there is no difference.

The CSS rendering engine will always pick the last property that applies. Hence, you don't want Chrome, for example, to skip over flex and pick -webkit-flex, if flex is actually supported.

You're seeing variations in the ordering of vendor prefixes in CSS-Tricks, MDN and Bourbon because the order doesn't matter. Just note what they all have in common: flex is last.

Here are some more details:

• Ordering CSS3 Properties
• Ordering of vendor-specific CSS declarations