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…”
Wow this articel was amazing. Thanks a lot!
I know it’s impractical to add every single mobile browser version, but is there any chance you could at least support the latest versions of Mobile Safari for iPhone (iOS 4) and iPad (iOS 3.2)?
Can I use ?
CSS Namespaces
(Candidate Recommendation)
Could you add an actual test which will show what browser currently used by visitor supporting?
Big thanks. Very much the helpful information!
This is an oustanding resource. Alexis – I really appreciate your efforts here so thank you very much.
details and summary html5 element are missing
very usefull page. Thanks!
Please include HTML5 classList
Firefox 3.6 has support, Webkit ist planing to support:
https://developer.mozilla.org/en/DOM/element.classList
https://bugs.webkit.org/show_bug.cgi?id=20709
Oh, and your note about Safari only supporting CSS3 3D Transforms on Mac and iPhone, is now incorrect. Support has been added for Windows.
Work on implementing CSS3 3D Transforms in Firefox is being done (see https://bugzilla.mozilla.org/show_bug.cgi?id=505115) and it seems likely that it will make it in to Firefox 4.0.
Ah. Gotcha. Well, that does indeed become more challenging, though I understand how it would be useful. For now I would direct you to PPK’s mobile research and WebKit comparison if you’re not already familiar with it…while not all WCIU data is there, it may be of some use to you.
In the future I may delve further into this, perhaps by letting visitors submit data and limiting the tables to the top most popular browsers. We’ll see. Thanks for the suggestion anyway.
Yes and know. Is certainly very cool, but clearly my request was vague and unclear.
What I was aiming at was a whencaniuse for mobile browsers rather than desktop browsers. I.e. comparing iphone safari, android webview, opera mini, fennec, IE for Windows Mobile, etc.
As a multi-platform developer, and with mobile devices forever becomig more common and thus more important for web development, I am finding it very hard to find a single clear source of web technology features that are supported by these browsers.
Your site is above and beyond the best resource for such comparisons on a desktop browser engine level, but doesn’t cover mobile browsers.
All this said, I appreciate that the mobile browser arena is chock full of variants of the same engine where features have been added or removed for various reasons, so it might make for a much more difficult list of features to ascertain and maintain.
Richard – Being considered, thanks for the suggestion.
Pat – Not sure if just that property is worth adding by itself, but will think about it.
Fraser – Great idea! Instead of creating a separate site, I’ve just set up some stylesheet rules for mobile devices. Does that meet your mobile needs?
Please please do a mobile edition of caniuse.com
m.caniuse.com 😉
F
When will you add information for CSS3 opacity property? Thanks
Where is CSS3 Ruby elements in de listing.
That has been a Candidate recommendation specification for a long while.
HI Alexis,
Great tool, congratulations!
You know what would be cool? To mashup this with current browser market share info from
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
or
http://www.w3schools.com/browsers/browsers_stats.asp
So you could give some additional stat for the “Present” data in each item, that would say something like “Currently supported by % of the people’s browsers”.
Contact me if I didn’t explain myself.
Cheers,
Juan Salcedo
You should include browser specific methods to accomplish the equivalent task. For example, as much as I hate IE it has supported @font-face since 1999 via EOT, text and box shadows, RGBA (http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/) and many other functions through the CSS filter property for quite some time as well.
@Mike Plate: It is in the list, if you check the Unofficial/Note box at the top. Since it was removed from the CSS3 spec it can no longer be considered a Working Draft (or have any other status). It will probably make it into the spec again, though, in some other section.
Thanks for a great reference page! I’m missing box-shadow though. Shouldn’t it be in the list?