The development of CSS3 has been split up into modules, with each module describing a new set of CSS properties. Developing the language in this way allows for new rules and selectors to be released in sections, rather than making us wait until the entire language is complete. You can view the completed list of modules here.
With CSS3's new selectors, developers are able to select more specific sections of their document. Most of these selectors are already being implemented into different browsers, so they are available for use now, although they may not work as flawlessly as we would like. Although CSS2 will always be supported, CSS3 brings more to the table when it comes to the new selectors and properties being created. CSS3 is completely backwards compatible, which makes it easier for web developers to change their existing code to fit the new languages needs. With CSS3 we're given the ability to add new types of border attributes, text effects, backgrounds, and many more design features.
Lets talk about a few of these in more detail.
Multi-Column Layouts
Using CSS3, multiple columns can now be created to display content using the selector .multiplecolumns and definitions like column-gap, column-count, and column-width. This feature is only available in Firefox and Safari 3, however, and as always it's important to remember to add your vendor prefixes. To create a two-column layout with a 1px border separating the columns, your code would look like this.
.multiplecolumns {
-moz-column-width: 50px;
-webkit-column-width: 50px;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
-moz-column-rule: 1px solid #FFFFFF;
-webkit-column-rule: 1px solid #FFFFFF;
}
Borders
Borders are nothing new when it comes to CSS, but with CSS3 we are now able to add new styles to our borders that were not available before. Although rounded borders can be created using CSS2.1, it often took a lot of unnecessary time and hair-pulling to get the borders looking the way you wanted them to look. With CSS3, creating a rounded border is incredibly easy, using the border_rounded selector. The rule can be applied to one, or all corners and the size of the border can be changed as well. The CSS3 code would look like this:
.border_rounded {
background-color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
}
Notice -moz- and -webkit-? When coding with CSS3 it is vital that we always use vender specific prefixes, at least until the language is officially released and working well in all browsers. These prefixes are:
- -moz- for Mozilla Firefox
- -webkit- for Google Chrome, Chromium, and Apple Safari
- -o- for Opera
- -ms- for Internet Explorer
A up-to-date list of vender-fixed CSS properties can be found on this website.
Border gradients, images, and backgrounds can also be added with CSS3. For more information on CSS3 and borders, please go here.
CSS3 is still a work-in-progress, but many developers have already started to implement parts of its script into their web pages. It wont be long before it takes over the web, and I'm excited to see what unique design changes it will bring to the table next.
For some helpful "cheat sheets" on CSS3 and HTML5, please go here.
