Categories
Web development

When can I use…

Preview of the 'When can I use' page

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…”

thanks, alexis. i’ve been hoping for a site like this for some time, and you’ve done it not only well, but beautifully too. i was directed here from Christopher Blizzard’s blog. Thanks again.

This is an oustanding resource. Alexis – I really appreciate your efforts here so thank you very much.

Thanks Lars! I’ve updated the Inline SVG in HTML5 feature with your link and note. Currently I’m still trying to decide what to do with MathML in HTML. Unlike SVG, which can be useful to probably all web developers, MathML support is only useful to a very small subset. Therefore I’m not sure if it’s worth adding as its own entry.

As for the rest of your suggestions:
– WOFF: What additional contribution do you have in mind?
– offline/online detection: Falls under “Offline web applications”
– calc(): Is this supported by a browser of any kind yet? If so, yes, would be great to have.
– ECMAScript: Yeah, I’ve been trying to decide whether or not to add this…probably should.

– ARIA: Great link, thanks! Will update accordingly.
– Experimental/real support: As long as the developer can accomplish the same effect, I don’t think the difference really matters, assuming the implementations are close enough. For gradients you may be right, I should probably change that. I wouldn’t call Firefox’s implementation there the real deal though, it’s still experimental and the spec can change.
– HTML5 forms: If you read the FAQ, you’ll see that “supported” doesn’t mean 100% supported, just a great deal. See also comment #1024. I’ll consider splitting it up though, that would probably make sense.

Sorry about the the spambot issue, I’ll look into that. Might also want to blame your browser, I would think it should keep the text in there (Opera and Chrome seem to).

Thanks so much for the suggestions!

By Post Author

Thank you for providing this resource. I think it is the most usable one on the net right now. But nothing is perfect and I have a few suggestions for how it can be improved:

ARIA support in Chrome and safari is not complete but spotty.

There is no distinction between experimental support and the real deal. In some cases the difference will be quite drastic (think CSS gradients where Webkit’s original syntax has been completely changed by the CSS WG). How about adding “experimental” as yellow?

HTML5 forms is not completely implemented by any browser. Opera comes very close, but still no cigar. Webkit and Mozilla are making rapid progress right now, though. Opera should be listed as partial and the closeness perhaps explained in a note. Another path would be to split up HTML5 forms into several categories: DOM API, Widgets, contraints (= will not submit invalid data).

BTW, I forgot the spambot detection question and when I used the back-button all my text was gone. That was not cool! Way too draconian.

Suggested updates (Hope this works without the PRE-tag):

// Addition
'mathmlinhtml':{
'title': 'Inline MathML in HTML5',
'description': 'Method of using MathML tags directly in HTML documents',
'spec': 'http://dev.w3.org/html5/spec/the-canvas-element.html#mathml',
'status': 'wd',
'links': [
{title:'Mozilla Hacks blog post',url:'http://hacks.mozilla.org/2010/05/firefox-4-the-html5-parser-inline-svg-speed-and-more/comment-page-1/', date:'2009-05-11'},
{title:'Demo page', url:'http://hsivonen.iki.fi/test/moz/html5-hacks-demo.html', date:'2010-05-11'}
],
'categories': ['Other', 'HTML5'],
'stats':{
'trident': {6:'n',7:'n',8:'n',9:'y'},
'gecko': {2:'n',3:'n',3.5:'n',3.6:'p',4:'y'},
'webkit_saf':{3.1:'n',3.2:'n',4:'n','4x':'u'},
'webkit_chr':{.2:'n',1:'n','1x':'n',2:'n',3:'n',4:'n',5:'u'},
'presto': {9:'n',9.6:'n',10.1:'n',10.5:'n','10x':'u'}
},
'notes': 'Currently only works in Firefox 3.6 by enabling the HTML5 parser in about:config (not recommended)'
},

// A few more notes
'svg-html5':{
'title': 'Inline SVG in HTML5',
'description': 'Method of using SVG tags directly in HTML documents',
'spec': 'http://dev.w3.org/html5/spec/the-canvas-element.html#svg-0',
'status': 'wd',
'links': [
{title:'Mozilla Hacks blog post',url:'http://hacks.mozilla.org/2010/05/firefox-4-the-html5-parser-inline-svg-speed-and-more/comment-page-1/', date:'2009-05-11'},
// Added link
{title:'Demo of multi-browser support using the SVGWeb library',url:'http://codinginparadise.org/projects/svgweb/samples/javascript-samples/svg_inline.html?svg.render.forceflash=false'},
{title:'Test suite', url:'http://samples.msdn.microsoft.com/ietestcenter/html5/svghtml_harness.htm?url=SVG_HTML_Elements_001', date:'2010-05-07'}
],
'categories': ['SVG', 'HTML5'],
'stats':{
'trident': {6:'p',7:'p',8:'p',9:'y'},
'gecko': {2:'p',3:'p',3.5:'p',3.6:'a',4:'y'},
'webkit_saf':{3.1:'p',3.2:'p',4:'p','4x':'u'},
'webkit_chr':{.2:'p',1:'p','1x':'p',2:'p',3:'p',4:'p',5:'u'},
'presto': {9:'p',9.6:'p',10.1:'p',10.5:'p','10x':'u'}
},
'notes': 'Currently only works in Firefox 3.6 by enabling the HTML5 parser in about:config (not recommended)'
},

Would you like me to contribute data for WOFF (it deserves even more exposure than SVG-fonts), offline/online detection, calc(), ECMAScript 5 and 6 features (ECMAScript is not in this chart at all right now…),

The Gecko HTML5 parser is now enabled by default, which means that “Inline SVG in HTML5” is a full green for Firefox. Now there’s just some HTML5 form features left before Firefox has 100% HTML5 support in the “When can I use…” charts 🙂

@Brian – Hm, will look into it. Thanks!

@Magne – Looking at http://www.miketaylr.com/code/input-type-attr.html I would have to say that Opera supports “almost everything” where others seem to have partial support. I do agree it’s hard to decide where to set the threshold.

However, the SMIL support in FF sounds good, so I’ve set that to “Supported”. Will review again once 3.7 is released and codedread updates his SVG support chart. Thanks!

By Post Author

Looking at “HTML5 form features”, I see that Opera, for example, has the full support ranking despite not supporting all of the types. This is not a compliant of that, instead, I think it’s correct if they almost support everything. That is, why I am asking you to also set a full green status on Firefox 3.7’s SVG Animation (SMIL) as two patches are soon to land which will give support for 4 out of the total 5 SMIL parts. The last unsupported part is called “animateColor” which is basically just duplicating current functionality with a few restrictions. I think the support is enough to have a full green status. Thanks!

You’ve marked Web Workers as supported in a few browsers, yet FF and Safari have only implemented Worker, not SharedWorker. Perhaps set up a separate section for SharedWorker?

@Mike Then IE8 is doing it wrong. Until the module reach the Candidate Recommendation status, the prefix must be kept.

On another note, I think you could remove the supposed support for SVG Fonts in Firefox 3.7, as there isn’t a patch, nor even a discussion about it right now. But, also, I think you should add the “partial/experimental” status for Firefox 3.7 when it comes to “HTML5 form features” as support for many of these are due to be checked in very soon (see https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms).

Box-sizing does not work “as is” yet in FFox 3.6, Safari, Chrome. You still need to use “-moz” or “-webkit.” It does work as is in IE8 though.

@Peter

1) Yes, you’re right. I’ve updated accordingly. Thanks!

2) WebSockets was included, but at the time I added it it was only an “Editor’s Draft”, which would put it as “unofficial” (hidden by default). Have changed it now to “Working Draft”. Thanks!

By Post Author

Hi Alexis,
Thanks for this most excellent resource!
I point this page out to all the people that attend my HTML5 training course. Great stuff.
2 questions:
1) The Web GL support does not look right for Chrome 4.0. AFAIK it is only in nightly builds. Same for Opera (I don’t think it ships in 10.5) Can you verify that?
2) I was surprised not to find WebSocket covered. Current coverage is Chrome 4+, Nightly builds of WebKit, Planned in FF3.7 and Opera (version TBD).
Regards,

Nice job !
But I notice some wrong support value :

– Audio et Video are not supported by Safari (at least on Windows version).
– Drag ‘n Drop is supported by all except Opera.
– Offline application is not supported by Chrome.

I made demonstration and support tests on http://w3c.html5.free.fr

Comments are closed.