Last week we launched fmbip.com, a simple What's My IP Address App which reveals your browsers' support for CSS3 and HTML5 features in an easy to read format using Modernizr.
We've had a great response and we're going to be implementing some of your feedback in the near future.
For now though I thought people mind find it useful to know the state of support in the current browser market. I've taken all the A-Grade browsers and tested them one-by-one for their feature support . Needless to say it's produced some interesting results.
Safari 4 (Win)
Safari (on Windows) has by far the best feature set in the current market, outdoing competitors like Firefox 3.5 and even Google Chrome.
Particularly interesting is the excellent support for CSS3 animation properties such as CSS Transforms & CSS Animations, which enable the developer to define javascript-like rotation, movement and easing via CSS (advanced demos).HTML5 features are well supported with Canvas, Video and Audio all implemented. Only the Geolocation API is currently not available, although apparently this is in the pipeline.
Firefox 3.5 (Win)
Firefox 3.5 has good support for features that you might be looking to use in your client work on a day-to-day basis. @font-face, box-shadow, rgba() and border-radius all work nicely.
Although, it doesn't quite match up to Safari when it comes to CSS animation, it makes up for this with solid implementation of HTML5 media (video and audio).
A major plus is that Firefox 3.5+ implements the first public draft of the Geolocation specification from the W3C which I anticipate will be very useful in future web applications.
Google Chrome (Win)
As you'd expect for a WebKit browser, Chrome has really excellent support for almost all of the Modernizr tests generated by findmebyip.com.
The big let down is the lack of support for @font-face. This has been widely documented and there are known work arounds for it. Google has promised that the next version of Chrome will add native support for web fonts.
I was very surprised to see 3D Transforms return positive. I believe this is currently only supported by the iPhone and iPod Touch so I'm not sure about the accuracy of this result.
Opera 10 (Win)
We got quite a few comments about Opera's perceived lack of support for advanced features. It's true that support for CSS3 features is poor, especially when border-radius still hasn't been implemented.
Nevertheless, as Bruce Lawson has suggested to me, Opera does have good support for other important web standards which are currently not being tested by findmebyip.com. He highlights "Web Forms 2" and SVG support as two primary examples of Opera's excellence in these areas.Nonetheless, I still feel that Opera needs to catch up with the CSS3 spec if it wants to be adopted by the mainstream web dev community.
Internet Explorer 6, 7 & 8
And now the one you've all been waiting for. Lets all have a good laugh! Well not quite, because unlike some other contenders, Internet Explorer does actually support @font-face (all be it only in .eot format). In fact it's supported it for a while, with even IE6 providing complete support!
Nonetheless, with the exception of font-face, Internet Explorer does display a marked lack of support for almost every kind of advanced/progressive feature. Hopefully the IE team will be able to look at this in a future release, but I'm not holding out any hope.
Summary.
There is now a consistent level of support for many of the CSS3 and HTML5 features that the average developer might use for progressive enhancement. From my survey the most widely supported features were:
- rgba()
- hsla()
- opacity()
- border-radius (except Opera)
- canvas
Outside of these however, support is patchy and is largely dependant on the whim of the browser manufacturer. Some browsers are way ahead of the game (Safari), whilst others have a intermediate (Firefox) or even poor(?) support (Opera).It should be noted however, that findmebyip is not perfect and as a result doesn't report on all advanced features. We'll be upgrading the site in the near future to include a full range of tests for Web Forms and even SVG graphics, so perhaps another test will be in order then.Finally a request to you Mac geeks out there. Unfortunately, we don't run Mac's so I can't comment on OSX versions of these browsers. If anyone would like to let us know how the Mac versions of these browsers perform and post them as a comment we'd be very grateful.
Jon
Fab insight Dave!
Thanks for this post Dave, lots of great insight into whats happening with browser support as the tech changes! I follow with a keen eye on this!
Russ
Great work, but make it more usable, accessible?
Hi David,
The work you've done is great. However, each result is an image with very limited alternative text such as "Modernizr support in Opera 10" (which means it is not accessible for unsighted people who may want to access the content), and does not allow users to compare a single feature across different browsers.
Would it be possible to see all this in a comparison table?
Ann
Mac results
Safari 4.0.3 returns the same results as the Win version. Firefox 3.5.3 supports nothing on the list (which strikes me as odd). Both tested on Intel Mac running Leopard.
Lucas
Mac browsers…
Mac versions of Safari, Firefox and Opera act the same, according to this test.
Chrome developer preview for Mac doesn't even get the page's encoding right.
Flock and Camino don't go well.
Simon
Details of browsers on OS X 10.6
Here's a screenshot on Flickr - hope this is of use.
Adam
Mac Browsers
Safari 4, Firefox 3.5, and Chrome all have identical results to their Windows counterparts.
Magne
A few notes...
"I was very surprised to see 3D Transforms return positive. I believe this is currently only supported by the iPhone and iPod Touch so I'm not sure about the accuracy of this result."
It was added to the "regular" Webkit in June this year. See: http://webkit.org/blog/386/3d-transforms/
As of now, it is only supported on Mac OS X, Windows support will most likely come soon too.
"Safari (on Windows) has by far the best feature set in the current market, outdoing competitors like Firefox 3.5 and even Google Chrome."
I was a bit surprised when I read that, as Google Chrome runs on Webkit. Since they do not appear to implement many of their own features, I do not find it surprising that Safari supportes more things than Google Chrome.
Also, a last note on CSS Transformations and CSS Animation. These have been proposed and implemented by Webkit long before they became part of the CSS3 specification.
While this is a great initiative, and I truly like the features these brings, it might be a bit unfair to judge other browsers with them included, since they weren't a part of the spec until recently.
Nonetheless, support for CSS Transformations is coming to Firefox quite soon it seems.
Opera appears to have made quite a few bad choices when choosing what to work on to support. They support a huge amount of things that other browsers does not, but almost none of those things has been "popular" aspects of HTML5 and CSS3.
http://a.deveria.com/caniuse can give you about the same conclusion, but a bit more detailed.
Also, http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29 and the similar pages can give a perspective of what Opera has implemented that other browsers have not.
All in all, this was a short and good presentation of the current support in browsers. Good work!
Chris
Mac Browsers
Chrome 4.0222.5: http://imgur.com/UTFaJ.png (No @font-face or Geolocation API)
Firefox 3.5.4: http://imgur.com/0hKaw.png (No CSS Animations, CSS Reflections, CSS Transitions, Multiple Backgrounds, CSS Gradients, CSS 3D Transforms)
Safari 4.0 (5530.17) : http://imgur.com/N5GG5.png (Same as Chrome, no @font-face or Geolocation API)
Magne
The browsers on a Mac...
I forgot to add, all of the browsers perform exactly the same way on a Mac as it does on Windows it appears, which makes me just a bit surprised that it gave you the "green light" on 3D-transforms on Windows. Maybe they got support for it there now, you tell me. Thanks!
Doug
Further Thoughts
Couple of things:
Firefox currently doesn't get border radius right. Yes it's implemented and works on most elements but it cannot do it on images or elements containing images unless they're a background. Which is really bothersome.
There are also issues with both Safari and Firefox using border radius on an image that has a border that's less than the border radius. It doesn't make a smooth curve, as would be expected.
Safari for Mac and Safari for Windows are, for all intensive purposes, identical. Apple works very hard to make this the case so that you can, in theory, test your iPhone web-aps on your desktop in Mac or Windows.
I can't comment on Firefox but I've never noticed any major differences.
Arve
Neat.
Nice testing. I must say, I am slightly disappointed by Opera - they are supposed to be one of the big'n'great, why so little CSS3/HTML5 support?
And doesn't IE8 support more than 6?
Jesse
Mac Version Results
Linked are the results using your test for the listed. The listed broswers in the post are:
Firefox
Safari
Chrome Dev. Preview
Opera
Camino
Head over to http://vanderpol.me/post/214980950/here-are-screen-captures-from-5-major-browsers
for the results.
Chris
Mac Browsers
For the record,
Safari 4, Firefox 3.5, Chromium (Google's Chrome development port for Mac) are the same as their PC counterparts, as far as this test is concerned.
Opera 10 is the same, but does not support @font-face.
Oddly enough, the Webkit nightly build (@17 Oct 09) shows @font-face not supported, unlike Safari.
Stewart
RE: Mac user
I tested Safari 4 on Mac Snow Leopard and it checked out except for Geolocation API.
Also, you might consider separating your "Post comment" and social media icons from the "About author" box. They're rhetorically distinguishable content not related to the author and would be better emphasized in their own div.
Fred
Mac versions
Safari 4/Webkit r49550/Stainless 0.7 are all the same, as seen in this screen grab:
http://www.ball-ball.net/images/findmebyip-webkit.jpg (basically full support except GeoLocation API)
Firefox 3.5, screen grab: http://www.ball-ball.net/images/findmebyip-ff35.jpg
(basically supports most things except gradients and reflections but does support GeoLocation API)
Hope that helps a little. Great post. Thx!
J
Safari / OS X
Exactly the same results as your windows test
Mark
3D Transforms [or the lack thereof] in Chrome
The test that Modernizr uses to detect 3D transforms checks only that the CSS object model preserves the value of the “perspective” CSS property. Google Chrome is able parse, save and return this property, but is not able to render 3D CSS transforms. It’s misleading to extrapolate support for 3D transforms based only on the ability to save and restore this single property.
cj
safari 4/ff 3.5 on os x (snow leopard)
exact same results as the windows versions.
David
Modernizer on Safari 4 Mac...
...looks exactly like Safari 4 Windows. The Geolocation API is the only thing that failed the test. Go Webkit!
Vaibhav
Webkit Adaptation.
Microsoft should use webkit instead of trident.They know their rendering technology is worst, they know how painful it is to maintain the compatibility of websites. May be someone should start a campaign notrident. com and force them to adapt webkit. They give the excuse of innovation window. Cmon MS u r forced to innovate u don't innovate by urself. Even if webkit is used there is plenty of room for innovation.
Yngve
Ubuntu 64bit
Here is a similar test for my browsers. I run Kubuntu 64bit (i.e. Ubuntu with the KDE desktop environment), and have the following browsers available:
Arora 0.5 (webkit, same engine as Safari)
Konqueror 4.3.2 (khtml, is a fork of webkit as far as I've understood it)
Opera 10.00
Swiftfox 3.5.3 (Firefox, just with optimized compilation for different architectures)
Please save the screenshots if you want to keep the results for some reason, I will probably remove them from my server eventually...
Lars
A few things missed
Modernizr is great, but it has an implementation that is slightly webkit focused. As said, it does not test for SVG or uses of SVG that is supported by Opera or Firefox, such as SVG background images or indeed SVG used with the img-tag (Opera). SVG clip-paths and filters for HTML content and the über awesome paint servers in Firefox is also not detected.
I also think one should test for better JavaScript support. Significant parts of ECMAScript 5th ed. has been around in Firefox for ages and the missing parts are being added on a daily basis right now.
Ralph
Tested on Mac
Since no one else has responded, I ran your test with the same versions of Safari, FF and Opera on my Mac, and the results were identical. :-)
Paul
on Modernizr..
As one of the Modernizr devs I wanted to jump in here real quick.
The 3D transform test is exactly how Mark described it. It's causing a false positive in Chrome.
It's certainly a bug; I've filed a ticket on it. Should be a fun one to fix. :)
Lars, I'd love to hear your thoughts for the SVG tests that would be most valuable. I've been tracking this issue here. It's definitely something we want to see in Modernizr 1.5
Also, Modernizr is hosted on github so we'd love to get more people looking at the code and forking it. http://github.com/Modernizr/Modernizr
Cheers
David
Thanks for all the great responses
Thanks for all the great responses guys. Some of my comments are below:
@Russ I take your point about accessibility of alt text. I did consider this and made the judgement that as the service was JS dependant there would be little requirement for fully descriptive alt attributes. However, if people feel that this is a necessary feature I'll redo this info as a table when we release the new version next week.
@Magne Thanks for the info on CSS Transistions and your comments regarding the post. Glad you liked it. I was aware that it was a Webkit initiated addition to the spec and as a result I've tried to be fair in my post by not slamming browsers which don't support these features. However, it'd be unfair not to give Safari the praise it deserves for being ahead of the game.
@Doug That's really interesting Doug. I wasn't aware of these "bugs" in the implementation of border-radius. Hopefully they'll be overcome in future releases or when the CSS3 spec is more stable.
@Stewart Good point about the structure. I'll consider changing it.
@Mark That's really cleared up the "CSS 3D Transforms in Chrome problem" up for everyone. I notice that Paul has filed a bug on this.
@Paul Thanks for your input. I'll certainly get more involved in the community over at Modernizr GitHub. We all love your work.
Joel
"all be it" vs albeit
http://www.merriam-webster.com/dictionary/albeit
thanks for the review
Raju
Exactly what we need for HTML5/CSS3 adoption!
Great, I like the app. Wanted to build something like that with OpenLaszlo, and I think I'll still do that. The idea there was to have a real time analysis for an app, where the app can tell the developer which browers are going to support the HTML5/CSS3 features, and which browsers need the SWF10 version of the app instead.
With the different state of support for open standards in popular browsers it becomes increasingly complex to track which browsers will support a certain app. Great work!
Raju
Safari4 OS X - @font-face supported!
I have Safari 4 with Snow Leopard running, and @font-face is reported as not being supported, which is not true. Still, very useful app!
Ryan
Geolocation, Transitions
Technically iPhone 3.0 was the first to support the geolocation API.
Firefox nightly (3.7) has support for css transitions, and Firefox 3.6 has support for css gradients, although there syntax is different (they split linear and radial into 2 seperate properties)
James
Linux browsers
Just for your info and for those who use linux (like me) Firefox 3.5.3 and Opera 10 behave the same as the Windows amd Mac versions, Knoquera 4.3.2 (webkit) was disapointing with only 5 ticks and @fontface wasn't one of them.
Nick
IE info...
Arve said "And doesn't IE8 support more than 6? "
I heard somewhere that microsoft are not supporting any css3 untill it becomes a 'standard'. So untill its officially released, they're not planning on implementing it at all. So i dont think ie8 actually implements anything thats on the list that was tested. It supports more css2 than ie6 and 7 though.
Anyway, I'm really surprised by Safari and just how much they support but by how little its used in comparison to Firefox which in comparison uses very little.
Thanks for the test! :)
Ted
One Comprehensive Chart?
Great roundup! I found myself going up and down to compare each browser for certain CSS3 elements... any chance you're planning on combining each of the browser charts? Kind of like Campaign Monitor does for their email css rules: http://www.campaignmonitor.com/css/
Antony
Alas!...Still no dice
I'd dearly love to start using CSS3 in real projects, i'm loving using it in mock ups.
BUT at the end of the day most clients don't want to hear about why something won't work in certain browsers (because MS IE is predominantly non-standards compliant) or want a site that degrades gracefully in IE, they just want the thing "to work" across browsers consistently
So alas! it's not quite ready for me to use yet, but great article nonetheless
James John
Webkit not *that* far ahead of Gecko...
While this is a good round-up of basic support, it doesn't take into account any bugs browsers have in their implementation.
Safari has for example problems with their multi-col support (just try applying any positioning or opacity in elements within the cols), while Firefox has support for ligatures in regular & @font-face fonts.
What I mean to say is, it's more of a mixed bag than your results would indicate.
D. Anne
j j malcolm
totally off-subject-that is the coolest logo i've ever seen. love it!
lucideer
Useful for deployment, but very biased test in comparing support
This is not a complaint so much as an idle comment - the Modernizr is a FANTASTIC tool for web developers to use, but is utterly useless for comparing browser standards support as this article attempts to do.
Web developers in general tend to use one browser primarily for browsing and therefore naturally tend to gravitate towards taking interest in and developing with features best supported by that browser. I think it's fairly safe to assume the Modernizr devs are Mac fans - am I wrong? Didn't think so.
Firstly, CSS Transforms/Animations are NOT even near being a standard yet, only accepted as drafts in March - but as they started out as proprietary Apple WebKit properties - surprise, surprise, they're included here.
Despite this, the test excludes many completed CSS3 specs that are well supported by browsers other than Safari.
Some other features well supported in non-Safari browser that aren't in this test: HTML5 Forms and SVG are both mentioned in the article as being best supported by Opera, but there's also MathML which is well supported by Firefox (and not at all in Safari) and CSS3 Selectors and Media Queries (both only half supported by Safari - with better support in Oper/Firefox respectively).
Use Modernizr for what it was designed, beyond that - if you want to compare effectively you need to do a little more than look at some pretty checkboxes.
David
Thanks for the points
@James John Malcolm - true. We don't take into account any bugs. This is based on modernizr and they've asked for feedback on their GitHub so they can improve their service.
@D. Anne - thank you very much. Glad you like it.
@the Thanks for the comments. Since launching the site I've become increasingly aware of Modernizr's tendancy to "prefer" Safari. No one is disputing that many of the tests are for things that were originally propreitary features on Safari and I wish I'd made this clearer in the original article.
The new version of FindMeByIP.com does new test for basic web forms 2.0. I'm going to try adding extra feature tests next week (eg: selectors & SVG).
We're not really claiming FindMeByIP is the be-all-and-end-all of HTML5 and CSS3 support. It's just a simple overview. However, we really appreciate you taking the time to provide feedback and we'll work to improve the support over the next few weeks.
Fredrik
FindMeByIP - encoding issues
Hi.
Just wanted to notify you that the location-by-IP data you've imported/rely on isn't encoded properly when included in your page. I'm from Sweden, Göteborg, and that show's up as G�teborg on your page.
lucideer
Thanks for the great response to comments
...it's quite unusual (I find) for web authors to be as receptive to feedback.
The web forms additions are really nice to see, very informative to see specifics. I'm now intrigued to see how this site's feature analysis might grow.
As for adding other features, I'm not sure of a good source for selector tests (webdevout used to be ok, but the tests are severely outdated now) but codedread.com has excellent, relatively recent, SVG support stats (although it doesn't factor in things like![]()
, @font-face or CSS support in SVG).
Also, a bit of feedback on your comment form - perhaps it could be a little clearer which fields are used to represent the posters name (I am "the" above - the "the" was an accident ;) )
Tim
Chrome @font-face support
I made a site that uses @font-face a month ago and it looks perfect in Chrome 3.0 for Windows.
I used the multi-browser support method from fontsquirrel.com that uses EOT and TTF, if that makes any difference.
lucideer
Another issue with Modernizr
This has been reported on Modernizr's github issues list, but I thought I'd mention it here since I remembered commenting here. Modernizr doesn't support vendor-specific prefixes (i.e. -moz- etc.) generally, it only supports known properties (e.g. -moz-border-radius) explicitly. This means if a browser adds support for a feature (e.g. -ms-border-radius) Modernizr won't pick it up at all.
An example of this is the new Opera 10.5 which supports CSS transitions, but this isn't picked up in this table as Modernizr only checks for -webkit-transition and no others.
David
Very true - thanks for pointing it out
@lucideer - Very true. When we did this test we did rely on the Modernizr JS to determine our results. To be fair it does a great job of picking out the right results but it will ignore some browser specific extensions.
You specifically mention Opera 10.5 - a good case in point. This is a PRE alpha version of the browser and is nowhere near general release.
I may be wrong, but I don't think that just because Bruce Lawson et al. make a big fuss it justifies Modernizr rushing to add support for a browser which Opera itself says is still "unstable".
When Opera 10.5 is fully released then I'm sure the guys over at Modernizr will add support asap at which point you will see the change reflected on our new improved site:
http://www.findmebyip.com/litmus
I may well post an update to this article to reflect the additional tests now available on FindMeByIP.com.
Thanks for commenting - much appreciated.
lucideer
Thanks for reply...
... but I really think you miss the point of Modernizr, and of web standards as a whole to be honest.
"I don't think that just because Bruce Lawson et al. make a big fuss it justifies Modernizr rushing to add support for a browser"
I'm not sure what Bruce Lawson makes a fuss about (haven't read his writings), but the whole point of Modernizr is future-proofing, ensuring your websites pre-empt the introduction of standards support in browsers. If we were to update the code in the library with each and every new browser release, it would be no better than browser sniffing.
Modernizr should support Opera 12 and Firefox 6 today - because it supports versions of standards, not versions of browsers. This is the reason browser-sniffing is frowned upon, and the entire point behind the feature sniffing that Modernizr is enabling.
Anyway, this is a little off-topic, and actually fairly pointless as it appears this was a case of a bug in Modernizr's vendor-extension support - it does in fact support them in general just fine, but just not Opera's (yet). So my post above was a tad uninformed....
James John
Uhm
Totally off-topic:
@David I think D. Anne meant my logo, as it has my name in the subject line ;)
@D. Anne A tad late, but thanks!
Jim
OT: Email Links Fixed (Sorry!)
For everyone subscribed to this topic a quick appology that the email links were broken last time around. Thanks to @stewart for pointing that out.
For anyone who cares... a regex that magic-links hrefs didn't like the mention of 'css' in the URL ( to avoid linking link tags )... all fixed now ( I hope! ).
D Bnonn
@font-face support is broken in Safari
Actually, unless I'm much mistaken, the only browser that properly supports @font-face at the moment is Firefox. Otherwise, Safari users would see small caps for the main navigation links, second- and third-level headings, and the first lines of articles at http://informationhighwayman.com.
The problem is that webkit doesn't seem to recognize @font-face declarations which include a font-style. Which basically makes implementing, eg, small caps in both Firefox and Safari impossible without resorting to some very painful hackery.
lucideer
Only two browsers out there?
@D Bnonn
"unless I'm much mistaken, the only browser that properly supports @font-face at the moment is Firefox. Otherwise, Safari... ..."
I have a feeling you're much mistaken, unless you are assuming those are only two browsers in existence...
Martin
Web Database
Opera 10.5 supports Web Database, but when i go with Opera 10.5 on http://www.findmebyip.com/ it still shows that there is no support.
Same problem is iwth CSS 2D Transitions and Transforms.
Martin
Opera 10.5
I know that opera 10.5 is only pre-alpha. But I looked at the code of FindMeByIp and there shouldnť be a problem to make it works alright.
First, change the:
..,"Moz"+i,"moz"+i,"o"+i,"ms"+i];...
to:
,"Moz"+i,"moz"+i,"o"+i,"O"+i,"ms"+i];
than change the:
"mozTransform","oTransform","msTransform"
to:
"mozTransform","OTransform","msTransform"
I didnť find the part fo code which is testing web databse... Perhaps you are not testing it at all because Opera 10.5 is the noly browser which currently support it.
Martin
:checked
btw there is something wrong with code which test "checked" selector. Because Opera support it, but it shows the "X" :/
David
@Martin
Hi Martin,
Thanks for your comments. All noted.
FMBIP is due an upgrade this Friday. Latest version of Modernizr and I will certainly go over the selector tests again.
However, please note that we're really only testing on full release browsers.
I'll ask Jim to take a look at Web Database as well.
Lars
Quality
I think it really must be stressed that Modernizr is not a test for complete and bug-free implementations and that a check mark in support tables like the one above does not tell the whole story.
Example 1: Border-radius is supposed to round the corners of an image even if the border-style is none. Firefox (at least 3.5) fails this one.
Example 2: Webkit supported the full CSS3 selector test at css3.info long before Gecko did, but when Mozilla implemented their support, they found lots of cases where Webkit's support was incomplete and in the more thorough test suite they used Gecko's "score" was much higher.
A non Modernizr example: The very first version of Webkit that passed the SMIL-test in Acid3 had so precious little SMIL-support that it was totally unusable for anything but Acid3 - but it looked nice to get the 100 %! (They have since then made lots of progress. I am just using this as an example of how support tables do not tell the full story.)
Angry Bastard
This is pure Bullshit
You're testing firefox 3.6, and .. Chrome 2 ?
Why not Chrome 4 ?
You're testing the latest version of firefox and some out of date version of chrome and Opera ?
Are you paid by mozilla or something ?
your lack of objectivity don't even deserve this comment.
Tekk
Printing the list..
Hi, could you possibly add a print stylesheet to that page with the list of which browsers support what?
Every time I try to print, I get the outline of the chart, but no actual cell content :(
David
Responses
@Lars Thanks for your comment. I think I may have addressed this before however. FMBYIP is not a definitive test and we don't claim that it is (read the section next to "Modernzir Support" on the site). Obviously there will be exceptions and errors. However, I still think it's useful as an overview. Any suggestions for improvement would be greatly appreciated however.
@A.B. Sorry you are so disappointed and distressed at our lack of Chrome 4 support. Never fear however for we shall be upgrading the site tomorrow with the new version of Modernizr and tests for all the latest browsers by all vendors. If we can improve the system in any other way please let us know.
@Tekk - sure thing. I'll add it to our list. Hopefully we can get to it soon.
Norman
Update to Firefox 3.6?
Firefox 3.6 now supports CSS Gradients and Multiple Backgrounds. You might want to update your chart :)
David
Apologies
@Norman
Thanks for the info. I've been wanting to upgrade the chart for a while now but I've fad to focus on relaunching the DBS site.
As soon as I get a chance I'll fix everything on FMBYIP.com.
Thanks
Dave
Martin
Opera 10.5 is out
Opera 10.5 reach the final version, so i guess its time to make some updates. =)
(There is support for 2D Transforms, Transition, Web Database, and :checked is also working (but it works in v10 too)
Conrad
so here's the problem that I see
IE6 has been outdated for how long? Like 7 or 8 years? And a large portion of people still use it. Honestly, what's the incentive in learning a new way to use html and css when the majority of web browsers being used (IE) aren't going to support the changes AND aren't going to force their users to upgrade. I mean, I just don't get it... what're your thoughts?
Martin
Web Design Checklist
It's awesome that you updated Web Design Checklist and added Opera 10.5, but you have some mistakes here. Opera 10.5 support these: - CSS Transitions - CSS 2D Transforms - Selector :checked
David
@Martin
Hi Martin, Thanks for pointing out those errors.
According to Bruce Lawson (of Opera) it's a result of Modernizr not reporting correctly but it will be fixed in Modernizr 1.2.
In the meantime I've fixed those results manually.
Keep those bug reports coming and don't forget to let others know.
Jaycob
IE9
I'm certain you've heard of the release of the IE9 Developer Preview. Maybe squeeze that in too, perhaps?
Apart from that, loving the checklist!
Mathias
Mistakes in the "HTML5 Video Codecs" section
You might want to revise the "HTML5 Video Codecs" section…
christian
IE9 beta
Please add IE9 beta. It will be interesting to compare.
Stephen
Audio/Video codecs wrong
I don't know what you based the audio/video codec information on but it's way out.
I suggest you take a look at what the browsers actually support again.
Christian
Video: OGG / H.264
According to your chart, Chrome and Opera do Ogg-Video but not H.264. I think it's just vice versa.
Simon
Audio codecs & Opera
http://www.findmebyip.com/litmus/ says Opera 10.50 on Windows supports MP3 and AAC, which is not the case. It also says no browser supports H.264, which is also not the case. I think you may have tested for the wrong strings. The correct strings to test for are:
Ogg/Vorbis
audio/ogg; codecs="vorbis"
MP3:
audio/mpeg
WAVE/PCM
audio/wave; codecs="1"
MPEG-4/AAC low complexity:
audio/mp4; codecs="mp4a.40.2"
Ogg/Theora/Vorbis:
video/ogg; codecs="theora, vorbis"
MPEG-4/H.264 baseline/AAC low complexity:
video/mp4; codecs="avc1.42E01E, mp4a.40.2"
See http://wiki.whatwg.org/wiki/Video_type_parameters for more.
Jim
Audio/Video Codecs & IE9
Thanks everyone for your feedback!
@mathias, stephen, christian & simon - thanks, we'll get the codecs fixed up.
We're using Modernizr 1.1 for the codec support and LitmusApp for the browser spread but it would seem there's a bug somewhere.
@simon in particular, thanks - that will be very helpful.
@jaycob & chrisitan - we'll take a look at adding IE9 on Friday.
Thanks again for all your feedback - we're aware it's not perfect, so we're very grateful that you've taken the time to post!
Sam
So awesome!
This is really awesome. Thanks so much. It would be awesome if you added MobileSafari.
Jim
Mobile & Linux
Thanks Sam, we're currently working on adding mobile and Linux browsers... and fixing the AV codec bugs. We'll pot here when done.
Tony
Great checklist, but the audio/video sections are wrong
This is a great checklist, but the audio and video sections are wrong. ogg is only supported by Firefox - the rest of the browsers appear to be standardising on H.264 / AAC (Safari in particular is listed as supporting ogg, but not MP3 under audio and ogg as opposed to H.264 under video, which is completely wrong).
Eli Grey
postMessage in IE8
You incorrectly state that IE8 doesn't support postMessage. It does.
Raphaelle
box-sizing
Hi,
Could you possibly add the box-sizing property to your browser compatibility table?
thanks!
Richard
UnTagged
Love this product, and started using it with my clients.
The tagging for some reason did not work and are now untagged on a few clients.
Is there a way to tag the untagged?
Hope its ok I asked here since this was where to leave feedback.
Marc
Marc Nothrop
As others have noted, the results for the VIDEO tag are incorrect; Safari 3.1 added support for H.264 and not Ogg (without adding the XiphQT component http://en.wikipedia.org/wiki/XiphQT), and Chrome supports both. As for AUDIO, Safari supports MP3 and AAC via QuickTime.
Michael
Make first column clickable
I'd like the first column to be clickable, so that those who don't know what a term is can click on it to see what they could do with it if it were actually supported by the dominant browsers. Looks like the most promising features are CSS Fontface and CSS3: Begins with, Ends with, Matches, and General Sibling.
GM
About Codecs
I though Safari and Chrome support H624 and not ogg.
June
PostMessage Function
IE8 includes support for the postMessage. please fix it and thanks.
Kelly
Video: Ogg
"Video: Ogg" should probably say "Video: Theora", unless of course you want to change "Video: h.264" to "Video: .mp4"
Christopher
lots of missing app features?
Hey! This is a neat list but there's a lot of stuff missing from the list. What I can think of off the top of my head includes:
1. Websockets
2. Gesture Events
3. Multi-touch events
4. Touch CSS support
5. Server push events
6. CORS (Cross-site XML HTTP Request)
7. File API (integration with forms)
8. HTML5 Drag and Drop
9. postMessage
10. IndexDB
11. Orientation
12. Animated PNG
13. getElementsByClassName
14. XHR Progress Events
15. XHR Send Binary Content
16. WebGL
And that's off the top of my head.
Lewis
Nice collection of info
Nice collection of info maybe for a next post how to seamlessly integrate CSS3 for a non-css browser sort of like providing a fall-back for a site without image support or even a site without flash support!
Very nice article and thanks to other commentators for your knowledge too
Jim
Codecs, IE9, Features...
Hi guys, thanks so much for all the feedback.
Codecs - I've fixed a couple of bugs in the A/V codecs, re-tested and updated the page. Could someone corroborate the results please?
IE9 - I've had a look at the IE9 preview and it doesn't appear to work very well... not sure why but I'm not sure the results would prove to be accurate. Anyone know more about IE9 I would be grateful.
Features - @Christopher - Great list, thanks! @Richard, @Raphaelle - thanks for these ideas too. We'll add these to the to-do list.
S A Faruque
Thanks
Thanks for your post. it is really helpful.
Israel Alberto
Link images of Browsers
As a suggestion. In this section: http://www.findmebyip.com/litmus/
Images could put a link to each browser. The reason is that in web development if it detects iExplorer recommend using Firefox or Crhome down but I need to tell you den click the google image of crhome. You could put these links to carry out my idea.
Thank you.
Isra
www.rovisoft.net
Pascal
Wrong UA detection
You detect my latest Firefox 3.7 Trunk build as being Internet Explorer !!!
Jason
Browserscope
You can take a look at http://www.browserscope.org/ too :)
Nicolas
Mismatch between codec and container
Thx for your table, just a remark.
OGG is not a codec, its a container, the free software codec is Theora (.ogv) for video and Vorbis (.oga) for Audio.
Dave
Awesome service
Would be great to be able to delete results from your account. =)
Tux
No Linux?
And why a breakout of Firefox 3 vs 3.6 for Windows but not for Macs?
Roman
today's chrome 5 supports now Geolocation APIs
Official Google Chrome 5 Release Article
Kazyah
IE 9?
Would be nice to see upcoming IE9 in this chart ^-^
It's really great though ^-^
Jim
Chrome 5 & IE9
@Roman, great, thanks for the heads-up. We'll add Chrome 5 tomorrow.
@Kazyah, it would, yep. The problem is the IE9 Tester doesn't run the javascript... As soon as it's stable and prototype.js / modernizr are happy we'll update.
Tschef
Very nice list, small bug
On your site http://findmebyip.com/litmus/#target-selector the text Web Designers Checklist (litmus-header) will break and fall into the next line if the font size is too big. So the red SEO text will be in the white text. Please fix this, it looks a little stupid for people that advocate CSS 3 and then these things break the design. It makes my colleagues not trust the source anymore actually :) Otherwise amazing tests, although it looks like a little google sponsored :)
Rafita
Good idea!
Very good copy&paste man! Keep on!
David
@Tschef
Hi. Thanks for your comment and glad you like the site.
I'll take a really good look at the FindMeByIP CSS as soon as possible.
We run the site alongside a very hectic work schedule so I guess a few small mistakes have crept in.
As a side note, we don't advocate the use of CSS3 or HTML5, we simply show you a overview/summary of support. It's up to you whether you feel you can use it.
Hopefully the site will become more robust once the client work cools down a bit.
All the best,
Louis
A breath of fresh air.
There is an important place in this world for big tables of browser support info on a white background.
Nevertheless, thank you for not being one of them.
Nabeel
The new tags dont work on Chrome 5
I was testing these on chrome: demos.w3avenue.com
Rick
OS detection
You incorrectly identify my Windows 2000 (5.0) as Windows XP (5.1)
Michael
Useful
This is a mine of information but the font sizes look as though they were chosen by someone with very poor eyesight. Why such crazily large sizes for fonts & images? Takes a load of scrolling to view a page.
Safari 5 Mac looks comprehensively supported, Opera 10.54 Mac is also good bit Firefox 3.0 for Mac looks poor.
Zi Bin
nice!
Hi, nice list.
Just a note, there's been quite a bit of changes to the list.
Opera is already supporting 2D transform, transitions, Video, border-radius and such.
lucideer
Please update your site!
.. or just take it down.
Judging by the frequency of comments on this page, I can judge that findmebyip probably gets a fair bit of traffic. So that's a huge number of people getting woefully out-of-date information about browser support.
The Modernizr library had a lot of bugs in version 1.1 - used when FindMeByIP was first put up almost an entire year ago (as mentioned above, by me and others). Modernizr is now at version 1.5, and this site has NEVER been updated (despite many comments promising to do so) and is still using version 1.1
The site is all very pretty, but if you're going to go to the trouble to provide this information, the least you could do is ensure it's accurate and up to date.
If you can't be bothered, then take it down - what use is it to anyone if the results are wrong?
Jim
Accuracy & Modernizr
Point taken @lucideer, entirely. Accuracy is extremely important, particuarly on the /litmus page.
We did go to some lengths to hand-edit those areas where there were known bugs either in our recording of the results or in Modernizr and to the best of our knowledge all the items raised by people on this post and others have been corrected.
The Modernizr 1.5 update will be up by close of play tomorrow. 1.5 has only just been released so this is the first oportunity we've had to upgrade.
The initial thrust of the site was as a tool to make it easy for designers like us to give a client a URL which would send them details of the client's browser, for which we use Modernizr, Maxmind and a bit of browser sniffing.
The litmus page (the big page of tickboxes) was a bit of an accident bourne from the fact we were using litmusapp to run lots of browsers quickly for testing.
We make no pretense that we're doing much more than recording and showing off Modernizr's results in a quick to digest format and as a result fmbip.com carries the same failings and limitations as Modernizr does.
Nevertheless I hope that it's a both a useful table of information, despite the fact it doesn't include every last feature or browser idiosyncracy, and a useful tool for getting information about a remote clients' browser details.
Accuracy, as you rightly point out though is of paramount importance and we've made a big effort to engage with folk like Bruce at Opera, Paul at Modernizr and Eric at Microsoft to check our ticks are in the right place.
If there are any factual errors, particularly tomorrow after we update to Modernizr 1.5, we will be extremely grateful to all and any of those who point them out so that we can correct them as soon as possible.
John
IE Sucks!
One day we will all use google to see the web unless M$ just stops supporting the old browsers. I mean I can't even watch guitar lessons online without all these extra plugins. There is no point for that. I love Chrome!
Umar
Simply super, but
IE Should Die!!!
Marco
Chrome support
Chrome now support @font-face
Jim
Chrome & FontFace
Hi Marco,
Yes, for quite a while now. The tables of support data are being kept up to date here: http://findmebyip.com/litmus
Cheers,
Jim
Cotton
ie9
Are you ever going to add data for ie9?
Jim
@Cotton / IE9
Yes!
This article's quite old now. We are keeping all this information up-to-date at fmbip.com/litmus
We've been keeping an eye on IE9 during the preview stage and we added results for the beta last night within a few minutes of it's release.
Since this article was written we've also added Chrome 5 & 6, Firefox 4 Beta, Opera 10.6 and Safari 5.
Hope this helps?
J.
Mehran
Great thanx!
Hi dear,
thanx for your great help, but please update for new releases browsers, thanx.
dev
interesting
you list safari on windows as supporting html5 tags but according to all tests, it does not support the audio tag, even going to the w3c pages shows that it isnt supported by the demo codes, and the simplest tag test shows it will not play a sound song and returns as unsupported, newest available version just downloaded for testing purposes
Louis
re: interesting
I'm running Safari 5.02. The audio tag works great with mp3 out of the box, but not ogg. Because I've installed the Quicktime plugin from xiph.org, the audio tag works with ogg as well.
Caleb
IE 6/7/8
I'd really like to see IE separated by version, as I assume that at least 8 supports some more of these features.
Effectix
Firefox 4?
You have IE9, but left out Ff4? Both are still beta versions as far as I know. And Firefox4 seems to cover HTML5 as it is today quite broadly. There are other resources that seem more updated than this one...
Jim
@Effectix
Hi Effectix,
We're currently listing FF4.02 and Chrome 7 which are both in beta at the moment.
Please check http://fmbip.com/litmus/ for the latest results. We're updating this table almost once a week with either new browsers or new features.
Incidentally we've intentionally not added the very latest FF beta because we're getting odd results and need to check why before publishing.
Hope that helps.
Jim
Effectix
Great!
Thanks for your prompt reply Jim. A suggestion if I may, would be to add the date of the last update somewhere prominently visible. I had the impression (because I merely looked at the listing and compatibility table and skipped any reading) that this was an old (not recently updated) compatibility table. Thanks for the great resource!
Doctor
Updating with Latest
It is to getting very quick and fast update and need to know what is going on, and be ready to deal with all the latest technology and know its usage, to handle the work in better status.
Lalo
IE
IE is pain.
Joel
An excellent comparison.. but
In all honesty, for all the great features that HTML 5 will bring to web designers/developers, I must say, who cares? Most will go un-utilized by corporate web designers and developers, and will continue to be "playground toys" for designers until IE supports them. Most of the estimates I have seen for a date on this are over a year old and made the assumption that Microsoft would begin adding some support for HTML5 in IE9. People were predicting 5 years as a timeline for wide support of HTML5 at that time. As long as the majority of the business world is primarily using IE, practical development of web sites/applications using features from HTML5 is pointless. It's nice to play with concepts and use checks and fork the code to support these features in the brosers which support them AS AN EXCERCISE or to learn the concepts. However, who wants to maintain these in a production environment when the primary browser can't even use them? Sorry for the rant, but until Microsoft gets off their duff and promptly supports a majority of the features, HTML5 is largely useless.
Keith
Not laughing
I know it's cool to mock Microsoft's backwardness, but it's no laughing matter. The thing that's preventing me from doing a major project in HTML5 is precisely the fact that IE doesn't support it. I simply can't get funding. Unless and until the world's most dominant browser robustly supports HTML5 (and remember, please that IE9 will not quickly replace IE6, 7 and 8), then HTML5 will remain commercially non-viable for general-audience applications.
Joel
IE 9
Keith,
It appears you may have quite a wait. Do a Google search and you may find a very unappetizing result: IE9 isn't going to advance Microsoft's HTML 5 feature set very much. This article from Wired.com (check out the link to the test) sums it up:
http://www.wired.com/epicenter/2010/11/ie9-leads-pack-in-html5-support-not-exactly/
IE9 is a move forward for Microsoft. However, compared to the other browsers on the playing field, it is way behind, especially in the things that people care about the most (CSS3, SVG 1.1, File API, Web Workers, Drag and Drop) ... the important things that will make development and design easier and more powerful.
Wolf
Firefox 4.Beta10 On Ubuntu
Firefox 4.beta10 can use almost all of html5 and css3, at least on Ubuntu
Jamie
Really Useful
I'd be interested to see an updated version of this post now to see how far things moved on in Firefox 3.6 / 4 and the latest Chrome and Safari.
PHP Assistant
Internet Explorer?
Internet Explorer not supported from all CSS 3 Property's and HTML5!!
Ha Ha Ha Ha :)
Ellen
Please post the date!
It is amazing to me how many posts and webpageds on the topic of "which browsers currently support X and Y" don't have a prominent date anywhere on them.
This is dated information. Please, please, PLEASE include a date when you discuss this kind of thing!
I'm going crazy trying to figure out which browsers now support various bits of CSS3. I will keep searching, but every time I find another of these posts, I'm tearing my hair the more.
andres
IE
According to this IE does not support anything! I downloaded the beta version of IE 9 and as far as i know it has no support for the
John
It's a pain
It's a pain in the ass seeing my site looks so different across browsers. Hope CSS3 and HTML 5 become the standard soon - especially for IE.
Vishal
CSS not working in Firefox
I create an applicaiton and use some CSS in it. It is working with IE but not with Firefox. Stuck in ..get me way to escape.
My CSS is as:
body
{
background-color: #e4e3e3;
margin: 1px;
font-family:Calibri;
}
#Background
{
width: 100%;
}
#Header
{
height: 70px;
margin-left: 100px;
margin-right: 100px;
background-color: #fff;
}
#navigation
{
top: 50px;
margin-left: 100px;
margin-right: 100px;
}
#mainContent
{
top: 55px;
margin-left: 100px;
margin-right: 100px;
height: 100%;
background-color: #fff;
}
#Mylogin
{
color: White;
float: right;
width: 170px;
padding-top: 6px;
}
#Footer
{
text-align: right;
height: 20px;
margin-left: 100px;
margin-right: 100px;
background-color: #fff; /*#7b94f0;*/
padding: 5px 10px;
}
Oswald
CSS3 2D/3D Graphics/Animation Samples
You might enjoy some of these samples: http://code.google.com/p/css3-graphics/
Miller
Quick note
Google Chrome is actually easy to become a very popular option identified due to the speed and also convenience. Mozilla Firefox may be known because of its great selection of add-ons in which improve the web-browsing encounter. Safari is the default browser fitted on Mac PCs, and is also identified because of its straightforward as well as non-flashy technique.