I’ve just reviewed the w3 walkthrough for CSS3. There are, of course, a lot of new bells and whistles that CSS2 doesn’t have (obviously), but there are some important points to factor in. Some of these new items are completely useless. Ok, not “completely” useless, perhaps you’d like to rotate something that should never be rotated on a Web page.
Having said that; most of these items are not supported on Internet Explorer(which should not come as a surprise). IE is slowly becoming the least friendly browser around. Opera, Firefox, Safari and Chrome support some of it and it’s important to note they sometimes require identifiers within the CSS. That, to me, is annoying.
The good news is that, with time, most of these browsers will adopt the new items and will no longer require identifiers in the CSS. I can’t put a date on that but I’m darn sure it will happen. You may be scratching your head with all these words like, “sometimes, require and annoy,” so I will go through a list of the good, bad and ugly.
The Good
Borders! – Supported by all but IE. However, it will be supported when ever IE 9 launches. On a little side note, IE is limited to the “company-project-speed.” The great news is that only Firefox requires the “-moz-“ tag inside the css and all other browsers support it out-right. Horray!?! Indeed.
Why do I consider this good you may ask? To me this means no more graphic hacks for rounding a border in a table or div tag. That alone is enough to make it part of the good section. Only setback is of course IE, which I’m familiar with now.
Box Shadow – I know, I know; drop shadows were cool in the 90’s. Look, if done correctly and used wisely, a drop shadow can really look good. I’m not talking about the extremely large ones that make a plane seem as if lifting off the page but rather the simple hard to notice version that gives support to good design. They are useful sometimes.
Support is likewise. All browsers but IE are on board, however; firefox, chrome and safari all require “-moz- or –webkit-“ to work properly. I think it’s worth a little more typing to make your viewers happy.
Fonts and Transistions – Really great that all browsers support the “@font-face” and it eliminates the “but what if they don’t have ‘arial’ font on their machine” argument. Perfect.
Transitions for me is really sort of the eye candy category and look fancy and is great and all but really it still is sort of a fancy trick. The effect can be achieved with Flash or JavaScript but now we don’t have to go through all that effort. It’s great but it will only work on chrome, safari and opera at the present time. Support will come from firefox in the future and IE . . . well . . it’s IE so sorry; no support.
I’m also happy that layering background images is now supported in CSS3. IE 9 will have support for multiple ‘urls’ in the “background-image:” and the other browsers fully support with no additional prefixes to type.
The Bad
3D Transitions – I think this was a good idea that just doesn’t execute in a good way so it falls into my bad category. It’s not ugly, but it sure isn’t good. It is practical, however, it needs polishing if you ask me.
Transistions – I know I have this in the Good category but it lacks support from the browsers. It’s a good thing and it also frustrates. The frustration landed it in this category as well.
Text Shadow – Really? Ungh. Ok, see the paragraph above about box shadows? This is an example of how to not ‘do’ drop shadows correctly. If you use a shadow behind text you should seriously reconsider. It looks bad.
2D Transitions – It just seems to me like this doesn’t even seem practical. I don’t see the logical purpose for these transitions. If you wanted to scale something, then why not do it outside of HTML and CSS? I don’t think this is that bad and I might use the scale, but I don’t think it fits into my work-flow.
The Ugly
CSS 3D animations – This looks awesome in Chrome! So why isn’t it supported in the other browsers? The frustration level is too much that this landed in Ugly because I can’t use it in my design. Maybe I should only look at stuff through chrome and safari.
CSS Resizing – Useless feature in my opinion. I can’t see the need for this. Viewers won’t want to resize a table/div. Also not supported very much.
Take the good away from the bad. I think the few things in CSS3 that are browser compatible are worth the effort and prefixes. I also think it will improve web design as a whole. If you can look past the bad and the ugly you’ll see that this is a good thing and we should hope for more support from firefox in general because IE isn’t going to cut it. IE still has a huge chunk in the viewer statistics (about 25% currently) but is being overtaken by chrome and firefox leads with 40%.
If you’d like to learn more about the CSS and how to use them, follow the link below to W3C. Thanks for reading!
References:
MSN –
W3C –
Firefox CSS3 –
