28 April 2010 | Team Tamar

Should you use CSS3 now?

CSS3 is the next generation of stylesheet due to be rolled out across the web when it is finalised. It has been ongoing since 2002 and is still not completed so when it will be finalised is anyone’s guess.

Most browsers (except IE) support at least some of the CSS3 properties that allow web design to become a much better process.

Instead of using images and complicated CSS you can specify a new CSS3 rule for say, rounded corners and they are generated by the browser thereby reducing load-time and sever requests. This is also better for accessibility as you don’t have to include empty alt tags for images that are for styling only.

The more CSS3 moves towards a standard, the more people are likely to implement aspects of it in their designs. These will mostly be in cases where the rounded corners or drop-shadow effects are not integral to the design but are nice to have, basically when people are ok with it not looking as good in IE.


Current state of play

As of right now – Safari, Chrome, Firfox, IE9 Preview and Opera 10.5 alpha have support for a large array of CSS3 specific styles. The downside with CSS3 as with all web design is that IE does not fully support it. Their latest stable browser IE8 has little support for CSS3 but IE9 which is currently in development does. The problem with IE9 is that it will only be available on Vista operating systems and above, not XP which a large percentage of companies still use. Meaning until people switch to IE9 then we won’t be able to fully utilise CSS3 (at least we’ll hopefully be able to ditch support for IE6 by then). In the mean time we will have yet another variation of IE to deal with and apparently this one renders text differently better.

The main benefits to CSS3 are that it allows the use of Javascript style functions natively in the browser. Things like animations and rotations blur the lines between Javascript and CSS and some people believe this is an error.

Another bonus to CSS3 is the ability to create slick looking graphics such as call to action buttons that don’t need to be created in Photoshop first. So editing them and A/B testing them becomes a lot easier. This is important for conversion design as well as usability testing although currently in the latter accessibility becomes an issue because of legacy browsers.

If you use the design method of progressive enhancement then this is entirely acceptable. Everyone can view the content in a semantic way with style and enhancements being added in layers with CSS and then Javascript. With this in mind it is logical to start experiment with what CSS3 can do.

Things to look forward to in CSS3

  • Animations
  • Rotation
  • RGBA (Red, Green, Blue, Alpha)
  • Font-smoothing
    • -webkit-text-stoke: 1px rgba(255, 255, 255, 0.0078125);
  • Font-smooth:always;
  • Text-shadow
  • Border image
  • Multiple borders
  • Columns
  • Multiple background images
  • Background size
  • Use any font
  • Rounded corners
  • Box shadow
  • Gradients
    • -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999));
  • New selectors
    • :nth-child
    • :nth-last-child
    • :nth-of-type
    • :nth-last-of-type
    • :first-child
    • :last-child
    • :first-of-type
    • :empty

For a full breakdown of which browsers support which selectors please visit http://www.findmebyip.com/litmus#target-selector

Team Tamar