After I created a couple of handy charts that give details on CSS3 property and selector support in the upcoming IE9, I thought to myself: “This is interesting to read, but isn’t very practical.”
I also know that many visits to my site occur via Google searches for stuff like “cross-browser CSS” and similar phrases. So I decided to put together a comprehensive list of CSS properties that are supported in all browsers.
The list is divided into two sections: (1) Properties that are supported by all in-use browsers, with no bugs; and (2) properties that are supported by all in-use browsers, with some bugs in certain browsers.
For the purposes of this article (and every other article I’ve written), when I refer to “all browsers”, I’m talking about IE6+, Firefox 3.0+, Chrome 2+, Safari 3.1+, and Opera 9.2+. Also, this list does not take into consideration CSS selectors, at-rules, and anything else that would fall outside the realm of “CSS properties”.
Cross-Browser CSS Properties (No Bugs!)
This short list of
12 10 CSS properties displays the only CSS properties that you can use in any situation, in any context, using any value*, with no problems in any browser.
* Unfortunately, IE6 and IE7 don’t support the value “inherit” for any of these properties except
direction, so if you want to be really technical about this, the only fully cross-browser CSS property would be the
* As pointed out by Ricardo in the comments, the
color property can now accept RGBA and HSLA values, which are not supported by all browsers. So if you take that as non-compliance, then that would also disqualify
color from this first list.
Cross-Browser CSS Properties (With Bugs)
Below you’ll find a much longer list of CSS properties that are supported by all browsers. In most cases, these properties are pretty safe to use, with a few obscure bugs. In other cases, there are major bugs and omissions of value support (guess which browsers are the biggest culprits?). So although these properties are available for use in every browser, you might not get the same results in all circumstances.
All the info to compile these lists was take from SitePoint’s CSS Reference, so if you have a problem with anything I’ve listed here as “cross-browser” then take it up with them! :)
I think I echo the thoughts of all CSS developers when I say: After all these years, why isn’t that first list longer than
12 10 measly properties?
As usual, let me know if anything’s missing.
UPDATE: I inadvertently had
background-color in both lists, and had
font-variant in the fully cross-browser list. Now it’s only ten fully cross-browser properties.
Also, I should really include .
list-style-position because it is bug-free in all browsers, but I think that’s kind of silly since the other list-oriented properties are buggy, and you would never use it apart from them
ANOTHER UPDATE: I was wrong,
list-style-position can be used on its own to determine the position of the list marker. I had assumed it could only be used if you specify your own image for the list marker. I further realized that
font shouldn’t be in the bug-free list since
font-variant is in the “buggy” list. So the list is still 10 properties, but somewhat different from the original list.