CSS3 worth it or not

Question

Ok, I need a little help. For quite some time now I've been using CSS2, it works with most browsers and it's pretty easy to modify. But all of a sudden I'm hearing about CSS3 and that it works with only certain browsers, so.... What are the benefits of using CSS3 when most of your viewers won't be able to see it in action?

CSS is CSS theres no need to coin a version with it. Ill bank on the chances of you actually using some of what is deemed as 3.0 mixed in with your 2.0 stuff. As far as browsers go, there support for CSS as a whole strengthens as each new version comes out. Eventually there will be a tipping point when older CSS is depreciated, then set out to legacy, and then eventually dropped in favor of a different method. Sure a lot of older browsers don't support some of the new stuff newer browser do, but thats been something to deal with since the dawn of the internet and web sites. — chris, Nov 11 '12 at 00:30
Also your CSS 2, are you aware that its not compatible with all browsers either, especially older ones then your thinking? Did you know all browsers then and now don't support all the methods equally? What will work on one browser may not on the next. So yes, in all.. chances are its a good idea to stick with the times.. — chris, Nov 11 '12 at 00:31

score 6 · Answer 1 · answered Jul 16 '09 at 15:34

6

At the moment, some parts of CSS3 work on some browsers. At some point in the future, however, a lot of CSS3 will work on a lot of browsers.

For now, you should only use the features of CSS3 that the browsers you're targeting support. Browsers should merrily ignore unknown properties though, so you can use those for non-essential eyecandy even if only some browsers support them.

When can I use... and the CSS3 module status should be of help.

answered Jul 16 '09 at 15:34

millimoose

39,073
9
82
134

Excellent answer. Use it for eyecandy only. Let your style degrade gracefully. – Kriem Oct 21 '10 at 12:42

score 3 · Accepted Answer · answered Jul 16 '09 at 15:32

3

CSS3 hasn't become the standard yet... i believe it works in FF but not in <IE7, which is sadly where the majority of browsers are. while CSS3 has some awesome features, it will still be a while until the internet catches up enough to make it worth using. i think you will save yourself a lot of headaches and cross-browser manipulation staying w/standard CSS...

answered Jul 16 '09 at 15:32

Jason

51,583
38
133
185

Your right, CSS3 doesn't work with IE7. Thanks for the help. – Tony C Jul 16 '09 at 15:36
Firefox doesn't support large swathes of CSS3 yet. – millimoose Jul 16 '09 at 15:37
3

for whoever gave me a downvote, please note the date at which this answer was placed. i would now actually say go ahead and CSS3 the crap out of your site, so long as it degrades gracefully. – Jason Oct 21 '10 at 23:11

score 2 · Answer 3 · answered Jul 16 '09 at 17:25

In fact, quite a lot of CSS3 properties are supported by Firefox 3.5 and later versions of Webkit; though often using proprietary names. One such example is for corner radius, where to reliably render one must use 3 different property names:

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

It's still a good idea to add in a few CSS3 properties in a progressive enhancement approach, using it to give an extra few touches to beautify a site's design to those with browsers supporting some CSS3 properties (Firefox and Safari have about 25-30% market share).

In my opinion a site does not have to look the same whichever browser you use; the most important thing is that the site is usable and accessible across all browsers, whether they be the latest version of Firefox or Mosaic 1.0.

Here's link for the rounded corners: http://stackoverflow.com/questions/1127227/css-rounded-corners. — Tony C, Jul 16 '09 at 18:03
'...a site does not have to look the same whichever browser you use; (...) the site is usable and accessible across all browsers...' - Agree! — Kriem, Oct 21 '10 at 12:44

score 1 · Answer 4 · answered Oct 10 '11 at 00:31

Don't hold back just because most browsers can't render CSS3 yet. There are numerous ways to use CSS3 only properties but still have fall backs to make the UX for users using older browsers not lack because of it.

Here's a great article on the subject from SmashingMagazine. http://coding.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/

If we all wait to begin developing interfaces with CSS3 when it works in all browsers, we'll never make it there. Web developers need to raise the bar together so that browsers can catch up.

score 1 · Answer 5 · answered Nov 10 '11 at 00:52

I approach CSS3 as progressive enhancement.

If you want drop shadows or rounded corners in a design I'll use CSS3. Yes it will work fine in modern browsers, but will not work in IE. But it will also allow me to use clean efficient html markup. Remember the old days nesting DIV's with images for rounded corners or drop shadows, what a mess and a pain.

These elements I treat as nice to have.

That being said there are a collection of JS libraries available which easily provide work arounds for Internet Explorer and some of the most applied CSS3 options. As an example check out CSS pie: http://css3pie.com/

Another approach as well is the excellent modernizr which feature sniffs, and adds CSS classes to the HTML tag, thus allowing you to code for each feature set.

http://www.modernizr.com/

Also to note, is the slightly annoying browser prefixes which @Donald Harvey mentions in his answer. Again there are a variety of tools to help with this. CSS3 please being a prime example: http://css3please.com/

I think the bottom line is, as long as implementing CSS3 doesn't break the functional experience, then why hold back. It's seems quite logical to me that if people want to surf the internet with browsers that are 5-10 years old, they are going to have a degraded experience, and that shouldn't be at the expense of those who are keeping upto date with modern browsers.

score 0 · Answer 6 · answered May 15 '12 at 14:30

CSS3 has numerous sweet things which you couldn't be possible only with CSS2

Advantage 1: Cool and neat CSS without burdening the server with hell lot of images for instance like rounded borders or for image shadows etc...

Advantage 2 : Sweet Animations possible without need of Gifs

Advantage 3: Gradients Background Stripe Images will be obsolete with CSS3.It could be easily achieved with the help of online Gradient generators.So our Server will be loving the CSS3 for sure

Advantage 4: Basic Box Model which is a huge relief rather to positioning the HTML layouts using div and span

Advantage 5 : Cool Text effects is possible

Advantage 6: Lot of cool attribute selectors to reduce the usage of jQuery selectors.

DisAdvantage:

Even though it have lot of cool features packed in mind of web developer and rich user Interface. Webkit browsers like Safari & Chrome and to certain extent mozilla browsers support most of the CSS3 features. Its going to take literally lot of time for 100 percent compilation across browsers.

score 0 · Answer 7 · answered Oct 23 '09 at 13:02

i am working on Dashboard widgets and webkit supports quite a lot of css3 and it is extremely useful in achieving results.

I do not have to worry in this environment about cross browser compatibility so it is admittedly easy, i.e. i do not need to think about the issues, just code. The sooner it gets into the wild and IE the better.

score -1 · Answer 8 · answered Sep 29 '11 at 14:38

Simply put, CSS3 will be visible by all but some versions of IE. Changes targeting IE for cross browser compatibility are not that time consuming. IE 8 supports some CSS3. IE 9 adds onto that. IE 10, probably going to be released a few months into 2012, looks like it will add even more in terms of animations, transitions, and other fun CSS3 additions. So, CSS3 is worth it for your sites to be cutting edge today and current tomorrow. Just my opinion.

CSS3 worth it or not

8 Answers8