Imagination is our power

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.

  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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: