Introduction to CSS3

CSS (Cascading Style Sheets) is a language which describes how a document written in a markup language looks and how it is formatted. Giving layout, colors and fonts to a document and its elements can change how your website looks and how people think about it. CSS has evolved over time from CSS1 to CSS2 (which is the current standard) to CSS3 (which is still in development). Modern browser support CSS1 and CSS2 but for CSS3 the support is still limited.

Layout Engine Support

There are a number of Layout Engines available, each rendering the marked up content and formatting information in its own way. With CSS standardized the result should be predictable. Unfortunately in the past this has not always been the case. Often Internet Explorer has behaved differently then expected which didn’t make the life of a web designer easy. Being that CSS3 is still in development are the layout engines limited in their support. Leading in support is the Webkit Engine, used by Google Chrome, Safari and the Gecko Webkit Engine for Mozilla Firefox. Some of the CSS3 properties which are still in experimental phase are lead by a prefix:

• Trident (Microsoft Internet Explorer) : -ms-
• Gecko (Google Chrome & Safari) : -webkit-
• WebKit (Mozilla Firefox): -moz-

Over time these prefixes will diminish when they are no longer in experimental phase. It could still take years before all browser fully support CSS3, if they ever do. But in most cases you will only need the basic CSS3 selectors and properties to create something of your desire.

Why use CSS3

It is not really for the high demand of innovation that css3 was developed but the possibilities that css3 could provide for us. Before css3 and still are web designer capable of creating CSS to meet the required result using images and extra markup. With CSS3 they can create the same effects as layout-images (example: rounded corners and shadows) and extra markup (using selectors) with less effort and more dynamics. This does not only make it more easy to apply changes but it also decreases the size of a web page (with limited images) which might not be a problem for a computer but with the increase of mobile Internet usage it might be a factor.