List of Cross-Browser CSS Properties

Cross-Browser CSS Properties ListAfter 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.

  1. color
  2. direction
  3. font-family
  4. font-size
  5. font-style
  6. font-weight
  7. list-style-position
  8. table-layout
  9. text-indent
  10. 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.

  1. background
  2. background-attachment
  3. background-color
  4. background-image
  5. background-repeat
  6. background-position
  7. border
  8. border-collapse
  9. border-color
  10. border-style
  11. border-width
  12. clear
  13. cursor
  14. display
  15. float
  16. font
  17. font-variant
  18. height
  19. left
  20. right
  21. bottom
  22. top
  23. letter-spacing
  24. line-height
  25. list-style
  26. list-style-image
  27. list-style-type
  28. margin
  29. overflow
  30. padding
  31. page-break-after
  32. page-break-before
  33. position
  34. text-align
  35. text-decoration
  36. text-transform
  37. vertical-align
  38. visibility
  39. white-space
  40. width
  41. word-spacing
  42. 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.

27 Responses

  1. background-color:transparent doesn’t work in ie6. i noticed it was in both lists, so just putting that out there.

    • You’re right. Looks like I accidentally left it in the wrong list when I was moving things around alphabetizing them.

      I also had font-variant in the first list, which is not bug-free, so I moved that one to the second list, too.

      Good catch, thanks.

  2. M. Hostile:

    background-color is listed twice (3rd and 5th) in the second list.

  3. Anand:

    This post is very useful.

    Do you know how significantly this changes if you take IE out of the picture – i.e, what is the list of css properties that work across chrome, safari, firefox?

    Thanks

    • Good question. There are still some bugs in the other browser, but not as much as IE. I think the original list of 10 would be much bigger, maybe 20 or more. Not sure, though.

  4. Scott:

    Aren’t you missing some properties? The W3 list appears to be quite long: http://www.w3.org/TR/CSS2/propidx.html

    For example, the “clip” property is fully supported in everything except IE, where you need to change the syntax slightly.

    • Scott:

      Also it would be useful to expand some of those properties such as “display” to show which values are problematic. Unless I’m mistaken, display:block and display:inline work perfectly cross-browser.

    • Scott,

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

      • Scott:

        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.

  5. good article, there’s so many browsers nowadays that you need to make sure they are all compatible =)

  6. Ricardo:

    color can not be used cross-browser with *any* value. IEs don’t support rgb/rgba, others don’t support hsl/hsla…

    • Ah… good point.

      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.

  7. C.F. Action:

    Thanks for the post… Interesting read… :) Cheers!~

  8. Thanks Louis. It is a handy little list you have here….you have earned my bookmark :) well done!

  9. pd:

    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!

  10. FP:

    thanks for the post, and post necesitava to know the Cross-Browser CSS Properties

  11. funkcje.net:

    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.

  12. pbb:

    I can sympathise with funkcje’s comment above, but he is probably being unfair.

    Louis provides a succinct top-level summary of the situation detailed in the Sitepoint data on CSS browser compatibility; he doesn’t aim to reproduce all of that detail.

    Perhaps it would be helpful to link directly to the relevant Sitepoint page for each of his CSS properties, but even that data seems not to be completely up to date!

    I think the key truism that this post highlights is just how arrogantly Microsoft treats both the consumers and the industry that keep it alive.

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

  13. This is nice… and will be a very helpful checklist when I use CSS properties next time. Thanks for the sharing.

  14. Thanks for sharing. Im the coder in my company, and my designer partner never understands why I get so frustrated. I have to keep reminding him that not every one uses safari, ha.

  15. Grate web

    Interesting post
    GOOD JOB

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

    Cheers

  17. Y different browsers are take different properties of css?
    what is the reason for it ….
    i want to know it clearly…Can any one help me?

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.