kmcm

Web Development with PHP, HTML, CSS, & JavaScript

What I am looking forward to in CSS3

Monday 15th June 2009

Implementation of CSS3 is highly anticipated throughout the web, with a lot of designers already using some of its attributes on browsers that will allow it (ie, Safari). Just like HTML5, it's pretty polarising. I for one am looking forward to properly getting my hands dirty with it (rather than just messing about in my spare time), even though that may be a long way away. Anyway, here are the aspects of CSS3 that have peaked my interest thus far:

Multiple Backgrounds

This extension to the background attribute will allow you to specify multiple backgrounds on a single element, which will be very powerful, allowing the use of drop shadows and other complex backgrounds, without the use for non-semantic and extra tags, such as div wrappers.

background: url(top.jpg) top left no-repeat,
url(banner.jpg) top 11px no-repeat,
url(bottom.jpg) bottom left no-repeat,
url(middle.jpg) left repeat-y;

Text Shadow

It may seem like a pretty superfluous effect, but text shadow can be a very useful and beautiful typographic tool. It's already implemented in Safari (3 onwards) and can be used to give headings a bit more emphasis and a bit of style. It is a worry though, that text-shadow might become one of those over-used, amateurish attributes to avoid, but hopefully not.

text-shadow: 3px 2px 2px #ccc;

Multi Column Layout

Anyone who's spent any time doing CSS knows that newspaper like columns are an absolute nightmare, and near next to impossible to properly implement with CSS2. The problem with this is that they would be a good effect. Floating divs and separating content, or the use of javascript, seem to be the only options available at present, but CSS3 allows separating a container using column count or column width, with the contents of the area flowing seamlessly from column to column.

column-width: 10em;
column-gap: 1em;

Border Radius

Pretty simply put, the border radius attribute will enable rounded corners without the use of images, which will come as a big relief for designers everywhere. Granted, the effect of this attribute will probably be lessened because a lot of people will probably just use multiple background images instead. Regardless, it will still be pretty useful.

border-radius: 5px;

Opacity/RGBA

Another handy design tool will be the ability to make an element semi-transparent, by using the opacity attribute. This will set the transparency for an element and all it's children, while using RGBA to set the background colour of an element will only result in a transparent background, leaving any children of that element with an opacity level of 1. This will make it a lot easier to replicate beautifully, layered designs, without the use of javascript or large and cumbersome background images.

//opacity
background: rgb(255, 0, 0) ; opacity: 0.2;
//RGBA
background: rgba(255, 0, 0, 0.2);

Web Fonts

As designers, we're always bound to "web safe" or common fonts when creating designs (I'm hoping that's why so many people use Comic Sans....) and converting them to XHTML and CSS. In order to use outrageous or even just uncommon fonts, we have to resort to images, techniques like SIFR, or just alienating the majority of users (I really wouldn't recommend that last one). The @font-face attribute (introduced in CSS2) will enable developers to declare and reference a font for use in the page, which can be loaded by the CSS when required. This, of course, is subject to the relevant licensing of the font you wish to use....

@font-face {
font-family: NewFont;
src: url('new-font.otf');
}

Attribute Selectors

For me, the most exciting and anticipated aspect of CSS3 will be advanced attribute selectors. The ability to target the nth-child of an element will prove very powerful, added to being able to select substrings of attributes, and elements with a particular link or image location. Basically CSS3 will be able to do any DOM traversing currently implement using jQuery, and more.

//Access the 3rd item in a list
li:nth-child(3) { text-transform:uppercase; }
//target the odd numbered children (in this case, paragraphs) 
//of the containing element
p:nth-child(odd) { color:#f00; }
//any p that is an only child!
p:only-child { color:#000; }
//any empty list item element
li:empty { display:none; }

Of course it's worth mentioning that CSS3 is still a work in progress, and as such is a long way away from becoming standard practice. That's a fact made all the more real given internet explorers abysmal implementation, even IE8 hasn't a clue what to do with CSS3. Considering almost 30% of the net is still using IE6, we can safely assume that CSS3 attributes will be confined to personal projects and labours of love, rather than client websites, for the foreseeable future.

More Reading on CSS3:

Filed under: