“As the popularity of CSS grows, so does interest in making additions to the specification.”

CSS3 is still under development, if you want to follow the progress report, click here. Yes, as you can see it’s still not finished after all those years. The first public introduction was in 2006 is I’m not mistaken.

Well more browsers manufacturers have already started supporting most of the features of CSS3 with Opera and Safari in the lead. Firefox 3.1 will come out soon and promises to get along the others, while IE stays in the back.

For now, there are only a handful of working features. A few of them are listed below.

Rounded Corners

Since the start of web2.0, the use of rounded corners were in. If you didn’t use them, your website wouldn’t be categorised as a web2.0 site. The main problem was you needed at least 4 images (1 for each corner) and some javascript or complicated div work.

Well not anymore! 2 lines are more then enough. Let me give you an example:

html file:

<p class="round">This is easy</p>

css file (to round off the element):

.round {
	background-color: #666; 
	color: #fff; 
	line-height: 20px; 
	width: 200px; 
	padding: 10px; 
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
}

For everyone to see, here’s a screenshot of how Firefox/Safari displays the above block:

So what’s new? The actual CSS3 declaration is border-radius. Until the specs are finalized the various browser manufacturers have enabled the features via prefixes — the -moz- prefix is what Firefox uses and the -webkit- prefix is for Safari.

There is also a possibility for you to choose which corner should be rounded. This can be done by using “TopLeft TopRight BottomRight BottomLeft“. Here is an example code:

# -moz-border-radius-topleft  / -webkit-border-top-left-radius
# -moz-border-radius-topright / -webkit-border-top-right-radius

If by any chance you do want to start using the rounded function feature, but would like to have the same effect on other browsers that doesn’t support it, go here.

Borders

Another exciting new border feature of CSS3 is the property border-image. With this you can define an image for each separte corner and side. This can be done with following attributes:

    border-image:
    border-top-image
    border-right-image
    border-bottom-image
    border-left-image
    border-corner-image:
    border-top-left-image
    border-top-right-image
    border-bottom-left-image
    border-bottom-right-image

an example of this would be:

Another great feature with borders is the use of gradientcolors without any images as you can see in following example:

The CSS code for this is:

.bordercolor{
	border: 8px solid #000;
	-moz-border-bottom-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
	-moz-border-top-colors:    #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
	-moz-border-left-colors:   #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
	-moz-border-right-colors:  #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
	width:200px;
}

For the moment only Firefox3 has this feature, so there is no use in trying for Safari and Opera.

Multi Column

This feature makes live much easier, hehe. This new feature allows a webdeveloper to let text be fitted into columns. This can be done in two ways, by defining a width for each column, or by defining a number of columns.

Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. The example below is done with column-width, the CSS for it is as follows:

-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

The next example is done with column-count, and has the following code:

-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;

these two examples gives you this output:

A feature which isn’t implemented yet is ‘column-space-distribution’, this should describe how to distribute the space between the columns if there’s rest space left.

There are many, many other new features available. You can find most information by going to the W3 website.

There is still more to come….