Blog

One of the amazing things that CSS (Cascading Style Sheets) has brought to the web is expanding functionality. Many programs and languages add more and more features as time goes on, but for years HTML offered the same clunky, inbred family of tags and tools to create Web pages. The release of CSS1 by the W3C changed this radically. Aided by the release of “version 5”? Web browsers that made CSS functionality standard, this mark-up language has revolutionized design on the web.

CSS allows designers to create one master style document that governs a site, control that has so many implications that it’s hard to trace all of the benefits. Its largest impact over-all is to reduce the code weight and complexity of HTML pages, making the web a faster, friendlier place.

CSS 1, the first iteration of style sheets on the web, was released in December 1996. CSS 2 followed as a recommendation in May of 1998. Most modern browsers, however, follow the CSS 2.1 specifications. These were briefly recommended by the W3C in 2005, and permanently in July of 2007.

CSS 3 specifications have been under development by the W3C since 1998 and are going to offer a bevy of new features and abilities. I have picked out a few of my favorites:

• Multiple Backgrounds: CSS 3 will allow for multiple background images to be applied to one element. This is a huge benefit for creating unique shapes like boxes with rounded corners, unique titles and pages with dynamic content. With one div you could build a rounded corner box that could extend in every direction. However, up next is:
• Border-radius: That’s right, rounded corners using only CSS. Each corner could be controlled independently much like borders are handled now.
• Speech: Your computer can talk. Using the Aural media type designers will be able to style speech, with control over volume, balance, pitch and speed. Website visitors that need aural user agents will now get the attention that they deserve. This could expand the user experience of the web for the hearing impaired, and create fresh uses for new technology like your cell phone.
• The Box Shadow: That ancient nemesis of modernists everywhere, the drop-shadow, will be controlled directly through CSS. With three properties, vertical offset, horizontal offset and blur radius, as well as support for the aforementioned border radius, it’s going to be a great day to be a bad designer (You are not a bad designer, we all have to do things we know are wrong to survive). We will also get:
• Text Shadow: This is a drop-shadow effect that can be applied directly to text. It will have the same three properties as box shadows.
• Opacity: At last we will see through it all. I’m imagining a glowing translucent web-future, where each page looks like a magnificent multi-colored x-ray. Or imagine a site where you could see the other pages through the one you are on! A library where opacity is based on relevancy! Web blog posts that literally fade away with time. Coupled with the new alpha property for RGB and HSL colors, we can have a more beautiful web ahead.
• Word Wrap: Using the value break-word, long words, URLs and other character strings will be broken into two lines instead of overflowing their div. Perhaps, just perhaps, this is the first step towards hyphenation on the web. The possibility of lovely deckled rags on the web keeps me awake like a kid at Christmas.
• Web Fonts: The ability to call a TrueType or OpenType Font file from your server. This means in the future the web could have unique type faces for every site.

These are by no means all the features that CSS 3 will offer, just the cream of the crop for Western web developers. For clearer explanations you can take a look here, and for incomprehensible techno-speak check the W3C’s CSS 3 progress report.

Here’s the best part: a few of these properties are already implemented on current browsers! FireFox, Opera, Safari and Konqueror are the most likely candidates to sport these features, so follow-up on your favorites.