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.
Tags: browsers, comparison, CSS, CSS3, HTML 5, tables, web design, Web standards, when can i use
January 7th, 2009 at 12:16 pm
As twittered, Safari didn’t have SVG support in 2.0, only 3.0.
January 7th, 2009 at 1:07 pm
You’re right, thanks Jeff! Fixed now.
I think the ASV plug-in fooled me when I tested that…
January 12th, 2009 at 9:24 pm
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
January 13th, 2009 at 8:40 am
@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?
February 11th, 2009 at 2:21 pm
Fantastic work.
One note: iPhone has CSS 3D transforms but it has not landed in either webkit proper or Safari or Chrome.
February 11th, 2009 at 2:49 pm
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.
February 11th, 2009 at 3:11 pm
@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.
February 11th, 2009 at 3:55 pm
The past for Safari is Safari3.1 or Safari 3.0 — Everything Safari3.2 supports was supported in 3.1.
February 11th, 2009 at 5:28 pm
Currently using FF 3.2a1pre, the WYSIWYG editable elements example is *not* working.
February 11th, 2009 at 8:26 pm
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.
February 12th, 2009 at 4:38 am
Looks like we are always going to be waiting for that awful IE browser. IE8 and IE9 21% stupid IE
February 12th, 2009 at 8:27 am
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
February 12th, 2009 at 8:33 am
This site is so awesome! However I don’t think that Firefox does HTML5 client-side database storage in any versions yet.
February 12th, 2009 at 12:56 pm
@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.
February 12th, 2009 at 1:31 pm
Opera 9.5+ supports text-shadow.
February 12th, 2009 at 2:02 pm
@radex – It sure does. Fixed now.
February 12th, 2009 at 6:28 pm
Great article! It was nice to know where everything stands.
February 13th, 2009 at 10:18 am
Hey, great resource — fwiw, I’m pretty sure transparent png support was available in Safari from the very beginning.
February 13th, 2009 at 10:23 am
Excellent info!!!!! One concise view of everything. Mind if I cross post this to my Web Standards LinkedIn group?
February 13th, 2009 at 11:14 am
@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!
February 14th, 2009 at 1:48 pm
This is very interesting, especially if it’ll stay somewhat up-to-date.
To show my appreciation, here’s a link which i think would fit nicely among your CSS-support resources links: http://www.webdevout.net/browser-support-css
February 16th, 2009 at 7:24 am
Web Forms 2.0 JS solution for IE:
http://dean.edwards.name/weblog/2005/05/wf2-ie/
February 18th, 2009 at 9:55 am
PNG alpha transparency for present IE (7.0) is marked as supported. This is not true. Try to change the opacity (using filter: alpha) for element containing transparent PNG (32-bit) and see what happens: transparent pixels becames black. IMO IE7 only *partially* supports PNG alpha transparency.
February 24th, 2009 at 1:00 pm
Is it intentional that the alternatives (at least js) don’t have an influence on the Summary results ?
If so, why ?
February 24th, 2009 at 2:22 pm
Sorry for the late responses everybody…
@Dan – Thanks, I guess I could add links to some of the tables on that page, assuming that’s what you mean.
@radex – Thanks!
@Jaakko – I certainly see what you mean, but don’t think changing the opacity of a PNG happens enough to say there’s only partial support. I would say that’s more of an issue with the MS filter property.
@David – Good question. I believe it was intentional when I decided to do that, since I felt the summary should really only take into account the browser’s actual capabilities.
February 25th, 2009 at 3:36 am
Another update: Firefox 3.2 nightlies have support for multiple backgrounds.
February 25th, 2009 at 8:31 am
@James
Neat, thanks!
February 25th, 2009 at 2:26 pm
Alexis,
How about VML, HTML+TIME, XHTML+SMIL, XHTML+Voice, Widgets ? (sorry, heard you tweet about other potential technologies to include)
Can you provide info about each alternatives ?
thanks
February 25th, 2009 at 3:31 pm
@David – Thanks for the suggestions! I think I need to make a FAQ or something.
For now I’d like to only include items that meet the following criteria:
Note that I’m open to re-evaluating those criteria. I don’t want to anti-Microsoft, but also I don’t want “never” to be the answer to question to “When can I use”. And if it becomes evident that no other browser is interested in adopting Webkit’s proposals, I’ll remove them too.
February 25th, 2009 at 4:23 pm
I’m sorry. I was just throwing specs out of my head. Ok with the criteria.
I’m not sure for XHTML+TIME : it doesn’t quite replace HTML+TIME, as XHTML doesn’t replace HTML. So it’s the only way to animate HTML declaratively for the moment.
About XHTML+SMIL, do JS alternatives count for #3 ? If so, FakeSmile does currently work in Opera, Safari and Firefox. I mean to the question “can i use XHTML+SMIL?” the answer is “yes if you include a JS hack”.
For #1, ask Jeff Schiller what he thinks.
For #2, well… mentioning the spec on your page will give it more visibility
thanks !
February 28th, 2009 at 6:34 am
PNG Support: Internet Explorer up to and including version 7 don’t include gamma information in PNG files. Solution: remove gamma chunk from PNG files (this way you loose great PNG feature).
March 4th, 2009 at 9:49 am
Ivan, you’re wrong. Gamma information in PNG for me (webdeveloper) is very problematic, because I use pngs in backgrounds, gradients etc.
March 4th, 2009 at 9:53 am
… oops, sory.
… and there’s no gamma information in CSS. In Opera or Firefox it isn’t problem, but in Safari on mac I see ugly transition gradient -> solid color. And I must use tool like pngcrush (on OSX I recommend these tools: http://pornel.net/imageoptim/en http://pornel.net/imagealpha – it helps)
Sorry for my english
March 8th, 2009 at 6:12 am
Opera 9.5+ seems to support the Audio element : http://www.opera.com/docs/specs/opera95/#html
March 9th, 2009 at 8:15 am
Thanks for the change Alexis. Btw, presto 2.1.1 (opera 10) seems to support element (per http://www.opera.com/docs/specs/presto211/#html ) in addition to the object.
cheers
March 9th, 2009 at 8:29 am
@David
Thanks for info! And FYI, I’m still looking into the XHTML+Voice support as well as XHTML+SMIL. Out of curiosity, are you interested in seeing XHTML+SMIL support for any particular reason?
March 9th, 2009 at 9:28 am
Thanks a lot @Alexis.
I just heard you calling for ideas of new technologies you might want to add. First, as the fakesmile author, it’s the very first thing that came to my mind. Second, in my experience, I guess it would be pretty straightforward for implementors to extend svg+smil to the xhtml ns. (Timesheets is a bit trickier though)
(I like css transitions, but not the complicated and incomplete css animations, yuk. but hey i might be biased)
So, I think what xhtml+smil misses the most is advertising
Though, I have mixed feelings about mentioning fakesmile as it could serve as an excuse for not implementing it natively… :-/
March 13th, 2009 at 3:06 pm
Ah, see, would have been helpful to know you’re the Fakesmile author.
I’ve added XHTML+SMIL, but since the status is “W3C Note”, which apparently doesn’t mean much, I’ve put it under “Unofficial / Note”. I may also do the same for XHTML+Voice, which is also only a “Note”. That or change it to just “VoiceXML”, but I think that might be straying too far from regular web design.
March 15th, 2009 at 9:19 pm
Webkit (Safari and Chrome) only has partial support for multiple backgrounds. Try three background images with three different positions.
March 17th, 2009 at 8:27 am
@Josh
Seems to be working fine for me in the tests I tried…could you be more specific about what the CSS looks like when it doesn’t work?
March 18th, 2009 at 11:51 pm
I have since rewritten the code where I ran into this so I don’t really have a test case for you, but here’s all the relevant details I can think of:
It might just be textareas. I had a form script that was creating and appending textareas with DOM methods. If the CSS rule applied to them had three or more background images defined, all of the background images would render (and in the correct stacking order and everything) but lose their positioning. I don’t know if it matters, but it was a single .PNG sprite being used for all of the background images. Also, a “resize: both;” declaration was in the rule.
On another note, I think “inline-block” might be missing form this list.
April 5th, 2009 at 10:48 am
Regarding SVG support, i know of 2 javascript workarounds to get it working in IE (by feeding it VML instead): dojox.gfx and Raphael. AFAIK they’re both limited on the common denominator in functionality, though.
I don’t know if that qualifies as a workaround for you. Just to let you know.
April 5th, 2009 at 11:01 am
Same goes for WebForms2: http://code.google.com/p/webforms2/
April 8th, 2009 at 4:38 am
a. Very useful table with lots of information. Thank you!
b. Suggested improvements.
Lumping together Safari 3.1 as both past and “far past” is misleading. Safari 3.1 was launched only slightly ahead of Firefox 3. Are you really sure that Safari 3.0 is dead?
The heading “When can I use…” is also misleading with the conclusions, since they do not factor in progressive enhancement. I can use e.g. rounded corners today. I just have to accept the fact that MSIE and Opera users don’t see them, but nothing breaks.
Have you considered adding JavaScript 1.6+/EcmaScript version 5 (aka 3.1) features as well?
April 8th, 2009 at 7:58 am
@Dan
Thanks! Those certainly seem worth adding.
@Lars
Firstly, thanks!
Secondly, thanks for the feedback.
Actually, “Far past” was only added when IE8 was released, and I didn’t want to remove IE6 (since we generally still need to support it). It’s not really accurately named, I have to admit. And looking at the latest Hitslink stats, Safari 3.0 is used less than Netscape 6, so it just doesn’t compare to the IE6 share. Same for Firefox 1.5.
The idea is that if you don’t care about how something works in a certain browser, you can simply uncheck it and the conclusion will change appropriately. I guess “When can I use” technically means “When can I use a given feature in a fully supported interoperable way”, but that gets a bit long.
The point you make about progressive enhancement is a good one, however. Maybe I can find a way to specify features that “don’t break” things.
And yes, I’d thought about adding JS/ES features to the list, seems only appropriate. Just haven’t taken the time to investigate them or do any browser testing on them. If you happen to any good resources that would help with this, that would be great. Thanks again!
April 21st, 2009 at 2:47 pm
[...] a big fan of Alexis’ When-Can-I-Use site. I liked it so much that I asked him to let me link directly to when a specific feature will be usable. He obliged. Here is an example [...]
April 21st, 2009 at 3:47 pm
Thanks!
April 21st, 2009 at 4:30 pm
Under XDM, you have Opera 9.6 as fully supporting it, though it does not. Opera 9.6 does not support MessageEvent.origin and instead has MessageEvent.domain, which isn’t a valid HTML5 origin.
It can be partially fixed (though it just assumes the protocol is http:) with this:
if (typeof window.opera != "undefined") { // Opera 9.x MessageEvent.origin fix (only for http:, not https:)if (parseInt(window.opera.version()) == 9)
Event.prototype.__defineGetter__("origin", function(){
return "http://" + this.domain;
});
}
PS. You should add support for <codeblock> or >pre< tags in comments. I have no way to express my code in an easy-to-read manner otherwise.
April 21st, 2009 at 4:32 pm
Error in last comment, I meant
<blockcode>instead of<codeblock>April 22nd, 2009 at 4:26 am
It seems that the note about Opera on the @font-face feature is wrong. Opera doesn’t support .otf fonts, but .ttf is downloaded even if format(“truetype”) is specified.
April 23rd, 2009 at 7:55 am
@Elijah
Hmm…I see what you’re saying, but the basic functionality still largely works, right? As mentioned in the FAQ, there may not be 100% support. If you still feel this lack of support is particularly significant for its usage, let me know. I’ll also be happy to add a resource link about that feature if you can suggest a page that describes any browser shortcomings for XDM.
Also, I’ll see what I can do to allow better code display in comments, thanks!
@Henri
I’ve changed the wording, since you’re right about the format(“truetype”) part. Thanks! However, Opera does appear to support OTF fonts without that declaration. This is mentioned in the changelog and can be tested by removing ‘format(“opentype”)’ on this demo page.
May 3rd, 2009 at 6:30 pm
@Alexis Deveria
MessageEvent.origin is the ONLY way to ensure that you can trust a message. Without it, the feature should be classified as broken. There is no way in Opera 9.6 to know what origin a message truly came from without making a wild guess using MessageEvent.domain.
May 14th, 2009 at 10:31 am
Awesome collection, thanks! I’ve got one comment for “New, stylable HTML5 elements”: It works well with Firefox 2.0 if you serve the document as application/xhtml+xml. See my my blog post about HTML5.
May 14th, 2009 at 5:27 pm
How about adding print CSS limitations to this excellent resource?
Like the page-break-inside property, for example.
May 23rd, 2009 at 6:51 am
Thank you for this wonderful tool !
Is there a way to have more details about the JS solutions ?
I suggest a few more JS solutions for the Canvas Text support : ExCanvas has now the text drawing API : http://explorercanvas.blogspot.com/ and I suggest you a lib that completes the canvas text API for the browsers that don’t have it : http://code.google.com/p/canvas-text/
I don’t know if this solution is acceptable, but I just wanted to let you informed.
May 26th, 2009 at 9:48 am
Thanks, glad you like it!
And certainly, those are good links, I’ll be happy to add them.
July 9th, 2009 at 4:22 pm
Nice work, perfect for web developers, and I’ll certainly look at it in the future
Have you considered adding Geolocation support, which I think only Firefox 3.5+ supports currently?
July 10th, 2009 at 3:02 pm
Apparently, Chrome 2 supports it too.
July 10th, 2009 at 3:33 pm
Thanks for the tip! The feature has now been added.
July 11th, 2009 at 8:33 am
I’m sorry, apparently Chrome 2 does not support it, and I should’ve checked my sources better (including testing it myself). According to this, http://html5demos.com, it is supported by Firefox 3.5 and iPhone (MobileSafari then?) only.
July 11th, 2009 at 8:36 am
But then again, I see you marked it as 2.x. Does that mean you tested it yourself, and it worked on 2.1+, as I’m running 2.0.
July 14th, 2009 at 11:24 am
I think the note
“Far past” exists only for IE6, as it is often the only really old browser people need to support.
can be removed now
July 14th, 2009 at 6:02 pm
I’d love to think so to Fabien, but I think there’s still a lot of people out there who thinks IE6 support is important.
July 15th, 2009 at 1:47 am
Of course, and that’s very sad, but I said that because Firefox 2.0 and Safari 3.1 are in “Far past” too, now.
July 16th, 2009 at 10:36 am
@Fabien – Indeed, I have removed the note. Thanks!
July 19th, 2009 at 3:42 pm
The category link for Summary doesn’t work. All the values are NaN%. I see you started adding permalinks, but they’re broken. Whenever I use the links from a different page, or open in new tab, instead of the table I want, I get “Um…dude.”
This page is awesome.
July 19th, 2009 at 3:45 pm
Actually, I really think you should put the Summary table at the top. That one is particularly awesome.
July 19th, 2009 at 4:58 pm
your table needs a small update: Firefox 3.5 does support (I dont know how much of it tho) Web Storage Features
see this link
July 19th, 2009 at 5:40 pm
oh and it also supports 3d transformation (example)
July 20th, 2009 at 7:35 am
@Darxus – Thanks! Since the summary table varies based on the other tables displayed, it doesn’t actually work by itself. And as much as I like it myself, I don’t want it to be too prominent since the numbers are essentially quite arbitrary. While they provide a general idea of how well browsers are supporting upcoming/new features, I’d hate to see people making specific claims based on those numbers.
Also, the permalinks work for me (aside from the Summary one)…What browser are you using?
July 20th, 2009 at 9:15 am
@Norman – Indeed it does, which is why it appears as supported on this table. However, it does not support any of the database features currently supported in Webkit.
Also the “3D” effects on the page you link to are actually done with just 2D transforms, as the article itself explains.
August 7th, 2009 at 3:56 pm
Sweet, we’re getting CSS transitions in Firefox too soon
https://bugzilla.mozilla.org/show_bug.cgi?id=435441 – Milestone is the Mozilla 2.0 engine (used in Firefox 4.0), but as the patch is already submitted, that might mean that it shows up as early as for Gecko 1.9.2 which is used in Firefox 3.6.
But, I think you can safely mark it as 4.0 and 4.* for Firefox.
August 8th, 2009 at 4:29 pm
The selection on this page is very biased. For instance:
* For CSS 3 it show working drafts even but not candidate recommendations like Ruby and TV profiles.
* Canvas is shown as a separate standard even though it is only a part of an HTML5 working draft
For CSS3 the page should use this list.
http://www.w3.org/Style/CSS/current-work
Not make it a biased list of its own !!!
August 10th, 2009 at 7:50 am
@Magne – Cool, thanks for pointer! Feature support has been noted (and I went ahead and changed 4.0 to 3.6)
@rob – That is correct, it is biased towards the features I have personally noticed web designers/developers show a specific interest in. Canvas is a category of features, and appears on its own due to the amount of interest shown in the technology around the web.
Since I have yet to hear anyone talk about wanting more Ruby support or implementation of the TV profiles (does any browser even support this?), I have not added them.
August 16th, 2009 at 11:19 pm
I’ve maybe wrong but the SVG fonts test work fine for me:
SVG 3.0 under IE8
(XP32 Pro SP3 – IE 8.0.6001.18702)
August 17th, 2009 at 10:54 am
Yeah, I’m pretty sure you’re mistaken…you may have the Adobe SVG viewer plug-in installed, which would might be rendering it for you in IE8.
September 16th, 2009 at 9:07 am
Chrome 3 was just released, and it supports both <audio> and <video>. For some reason, you have it listed as not supporting <audio>. You might want to update that!
Thanks for the great resource. It’s pretty helpful to be able to get a high-level overview of the progress on all of this stuff.
September 29th, 2009 at 8:16 pm
There is a an alternate JS solution for border-radius, called CurvyCorners, which works in IE and, they say, in Opera.
November 8th, 2009 at 6:37 am
Have you thought about adding SVG clip paths and paint servers to your table?
November 8th, 2009 at 8:43 am
Turns out that CSS transitions won’t make it into Firefox 3.6, but instead in 3.7.
Also, 3.6 is quite locked from getting new features now, I think you can safely mark everything that is currently grey as red. Seeing that HTML5 form features is also grey, it seems that support for the “multiple” attribute will come with 3.6. Maybe not enough to justify the partial status?
And last, I thought the list page itself had stopped being updated, as I was often looking at the RSS feed and saw no new updates. It would be nice if you kept that up to date.
Thanks!
November 8th, 2009 at 4:18 pm
@Lars – I’ll look into it, but I’m not sure if the average web developer would be interested in overly specific SVG feature support.
@Magne – Thanks for the info, will update soon. And I apologize for not having updated the feed recently, forgot all about that after the latest changes. Glad to hear it’s being read though, I’ll update it too shortly with the changes I’d forgotten to mention.
Also congrats for having posted the 666th comment on this blog.
November 9th, 2009 at 3:05 pm
@alexis:
Re: clip-paths and paint servers. The usage of SVG filters on HTML content will be of interest. It is not about SVG features per se, but the SVG features interacting with HTML content.
Have a look at http://people.mozilla.com/~prouget/demos/round/index.xhtml in Firefox 3.5+
November 12th, 2009 at 8:23 am
Small note:
http://dev.w3.org/csswg/css3-images/ – I think CSS gradients have now been accepted by the W3C, but the accepted solution is the one proposed by Mozilla instead of the one by Webkit (which is the one you have listed). Therefore, Firefox 3.6+ supports the correct way to do gradients, while Safari/Google Chrome (?) has the “Partial/Incorrect” status, but support for the Mozilla solution is being worked on.
November 24th, 2009 at 8:31 pm
Hi Alexis, I thought I’d let you know (if you hadn’t noticed already), I bought http://whencaniuse.com and pointed to your app. I love the functionality, but always forget the url, so I figured this would fix it
December 14th, 2009 at 12:31 am
Hi Alexis
You show Firefox as fully supporting MathML, which is incorrect. MathML has two parts, Presentation Markup and Content Markup. Firefox only supports the Presentation Markup part of the specification.
It does fully support the Presentation Markup tho.
December 18th, 2009 at 5:46 am
Hey Alexis,
I just notice WCIU doesn’t mention Template Layout !
Don’t you know that css module ?
David
December 24th, 2009 at 1:19 pm
Merry Christmas!
Opera 10.5 alpha has been released a few days ago. Here’s what’s new: http://my.opera.com/ODIN/blog/opera-10-5-pre-alpha-build-released-here-is-whats-new
December 29th, 2009 at 2:14 am
Blah, blah, blah… Everything is “not ready”. Standards sucks. It is stll not ready even if it is html 3.2, 4, 4.01 or Special IE XHTML 12 Nitro Edition. I hate websites of web designers. Everyone can make site (using greart features in top most applications – all over the world – like MS Office), even if it will works great only in top most world wide web browser: Internet Explorer. People do not care for tech-specs for webpages, just like do not take care to understand differences between “browser”, “search engine” and “Internet” – it is for about 75% of people: just “the same”(!!!).
December 29th, 2009 at 5:43 pm
@Szczepan You sound like a frustrated Internet Explorer user who is shocked by how bad your browser performs
Standards matter. Without standards the web wouldn’t work. How would the different browsers know how to render things?
People do care about who codes sites, no matter if they understand the mechanics behind or not. Generators like MS Office (eew) generates tons of unnecessary code that makes site load slow. People want sites to load fast, and look good. You can’t do that with MS Office.
And for one last note, IE is going down. Use it and you are aboard a sinking ship.
December 30th, 2009 at 4:30 am
Just to mention…
IE has support for VIDEO & AUDIO elements at least 10 years (since IE 5) as part of XHTML+SMIL (former HTML+TIME) module.
Unfortunaly too few developers knows about that.
Opera and Mozilla sucks in this case. If they would have implemented VIDEO support as decribed here (http://www.w3.org/TR/NOTE-HTMLplusTIME), we would already have widespread VIDEO use.
December 30th, 2009 at 4:26 pm
Your argument doesn’t really hold up. If IE implemented this 10 years ago, when it was basically alone on the market (with 95%+ marketshare), why didn’t web designers start using it?
Sounds to me like something was wrong with IE’s implementation.
December 30th, 2009 at 4:32 pm
Sorry for the belated responses, but here goes:
@Lars – I think I already have that covered with “SVG effects for HTML”?
@Remy Sharp – Awesome man, that’s very very cool. As tweeted before, I feel flattered.
@Rick Walter – Interesting, I’ll need to investigate that further. Happen to have a link for me with more info?
@David –
If you look at the FAQ, you’ll see that a feature needs to have at least one implementation to make it to the list. So unfortunately I can’t add that one.
@Dan – Thanks for the link, I managed to update WCIU on the day that news arrived.
@Szczepan – What Magne said. Also note that When Can I Use… is not for people to pick out the best browser, it’s for designers/developers to know when tools are available to them to make web development easier, make web pages load faster, and make websites work better (and do more than was possible before).
@Stac – You raise an interesting point. However, since neither HTML+TIME nor XHTML+SMIL made it past the “Note” stage in the W3C, it’s not reasonable to have expected other browser makers to implement the feature. Since clearly there is an interest in video and audio elements by browser makers, there must have been a good reason for the W3C not to standardize this particular specification.
January 3rd, 2010 at 1:31 am
Links for MathML in Firefox
The mathml project page on mozilla.org. None of this is anywhere near recent.
This says that Mozilla is only doing the mathml 1.0 presentation and maybe some of mathml 2.0
The W3C Mathml Test suite on w3c.org seem to work correctly! But they don’t really. There is an xsl file (c2p.xsl is included in mathml.xsl) that transforms the mathml-content into mathml-presentation! View frame source and then try saving the frame source as ‘web page complete’. You get an xml file with the mathml-content replaced by the equivalent mathml-presentation.
If you copy the example code from the test pages into your own file (either xhtml or mml) they don’t work. I’ve posted the ‘cn2′ test on my site.
January 3rd, 2010 at 10:34 am
More on MathML
It seems that even the W3C requires an XSL transform/stylesheet to display mathml-content. The W3C’s Putting Mathematics on the Web has a link to test if a browser supports mathml-content. That test page has an xsl stylesheet that transforms content form to presentation form. They even recommend that you use and/or link to their xsl style sheet!!!
So I guess that it’s enough that a browser supports all of MathML presentation and xsl stylesheets. With this criteria, Firefox does support all of MathML.
January 7th, 2010 at 6:22 am
@Stac – XHTML+SMIL is there under Status Unofficial / Note.
@Alexis – XHTML+SMIL also has only a JS implementation, and you considered it was enough to make it to the list. Template Layout should have the same status, imho.
Btw,
- what about XHTML+Voice ? (see your comment #38)
- What about Cross-Origin Resource Sharing ? http://www.w3.org/TR/access-control/
cheers!
January 21st, 2010 at 9:28 am
@Rick Walter – Thanks for doing that research! Good to hear Firefox’s support is still sufficient.
@David – The only reason XHTML+SMIL gets to be in is because IE has some form of support for it.
There doesn’t seem to be much interest in XHTML+Voice by other browser makers or by web designers/developers, so it doesn’t seem appropriate to add to WCIU.
Cross-Origin Resource Sharing, on the other hand, does seem appropriate to add, so I’ll do more research into that. Thanks for the reminder!
January 31st, 2010 at 1:14 am
How come you are not including Web Sockets and Web Workers?
January 31st, 2010 at 10:05 pm
Nice work.
There are a lot of DOM 2 / DOM 3 basic stuff that IE still doesn’t support in version 8. Most noticeably the W3C event model. You may want to consider adding that. You can find a lot more examples on the first two buckets of the Acid 3 Test. A lot of frameworks like jQuery are providing workarounds.
February 12th, 2010 at 3:29 am
Hello, It looks like the Canvas Text API is now supported by Opera 10.5 beta.
February 25th, 2010 at 9:51 am
I think Chrome 5.0 supports the File API
March 29th, 2010 at 7:42 am
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
April 15th, 2010 at 1:43 am
Would you be able to add a category for ruby support? Not the programming language but the writing system used a lot in asian languages. http://en.wikipedia.org/wiki/Ruby_character
April 16th, 2010 at 6:24 pm
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,
April 19th, 2010 at 11:11 am
@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!
April 19th, 2010 at 2:14 pm
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.
April 20th, 2010 at 3:39 am
@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).
April 24th, 2010 at 4:42 pm
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?
April 25th, 2010 at 5:45 am
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!
April 27th, 2010 at 10:38 am
@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!
April 30th, 2010 at 1:22 pm
Can you add WebGL to the list?
April 30th, 2010 at 3:33 pm
@Austin – Already was added, just hidden by default by having been set to “unofficial”. Changed now though, as they’ve published their spec.
May 4th, 2010 at 2:58 am
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
May 5th, 2010 at 11:56 pm
Hey Alexis,
Just wanted to say thanks for all the hard work! You’ve really made keeping up on specs much, much easier!
May 12th, 2010 at 11:40 am
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…),
May 12th, 2010 at 12:29 pm
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.
May 12th, 2010 at 1:08 pm
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!
May 18th, 2010 at 11:15 am
you are the best thank you deveria
May 25th, 2010 at 4:51 am
This is an oustanding resource. Alexis – I really appreciate your efforts here so thank you very much.
June 4th, 2010 at 9:52 pm
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.
June 10th, 2010 at 3:36 pm
Thanks for a great reference page! I’m missing box-shadow though. Shouldn’t it be in the list?
June 14th, 2010 at 8:33 am
@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.
June 19th, 2010 at 8:13 pm
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.
June 28th, 2010 at 3:33 am
Where is CSS3 Ruby elements in de listing.
That has been a Candidate recommendation specification for a long while.
July 13th, 2010 at 3:28 pm
When will you add information for CSS3 opacity property? Thanks
July 22nd, 2010 at 5:19 am
Please please do a mobile edition of caniuse.com
m.caniuse.com
F
July 22nd, 2010 at 11:24 am
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?
July 23rd, 2010 at 5:00 am
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.
July 27th, 2010 at 3:38 pm
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.
July 27th, 2010 at 3:45 pm
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.
July 27th, 2010 at 3:48 pm
Oh, and your note about Safari only supporting CSS3 3D Transforms on Mac and iPhone, is now incorrect. Support has been added for Windows.