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.
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.
-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.
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.
Recommended Books & Training Resources