4

Given that I'm not really bothered about backwards compatibility (I'm exploring CSS3 and HTML5 based design, rather than relying on on graphics and such) what are the benefits of using css like:

-moz-box-shadow:    3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;

Over just using:

box-shadow: 3px 3px 5px 6px #ccc;

The latter appears to work fine in most modern browsers (except the obvious! :p looking at you IE! Although I'll assume it probably works in IE9, but I can't test as I'm on a Mac at the moment).

Am I seeing things? Do we need to use the browser specific code above? Or are all browsers moving towards supporting the standards?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Thomas Clayson
  • 29,657
  • 26
  • 147
  • 224
  • possible duplicate of http://stackoverflow.com/questions/9211602/for-which-css3-properties-can-we-safely-drop-vendor-prefixes http://stackoverflow.com/questions/7261208/are-vendor-specific-style-prefixes-needed-any-more-on-most-common-css3-propertie http://stackoverflow.com/questions/7757622/do-i-still-have-to-use-all-five-vendor-prefixes-for-the-css-box-shadow-property – BoltClock Feb 22 '12 at 19:47
  • I love how you completely avoid using the term "vendor prefix" and call it non-standard CSS, because vendor prefixes **are** non-standard CSS :) Also yes, IE9 supports the unprefixed `box-shadow` property. – BoltClock Feb 22 '12 at 19:49
  • 1
    @boltclock - lol! I didn't know they were called that! I couldn't think what to call it, probably the reason why I couldn't find any info on t'internets either. :p Thanks for the links – Thomas Clayson Feb 22 '12 at 19:55

3 Answers3

7

It really depends on which features and which browsers you want to fully support. Even now some browsers are lagging.

Here is a really excellent guide: http://caniuse.com/

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • 1
    Wow, cool website! Shame about the search feature though! haha, just played about with it and had to press back about 80 times just to get back to this post! – Thomas Clayson Feb 22 '12 at 19:56
3

All browsers generally move towards standards support.

There are two issues

  1. A lot of the CSS3 rules available to us to use are still under review - i.e. not part of any standard yet.
  2. Some people persist in using older versions of a browser, which may not have support for non-prefixed rules.

For these two reasons, we continue to use vendor-prefixed CSS rules in our stylesheets.

Michael Robinson
  • 29,278
  • 12
  • 104
  • 130
  • Hmm, fair enough. But there's no reason to leave them out if you don't mind not supporting older browsers? Where I work generally people either don't support anything (ie6/ie7) or they're cutting edge. Always have the graceful degrade too. :) Just trying to cut down http requests and images and such where I can. :) – Thomas Clayson Feb 22 '12 at 19:59
0

The only prefix you need right now is the -webkit for chrome and safari support. Webkit is needed for -webkit-animation, -webkit-font-feature-settings, display: -webkit-flex, -webkit-filter etc..

-ms, -o and -moz provide support for browsers that even their own companies have stopped supporting.

Roumelis George
  • 6,602
  • 2
  • 16
  • 31