List of Cross-Browser CSS Properties

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.

color

direction

font-family

font-size

font-style

font-weight

list-style-position

table-layout

text-indent

word-wrap

* 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 direction property.

* 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.

background

background-attachment

background-color

background-image

background-repeat

background-position

border

border-collapse

border-color

border-style

border-width

clear

cursor

display

float

font

font-variant

height

left

right

bottom

top

letter-spacing

line-height

list-style

list-style-image

list-style-type

margin

overflow

padding

page-break-after

page-break-before

position

text-align

text-decoration

text-transform

vertical-align

visibility

white-space

width

word-spacing

z-index

Credit

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.

The properties shown in these two lists are those that have full cross-browser support (with no bugs) in all browsers named at the beginning (first list); and those that have full cross-browser support with bugs or partial inconsistencies (second list).

So the list doesn’t include every property, only those that the different browser engines have taken into account.

Regarding display: That property also has values like “inline-table” and “table”, which not every browser supports.

Regarding clip: I almost included that in the list, but IE’s support of it is technically speaking, proprietary, so I don’t consider that valid support. But I guess it could be included in some people’s minds, I just chose not to.

Actually, looking closer at that list from the W3 website, many of the ‘missing’ properties seem to be ones related to accessibility (cue-before, speak-punctuation, etc.). SitePoint’s reference doesn’t mention any of those, but I wonder what their support is like in the different browsers.

My guess is those properties are specific to screen readers, so they would be irrelevant to a list like this.

Further on the accessibility point: You’ll notice in that chart on W3 that each property is placed in a “Media Group” (aural, visual, etc). Some that I’m missing (and that SitePoint is missing) are “aural”.

Also, keep in mind that I’m not considering “padding-left”. “padding-right”, etc, as different properties, I’m just using “padding”. Same with margins, border, etc. so it does seem that many are missing, but they’re really not (at least none that I can see).

Yes I think you’re right. It just seemed that your list was short, and the W3 list sooooo long that you must be missing some key properties.

Regarding “display” – I only mentioned that as a special case, since inline/block values (and maybe others like list-item) are so universally supported, it seems a little weird to put display in the “bugs” category.

Although that crosses over into a completely different area, CSS2.1 properties that now support CSS3 values. I didn’t really take that into consideration. Technically, since “color” is a CSS2.1-defined property, it does work exactly the same in every browser.

Nonetheless, I’ll add a note to the article, because I think this is a legitimate concern. Thanks.

One answer I can think of regarding how to improve this terribly tiny list is legal. Get the best implementation of all of these properties and legally enforce other browsers to support it.

There is evidence for this approach being the only way to get some sort of acceptable level of software compatibility: the EU forcing MS to be a good citizen with moves such as the browser ballot and opening of Outlook/Exchange protocols.

15 years of insanity is long enough. For worse or better, we have these massive trading blocks now such as NAFTA and the EU. Let’s use them! Refusing to design a browser that is compatible with others on the market is a downright impediment to free trade. Let’s legislate against it!

What is the purpose of this list? Instead of printing out 80% CSS properties as “buggy” you should wrote what are the problems with them and in what particular browsers they are occurring.. This article is pointless.

I don’t think a link to the properties is necessary. That reference is very easy to use, so nothing I link to here is going to make that big of a difference.

Also, I wouldn’t necessarily call Microsoft arrogant but they certainly have dropped the ball in a lot of areas in CSS rendering. But don’t forget that there are dozens of bugs (although not as major) in other browsers, too.

Unfortunately short list – that’s how it goes. Z-Index is the one that drives me batty. Great tool when it works 100%.

As with pd – making it legal etc and the whole W3C compliance thing. I have been using Facebook like button and Google+1. Had to do a fair bit of tweaking to make them W3C compliant with my site. My point is unless the big players start embracing standards we’re going to continue with the mess we have today.

To OP I stumbled on this post when looking for %100 cross browser compliancy and very happy to have found it.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.