how usefull using browser specific css like -webkit- -moz-

Question

How this browser specific css used?

I have this:

.example {
    transition: all 0.2s ease-in-out 0s ;
    -moz-transition: all 0.2s ease-in-out 0s ;
    -webkit-transition: all 0.2s ease-in-out 0s
}

All have same value all 0.2s ease-in-out 0s

Should i use all three of them, or just one like this?

.example {
    transition: all 0.2s ease-in-out 0s ;
}

Previous value for this transition css is by default.

Is this browser specific css used if i want specific styling for certain browser only, or is it a requirement that have to be used even if the value is same?

http://css-snippets.com/browser-prefix/. Also, see http://stackoverflow.com/questions/9401830/do-we-have-to-use-non-standard-browser-specific-css-vendor-prefixes-anymore possible duplicate — joe_young, Aug 15 '15 at 14:04
You only need -webkit prefix. -moz is not needed anymore. http://caniuse.com/#search=transition — dfsq, Aug 15 '15 at 14:09

score 0 · Answer 1 · answered Aug 15 '15 at 14:07

.example {
    transition: all 0.2s ease-in-out 0s ;
    -moz-transition: all 0.2s ease-in-out 0s ;
    -webkit-transition: all 0.2s ease-in-out 0s
}

This will work for the most browsers.

AND

.example {
    transition: all 0.2s ease-in-out 0s ;
}

This will work for not more than 2 browsers

See this guide: http://caniuse.com/

how usefull using browser specific css like -webkit- -moz-

1 Answers1