CSS3 Finally Approaching Mainstream

CSS3CSS3 has been around for quite some time. The fact that it doesn’t validate is probably one of the main reasons we haven’t seen it all that much. Truth is that it does validate however, W3C doesn’t have a CSS3 validator and your styles are validated to CSS2 by default. To date almost all browsers support except of course IE however, IE9 is claiming support for several selectors though it is not available just yet. I’ve been using Chrome for quite some time now so I don’t really notice or care, I just make sure that whatever I’m doing will look OK if a browser doesn’t support it.

Two of the selectors that I have found quite useful lately is the radius, and the shadow. The radius puts rounded corners on block elements with a background color. It takes three different styles to do the trick and there is a fix for IE browsers.

.blocks {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

The -moz selectors are for FireFox, the -webkit selector is for Safari and Chrome. In the future all browsers “should” comply to the standard border-radius selector, Opera 10.5 already does.

There is a IE-CSS3 work around, it is a script written in VML (Vector Markup Language), an IE-specific vector drawing language. You can download the script for free then call it by putting -> behavior: url(ie-css3.htc); <- obviously you would put the correct path to the file.

The shadow selectors are also very useful. No more fixed width background tiles to outline a page with a nice shadow (like this page).

-moz-box-shadow: 5px 5px 10px #888;
-webkit-box-shadow: 5px 5px 10px #888;
box-shadow: 5px 5px 10px #888;

In this example the first 5px is the x offset, the second 5px is the y offset, the 10px is the size of the shadow, and the #888 is the color.

Similar to the box-shadow but without needing to have three selectors for all the different browsers is the text-shadow.

text-shadow: 2px 2px 2px #888;

This very cool and is actually part of the CSS2 specification so it validates at the W3C tool.

The gradient fill is quite nice as well.

CSS3 also provides ways to select certain parts of elements such as the first or last or Nth child of a list, the first or last or Nth letter of a paragraph. It has selectors that can place things before and after block and inline elements which is very convenient for the old has-layout glitch.

CSS3 is a step in the right direction for sure. You can find all the info you could possibly need at CSS3.info.

This is a great article from one of my favorite sites, Smashing Magazine, on some of the finer points of CSS3.

And of course CSS-Tricks, most notably the code snippets gallery, an excellent resource for anyone who works on websites.

Learning CSS is not the easiest task in the world but the learning curve is mild once you get going. A great way to learn is to create a site using WordPress or some other template based software, find the stylesheet and start tweaking it. Most of the big hosting companies provide tools that will automatically install a WordPress blog with a small amount of information and a click of a button. It is easy to find these blog hosting sites, the documentation is superb and the user base is huge so you will be in good company.

3 Replies to “CSS3 Finally Approaching Mainstream”

  1. Will Internet Explorer ever be current?

    The text shadow snippet is really cool, plus it works with the Google Fonts API… check out their docs

  2. I´ve been studying your weblog for awhile and it definitely not occurred to me to comment. Which is completely ironic, given that I´ve spent a whole lot of time over the previous few months learning what it takes to make people comment on my own website. Quickly after studying a few your posts I assume it´s controversial matters that stir people´s emotions to the point where they can´t simply let it go.

Leave a Reply

Your email address will not be published. Required fields are marked *