A few weeks ago I was trying to find out which browser supported exactly which experimental feature, be it CSS3, HTML5, or something else. I found a couple of useful pages, but nothing quite as detailed as what I was looking for. Since I enjoy graphs, charts, and showing the world how much IE6 really sucks, I went ahead and made what I was looking for.
Thus was born the “When can I use…” page, which shows tables of a variety of current and upcoming web technologies. For all major browsers (Internet Explorer, Firefox, Safari, Opera and Chrome), versions for four different eras (past, present, near and far future).
The page can be customized to show only certain browsers/features/eras, so you have the option to ignore lesser used browsers or for that matter the most used one (it’s a lot of fun to pretend Internet Explorer doesn’t exist). I’ve also included a summary at the bottom of the page, which shows what percentage of the displayed features are supported.
Most features were tested myself, to ensure that the information is accurate. Please let me know if you notice any mistakes. Keep in mind that a “supported” feature may not actually work 100%, as well as the fact that some of the specifications are not set in stone yet, so what may be supported today may not actually work in the future. However, it is likely that in most cases the browser will update its support as the spec changes.
The feature list includes anything I personally feel is of significant use to web designers, but still lacks support in at least one browser version. I am open to adding more features, but only if it’s of significant importance and not just a detailed subset of another feature.
I intend to update the page as new browsers are released, or at the very least once a year. Due to its popularity, the page is updated as soon as new information becomes available.
192 replies on “When can I use…”
@Alison – Thank you!
@Lewis – Thanks! And yes it was, is there anything on the page to indicate otherwise? As shown in the alpha PNG table, IE6 is the only one that doesn’t support it.
@Mike – By all means, go right ahead!
Excellent info!!!!! One concise view of everything. Mind if I cross post this to my Web Standards LinkedIn group?
Hey, great resource — fwiw, I’m pretty sure transparent png support was available in Safari from the very beginning.
Great article! It was nice to know where everything stands. 🙂
@radex – It sure does. Fixed now.
Opera 9.5+ supports text-shadow.
@Oliver – Yeah, I think I may replace Safari 2 for that. Thanks for the reminder.
@Konstantin – It may not be the best example in the world, and being in a pre-alpha state, FF3.2 can be expected to have bugs like that.
@Jeff – Not currently, but good point. I do intend on adding a method that allows that. For now I would suggest using the category links, though you probably already figured that one out.
@Chris – Thanks! You may be right, I believe I have mistaken the localStorage and sessionStorage support in FF for that. I’ll do some investigating and fix that table.
This site is so awesome! However I don’t think that Firefox does HTML5 client-side database storage in any versions yet.
Alexis,
Is there a way to get a permalink to a particular table? I notice you ID each table (div id=”css-media”), but I couldn’t figure out a good way to use that based on your URL frag/query structure.
Jeff
Looks like we are always going to be waiting for that awful IE browser. IE8 and IE9 21% stupid IE
Chrome 2 is already out. I tested @font-face, text-shadow and CSS animation, they work. Video doesn’t. Anyway, in most features Chrome is on a par with Safari because it’s the engine that matters.
@Konstantin: Strange that contenteditable should not work in Fx3.2a, it works fine in Fx3.1b2. I couldn’t find anything in bugzilla.mozilla.org about a contenteditable regression. You should file a bug.
Currently using FF 3.2a1pre, the WYSIWYG editable elements example is *not* working.
The past for Safari is Safari3.1 or Safari 3.0 — Everything Safari3.2 supports was supported in 3.1.
@Alex
Thanks! And you’re right, has now been fixed. Must’ve just lumped that one together with those other webkit features.
@Vsync
If it makes you feel better, the tables largely consist of features for standards still in development, IE8 does okay with many features not mentioned in the list. Of course the lack of support for older web technologies like XHTML, SVG, etc. is inexcusable, and I certainly know how you feel.
This is so awesome.. but makes me sad about the poor poor condition the web is at present times. not to mention me want to go and kill every IE user, just so i won’t have to bother with that browser ever again.
Fantastic work.
One note: iPhone has CSS 3D transforms but it has not landed in either webkit proper or Safari or Chrome.
@Rijk – Thanks for the info! I’ll make the necessary changes. Surprised to hear the Video features aren’t expected to make it in O10, since they seem to work pretty well and Firefox will be releasing them in FF 3.1 (and webkit has support now, albeit without native ogg theora support).
And yes, IE6 is the obvious sore thumb here, but that’s why there’s the checkboxes at the top. You can turn off the “Past” time period, turn off Internet Explorer alltogether or enable the alternatives, and the conclusion info will change automatically.
I’d also be happy to add significant features supported by IE, but lacking support elsewhere (not including MS proprietary stuff of course). I just haven’t really found any. Contenteditable is a possibility, but is it really that important to designers?
You should move Opera 10.0 to the ‘Near future’ row in your tables, it will surely not be delayed all the way into 2010 – but then remove the Video features from the lab builds to a later 10+ version for ‘Future’.
You seem to be really strict about saying ‘not ready’ for everything because you apparently need IE6 compatability… makes the list rather fatalist 🙂
You’re right, thanks Jeff! Fixed now.
I think the ASV plug-in fooled me when I tested that…
As twittered, Safari didn’t have SVG support in 2.0, only 3.0.