What You Must Know About CSS 3 And Browser Support

This article relays relevant information on CSS 3 and browser support, minding differences in rendering among widely used browsers.

It is important to know how browsers support the CSS3 coding language so as to facilitate ease in coding projects. It is a tiring scenario to create so much and end up not being able to render it. Developers dream of creating websites without taking into consideration differences browsers interplay in interpreting a set of instructions. Hence the usage of techniques such as polyfills and progressive enrichment.

CSS 3 And Browser Support: Earlier Versions Of Internet Explorer

CSS 3 may encounter problems with older versions of the browser, Internet Explorer. These are versions 6, 7, and 8. In summary, the following features and properties are supported: writing-mode, @font-face, word-wrap, linear gradients through the use of a non-standard filter, and some transforms though utilization of proprietary filter (also produce values to render functions).

Although, there are still ways that can be conjured to get IE versions 6, 7, and 8 to support other features of CSS3, they come with a price. These flexible means can lead to issues concerning optimum performance and maintenance, so it is important to exercise a degree of precaution and determine whether the whole of the site’s intention is not compromised.

CSS 3 And Browser Support: Modern Browsers

As for the usual browsers that are widely used today such as Internet Explorer 9, Firefox 3.5, Opera 10, Safari 4, Chrome and all its later versions, the following CSS3 features are supported: box-sizing, border-radius, box-shadow, RGBA Colors, HSLA Colors, multiple backgrounds, background-clip, background-origin, background-size, transforms and media queries. Internet Explorer 9 also has a compatible interface for CSS3 pseudo-elements, selectors, and pseudo-classes. The following features are supported by the above-mentioned browsers except Internet Explorer 9: text-shadow, border-image, outline-offset, transitions (supported by Firefox 4+ versions).

Features Supported by Chrome and Safari (WebKit)

Lastly, a small number of CSS 3 aspects have deficient support in Internet Explorer, Firefox, Opera, therefore only WebKit-based browsers will perceive them. WebKit is a software intended to permit browsers to render web pages. It supplies the lay-out interface for Google Chrome and Apple Safari browsers. The CSS3 features afore-mentioned that only WebKit browsers could render are: keyframe animations, text-stroke, text-outline, and box-reflect.

Example of CSS3 code made for different browsers:



transform: rotateX(120deg);

-webkit-transform: rotateX(120deg); /* Safari and Chrome */

-moz-transform: rotateX(120deg); /* Firefox */



Web design concerns the convenience at how the experience translates for the client. It is therefore imperative to know the audience. You must have an extensive knowledge on the different profiles of your clientele, their value drivers and decision process. Make sure you are meeting their expectations as to the type of experience they would want to have with their own respective operating browsers.