The latest version of Cascade Style Sheets, CSS 3, was developed to make Web design easier but it became a hot topic for a while because not all browsers supported it. However, trends change quickly in technology and all browser makers currently are implementing complete CSS 3 support. Making that process easier for the browser manufacturers is CSS 3's modularized specification, which allows them to provide support for modules incrementally without having to perform major refactoring of the browsers' codebases. The modularization concept not only makes the process of approving individual CSS 3 modules easier and faster, but it also makes documenting the spec easier.
Eventually, CSS 3 -- along with HTML5 -- are going to be the future of the web. You should begin making your Web pages compatible with these latest specifications. In this article, I explore 10 of the exciting new features in CSS 3, which is going to change the way developers who used CSS2 build websites.
1. CSS 3 Selectors
In addition to the selectors that were available in CSS2, CSS 3 introduces some new selectors. Using these selectors you can choose DOM elements based on their attributes. So you don't need to specify classes and IDs for every element. Instead, you can utilize the attribute field to style them.
The most useful attributes for selectors are:
[attr^=val]Â- matches a DOM element with the attribute
attrand a value starting with
[attr$=val]Â- matches a DOM element with the attribute
attrand a value ending with the suffix
[attr*=val]Â- matches a DOM element with the attribute
attrand a value containing the substring
Apparently, the new CSS 3 selectors make styling different elements on a webpage pretty easy.
2. CSS 3 Rounded Corners
Rounded corner elements can spruce up a website, but creating a rounded corner requires a designer to write a lot of code. Adjusting the height, width and positioning of these elements is a never-ending chore because any change in content can break them.
CSS 3 addresses this problem by introducing the
border-radius property, which gives you the same rounded-corner effect and you don't have to write all the code. Here are examples for displaying rounded corners in different places of a website.
3. CSS 3 Border Image
Another exciting feature in CSS 3 is the ability to swap out a border with an image. The property
border-image allows you to specify an image to display instead of a plain solid-colored border.
4. CSS 3 Box Shadow
A box shadow allows you to create a drop shadow for an element. Usually this effect is achieved using a repeated image around the element. However, with the property
box-shadow this can be achieved by writing a single line of CSS code.
After previously removing this property from the CSS 3 Backgrounds and Borders Module, the W3C added it back in the last working draft.
5. CSS 3 Text Shadow
text-shadow property allows you to add drop shadows to the text on a webpage. Prior to CSS 3, this would be done by either using an image or duplicating a text element and then positioning it. A similar property called
box-shadow is also available in CSS 3.