The principal transformation that is presently planned with CSS level 3 is to introduce modules. The benefit offered by modules is that it allows the specification to be finished and agreed upon in a quick fashion, because segments are finished and agreed upon in portions. This also enables browser and user-agent producers to support sections of the specification but keep their code swell up to a minimum by only supporting those modules that make logic. For instance, a text reader wouldn’t need to contain modules that only characterize how an element is going to demonstrate visually. But even if it only included the aural modules, it would still be a standards-compliant CSS 3 tool.

Opacity has been one of the most expected features. Several times, web designers have been weighed down with hack after hack for just the right look using the opacity declaration. The unique opacity declaration would relate opacity to an element and all of its children. So let’s say you have a div with text in it that has an opacity declaration applied to it. Everything in that div would be transparent, along with the text.

CSS3 deals with all this with a new declaration. RGBA. This declaration enables you to lay down opacity by changing the alpha value. So if you have a div with text inside and set the alpha value to fully transparent on the “background-color:”, only the background will be affected, leaving the text untouched. e.g.

background-color:
rgba(0,0,255,0.5);

Selectors in CSS 3 are very interesting. They will allow the designer/developer to select on much more specific levels of the document. One of the nice things about this module is that many browsers are already starting to support the advanced CSS 3 selectors, so you can start trying them out now. For example, some new selectors are: matching on attributes and attribute values, including partial matches, structural pseudo-classes, such as the nth-child, a checked pseudo-class to style any element that is checked such as radio or checkbox elements and a target pseudo-class to style only elements that are targeted in the URL.

CSS3 allows you to have multiple backgrounds. You can have an image in the center, one in the left and one in the right. This will open a whole new door for designers. There’s going to be a lot of flexibility when this is available. e.g.

background:
url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px
no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

Text effects and layouts make changes to the hyphenation, whitespace, and justification of text in documents. CSS 3 will now support more options in paged media, such as running headers and footers and page numbers. Plus there will be advanced properties for printing generated content including properties for footnotes and cross-references. CSS will now support the ability to add small annotations on top or next to words, most often used in Chinese and Japanese. They are generally used to give the pronunciation or meaning of difficult ideograms.

Right now, the multi-column layout working draft provides properties to allow designers to display their content in multiple columns with definitions like the column-gap, column-count, and column-width.

Tags: Interesting CSS3 Features