Monday, June 15th, 2009

CSS3 breaking in the design community

Category: CSS

CSS3 properties can greatly improve your workflow, making some of the most time-consuming CSS tasks a breeze and allowing for better, cleaner and more lightweight markup. Some properties are still not widely supported, even by the most recent browsers, but that doesn’t mean we shouldn’t experiment with them or give visitors with modern browsers advanced features and CSS styling.

In this regard, keep in mind that educating our clients is both useful and necessary: websites don’t have to look exactly the same in every browser, and if a difference doesn’t negatively affect the aesthetics or usability of a website, it should be considered. If we continue to waste valuable time and money making every detail pixel-perfect (instead of adopting more flexible and future-oriented solutions), users won’t have an incentive to upgrade their browsers, in which case we would have to wait a long time before older browsers become legacy browsers and robust modern browsers become the standard.

The earlier we experiment with and adapt new CSS3 properties, the earlier they will be supported by popular browsers and the earlier we’ll be able to use them widely.

The words above are a conclusion in a piece in Smashing Magazine on taking your design to the next level with CSS3.

The post goes into details with case studies and examples for a huge set of enhancements available in modern browsers:

  • Selector improvement
  • RGBA and Opacity
  • Multi-Column Layout
  • Multiple Backgrounds
  • Word Wrap
  • Text Shadow
  • @font-face Attribute
  • Border Radius
  • Border Image
  • Box Shadow
  • Box Sizing
  • Media Queries
  • Speech

Take a walk through the article and play with the ideas. I really like Tim Van Damme‘s site!

Posted by Dion Almaer at 11:41 am

4.3 rating from 40 votes


Comments feed TrackBack URI

Remy Sharp analyzed Tim’s design in a screencast at jQuery for Designers that includes a jQuery-based alternative for the (WebKit-only) CSS Transitions.

Comment by davidlantner — June 15, 2009

Any CSS3/HTML5 to CSS2.1/HTML4 compilers? There seem to be enough standard hacks out there to pull something like that off these days. :-)

Comment by CaptainN — June 15, 2009

By the looks of it there won’t enough wide spread support for CSS3 (or HTML5) in browsers (given IE’s prime cut) anytime soon… Especially considering the different vendor prefixes that are still needed. *ugh*

That AmpleSDK makes more sense minute by minute.

Comment by rasmusfl0e — June 15, 2009

For what it’s worth, it looks like -moz-box-shadow is supported in the pending Firefox 3.5 release (as well as Safari 4.) I look forward to not having to make any drop-shadow PNGs (or GIFs, even.)

Comment by Schill — June 15, 2009

> Especially considering the different vendor prefixes that are still needed. *ugh*

Please, help me understand why vendor prefixes are needed if the correct css3 implementation is done ?

Why should we use :
-moz-box-shadow: black 10px 5px 5px;
-webkit-box-shadow: black 10px 5px 5px;

instead of:
box-shadow: black 10px 5px 5px;

I guess there’s a reason !? Is it a transitional state ?

Comment by AMIGrAve — June 16, 2009

@AMIGrAve: I was bemoaning the fact that no browser (that I’m aware of) supports CSS3 without the use of vendor prefixes – I would much rather have them to omit prefixes altogether. I just wish the transition to prefix-free CSS3 support was faster.

Comment by rasmusfl0e — June 16, 2009

As long as a particular CSS3 module isn’t finalized, vendor prefixes are used in case there are last minute changes. This allows the standards process to get implementation feedback while not having to actually take implementations into account. The box-shadow property is from the “backgrounds and borders” module which is still in draft status.

Comment by Joeri — June 16, 2009

Leave a comment

You must be logged in to post a comment.