0

If I have properties that are supported by browser with various prefixes, how I should to write the CSS?

Example:

#example {
    display: flex;  
    align-items: center;                    
    justify-content: space-around;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: space-around;
    display: -ms-flex;
    -ms-align-items:center;
    -ms-justify-content: space-around;
}

Or in this way ?

#example {
    display: flex;
    display: -webkit-flex;          
    display: -ms-flex;
    align-items: center;
    -webkit-align-items: center;
    -ms-align-items:center;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
}

Or maybe there is not an order ?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Borja
  • 3,359
  • 7
  • 33
  • 66
  • Order doesn't matter, but you might be better off using SASS or LESS to auto generate the prefixes for you. – JosephGarrone Feb 24 '16 at 12:38
  • You have autoprefixers. You only write the standards, and it will rewrite for you all prefixes: https://www.google.es/search?q=css+autoprefixer There are a lot of alternatives, even an online autoprefixer – Marcos Pérez Gude Feb 24 '16 at 12:38
  • Excuse my ignorance... but who rewrite my prefixes ? browser? is there a tool to generate prefixes? – Borja Feb 24 '16 at 12:40
  • @JosephGarrone: [Order certainly does matter.](http://stackoverflow.com/questions/7080605/ordering-of-vendor-specific-css-declarations) – BoltClock Feb 24 '16 at 12:47
  • You don't really need to prefix everything. [This site](http://shouldiprefix.com/) contains a list of the prefixed and if you need them or not. – Phiter Feb 24 '16 at 12:47
  • @BoltClock I was more implying the order of defining separate styles (IE: The justify, the align, the display). – JosephGarrone Feb 24 '16 at 12:50
  • @JosephGarrone: Fair enough. – BoltClock Feb 24 '16 at 12:51

1 Answers1

0

I would recommend you to use an online (or natively) tool that will automagically add the css prefixes for all browsers.

If you are using a build system like gulp or grunt, they have plugins that can automatically do this for you.

Tony W. A.
  • 24
  • 3
  • that tool suggest also to use "display: -webkit-box;" .... but this is an older syntax no ? – Borja Feb 24 '16 at 12:56
  • I don't know how you got "display: -webkit-box;"? I did not get that from both sites. I never used the online tools I only use gulp and I can recommend it. – Tony W. A. Feb 24 '16 at 13:04
  • i got it with second tool (autoprefixer)... maybe suggest older syntax? – Borja Feb 24 '16 at 13:26