CodeinWP CodeinWP

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.

Our Partner: As a side note, our friends at LambdaTest can help you if you need to do cross-browser testing on your mobile apps.

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.

27 Responses

  1. albert says:

    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 says:

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

  3. Anand says:

    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 says:

    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 says:

      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 says:

        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. justin caron says:

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

  6. Ricardo says:

    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 says:

    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 says:

    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 says:

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

  11. funkcje.net says:

    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 says:

    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. Jasmine says:

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

  14. SaviourSix says:

    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. Miaga says:

    Grate web

    Interesting post
    GOOD JOB

  16. Robert says:

    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. vanita says:

    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 and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).