Introduction to CSS3

Tuesday, November 13, 2012

CSS is short for 'Cascading Style Sheets'. CSS is a mark-up language for giving style to elements within a web page, or pages. CSS3 represents the latest version of style sheet mark-up language. While CSS brings a lot of new enhancements to the CSS standard, as of this writing, it is important to note that it is still not yet fully supported across the current set of popular browsers used by most users. While you can incorporate CSS3 into your projects, it is recommended that you take the necessary steps to ensure there is the appropriate fallback mark-up for the browsers that have not yet supported the styles you are trying to apply.

Browser Support

While not all of the browsers support all of the CSS3 properties, much of what these browsers support is done so using vendor prefixes. Until all major browsers support the native CSS3 mark-up, we can continue to use the vendor prefixes to support the newer styles offered by CSS3.

-ms-Supported by Internet Explorer
-moz-Supported by Firefox
-o-Supported by Opera
-webkit-Supported by Google Chrome
-webkit-Supported by Safari

In general, to use a vendor prefix CSS style, you create the style in your style sheet, then define the vendor prefixes followed by the CSS3 property. This ensures that browsers that do not natively support the CSS3 property will apply the vendor prefix. For example, if you want to add a CSS3 transition to a div element on your page, you would use the transition property with the prefixes listed first.

div {
-webkit-transition: height 3s;
-moz-transition: height 3s;
-ms-transition: height 3s;
-o-transition: height 3s;
transition: height 3s;

When you use browser prefixes with the standard prefix listed last, you are ensuring that browsers that must use the vendor prefixes will use them and ignore the properties they don’t understand. Browsers that can support the CSS3 styles will implement them because they are listed last in your style sheet. Keep in mind that the use of vendor prefixes is temporary. As new browser versions improve their support for CSS3, you will be able to remove the vendor prefixes. For example, the current set of browsers now have support for rounded corners where a few years ago, it required several likes of vendor prefix markup for browsers to be able to render these elements in that fashion.

CSS3 Modules

One of the biggest changes that is planned for CSS3 is the introduction of modules. The use of modules allows the specification to be completed and approved much more quickly. This is because segments of the specification are completed and approved in chunks. This will also allow browser vendors to support sections of the specification while allowing them to include support for those modules that make apply to them. For example, a text reader would not necessarily need to include the same modules that a traditional desktop web browser would require.

In the upcoming articles in this series, we will dive much deeper into the specific new styles and features that CSS3 offers web developers.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Responsive Web Design with HTML5 and CSS3 HTML CSS and JavaScript The Book of CSS3