Browser support for CSS versions

Cascading Style Sheets, often referred to as CSS, revolutionized web design as we know it, increasing efficiency and helping mature the web to what we know it as today.

Although CSS has become a standard tool utilized by most web designers following modern design techniques and standards, implementation of CSS from browser to browser is not always as compatible as one would assume. This is further complicated by browsers implementing different versions of the CSS standard, older browsers with CSS 1, with newer browsers supporting version 2 and 2.1, including any older versions. The newest version of CSS is CSS 3, and browser are beginning to support it as well.

Below is a list of popular browsers and their known CSS abilities, including potential problems.

Internet Explorer 6

IE 6 was the first version of internet explorer to have a nearly complete implementation of CSS up to version 2 and partial 2.1 support. Major problems still exist though, most notably with box model support, which is how CSS defines properties of a box such as height, width, padding, and margins. It is estimated that about 10% of the web still uses this browser, so it's best to design for standards compliant browsers first, and then use selectors to make sure things are rendered correctly in IE 6.

- Internet Explorer 7

This version of IE supports CSS 2.1 much better than older versions, making this browser standards compliant up to 2.1. Advanced CSS 3 support is really limited and inconsistent in this browser

Internet Explorer 8 and 9

Internet Explorer 8 supports CSS 2.1 and some features of CSS 3, although not many compared to other browsers. Internet Explorer 9, although still in beta, supports much more of the CSS 3 standard than previous versions, although support is not as complete as competing browsers.

Firefox 1 and 2

Firefox is one of the best in terms of standards compliance, fully supporting CSS up to version 2.1 better than most browsers of the same generation.

Firefox 3 and 4

Firefox 3 brought huge improvements in the form of support for CSS 3, although it still lags behind others such as Safari and Chrome, Firefox 3.5 lacking support for CSS 3D transformation, CSS gradients, animations, transitions, among others. Firefox 4 brings even more improvements in the form of continued and expanded CSS 3 support, including columns, 2D transformations, opacity, and others.

-Chrome

Chrome has been standards compliant with CSS up to 2.1 since its first version. Support for CSS 3 continues to grow with every subsequent release, now supporting most CSS 3 features except @font-face, making Chrome one of the best in terms of CSS support.

Safari 1, 2 and 3

Support up to CSS 2.1 in Safari is similarly well done when compared to Firefox. Safari 3 adds some support for CSS 3.

Safari 4 and 5

Both versions of Safari add continued support for CSS 3 as the standard grows, including Safari 5 adding exciting features such as CSS 3D transform, allowing three dimensional positioning of elements. Safari 4 and 5 are provide the best CSS 3 support when compared to other browsers.

Opera 9

Provides great standards compliant support for CSS up to version 2.1, although support for CSS 3 is not as great.

Opera 10 and 11

These versions of Opera bring greater support for CSS 3, version 11 bringing Opera up to speed with other modern browsers in terms of CSS 3 support.