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 thedirectionproperty. - As pointed out by Ricardo in the comments, the
colorproperty 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 disqualifycolorfrom 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.
- 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.
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-variantin the first list, which is not bug-free, so I moved that one to the second list, too.Good catch, thanks.
background-color is listed twice (3rd and 5th) in the second list.
ugh… thanks, fixed.
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.
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.
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:blockanddisplay:inlinework 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).
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.
good article, there’s so many browsers nowadays that you need to make sure they are all compatible =)
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.
Thanks for the post… Interesting read… :) Cheers!~
Thanks Louis. It is a handy little list you have here….you have earned my bookmark :) well done!
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!
thanks for the post, and post necesitava to know the Cross-Browser CSS Properties
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 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.
This is nice… and will be a very helpful checklist when I use CSS properties next time. Thanks for the sharing.
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.
Grate web
Interesting post
GOOD JOB
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
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?