Blog

CSS 3 and and the Wonderful Wide Web Just Over the Horizon

December 23, 2008

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.

Posted by Matt Gardner at 10:07 AMTracker Pixel for Entry

Comments

Wow, never heared about css3, thanks for poiting this out

By Tamagotchi Town on Dec 28, 2008

My first intoducing to CSS was a few months ago when I really wanted to start getting into web design. After that, I had a few other projects, but now I am ready to learn more about CSS and I?ve managed to find your website. I had no idea that you can do so many things with this language, thank you for the post!

By Beauty Tips on Dec 28, 2008

Do you have any idea when CSS3 will be officially implemented by the major browsers? At the moment Safari and Konqueror have a lot of propriety features. I hope we don’t have to wait years for IE to catch up too :(

By Paul Green from CA on Dec 29, 2008

Hi paul, That’s a complex question. The W3C doesn’t really impose CSS rules, they suggest them as recommended features. There is nothing stopping modern browsers from implementing these features today. And even after the W3C recommends them nothing stopping them from ignoring these features as they see fit.

Basically, as newer versions of “good” browsers attempt to jump ahead and implement CSS 3 Functionality on their own, IE struggles to correctly interpret CSS 2.1 (and sometimes, just plain HTML!).

As for when it will be ready… that’s another tough question. The W3C dosen’t have a firm time-line that i can find! You can find out more about why on Tom Kirkpatrick’s blog: CodeGobbler.

By Matt Gardner on Jan 7, 2009

So begins a question which has of late become more and more urgent: what is the relation of css aesthetics to politics? Nice insight of the css 3

By Cheeky Penguin from Canada on Feb 11, 2009

Really css3 is one of the good tool to design your website. You have explained the features of css3 in nice way.

By Joomla Expert from USA on Aug 30, 2009

Add Your Comment

Please enter the word you see in the image below:


From the Blog

  • Click to fill out the Hop Studios Quote Request Form



 

Recent Blog Posts

RSS Feed


Archives