Sort styles with prefixes in CSS

Navigation
8

Sometimes when I see CSS prefixes like -webkit , -moz and even -ms . So I had some questions about them:

  • Why do some styles do not need prefixes (like background , for example)?
  • Is there a correct (or recommended) order to write them in the code?

    • Example: 

    .class {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

    Or: 

    .class {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
}
  • If there is a correct order, is there (or will there be in the future) any problem writing outside of this order?

    • Thank you!

    UPDATE 1:

    Even writing in any order, the practical effect is the same. So question 3.

    UPDATE 2:

    I've been researching and found that the order can be "crucial" when the style involves more than one value (eg, border-radius: 30px 10px; ), which can cause a huge difference in the display of the element ( View here an example ). Therefore, it is more recommended to place the prefixed above the non-prefixed : 

    .class {
-moz-border-radius
-webkit-border-radius
border-radius
}
        
    asked by anonymous 13.10.2017 / 18:39

    2 answers

    1

    What you refer to are the prefixes and there are usually browsers creating their own properties in different ways.

    Currently there are several different css prefixes like:

    • -ms-, mso- Microsoft
    • -moz- Mozilla
    • -o- or -xv- Opera Software
    • -webkit- Apple
    • etc ...

    You can automatically generate your prefixes with the help of some websites like: link

    Or some IDE already have this option included.

    Why do not all styles need it?

    Not all css properties need prefixes because some of them are already native by default and the behavior will be the same regardless of which browser you are using.

    You can see some of them here:

    What should be the order?

    I personally usually use the following order: 

    display: -webkit-box;
display: -ms-flexbox;
display: flex;

    This is the same order as the link , but I think there are no problems with the order because each browser will read your prefix and execute the element this way.

        
    13.10.2017 / 18:58
    0
      

    Why do some styles do not need prefixes (like background, for example)?

    Because its specifications have already been adopted in almost all browsers, ie prefixes usually work when the browser is adapting to a new css feature, it is a way to approach that attribute in a particular way.

      

    Is there a correct (or recommended) order to write them in the code?

    No, regardless of the order, the browser will first handle the prefixed attributes, last unfixed attributes.

    That's why this type of prefixing became popular from css3.

    Is it really necessary?

    This is at your discretion, please note flexbox support (unprefixed)

    Absurddifference?Obviouslynot,butifyournicheisnotsotechnologicallyadvanced,it'salwaysgoodtouse.

    Edit

    Itisworthmentioningthatthistypeofprefixingistemporary,thatis,ifthespecificationiscompliantinallbrowsers,theprefixesmustberemoved,reachingafewbytesofperformance.

    source thoughtCo , caniuse

        
    13.10.2017 / 19:02
    What is the difference between Collation UNICODE_CI_AI, UNICODE_CI and UNICODE Long Polling performance with PHP, Mysql and Ajax