DeepBlueSky Blog

A cute little app that presents your browsers' support for advanced HTML5 and CSS3 features in an easy to read format using Modernizr.

Screenshot of the website

Here in the DeepBlueSky offices we've been making a new effort to dedicate Friday afternoon's to "in house" projects. This week I've created FindMeByIP.com, a simple little app that uses a combination of CSS and the Modernizr javascript library to clearly display your browsers' support for advanced CSS3 and HTML5 features.

Why did I build FindMeByIP.com?

As we all know different browsers have varying levels of support for advanced features. If we follow best practice, then it's generally accepted that people using more "modern" browsers get a better experience than those using older models.

At DeepBlueSky I use the Modernizr javascript library to enable advanced features to display in those browsers that support them. The problem is that I keep forgetting which browser supports which feature which means I continually have to inspect the classnames on the <html> tag!

What does FindMeByIP.com do?

FindMeByIP.com solves this problem by presenting your browsers' support in an easy to read bullet list format. Each feature is tested by the Modernizer javascript library and then shown with either a "tick" or a "cross" icon to designate the level of support.

How does it work?

The website relies heavily on Javascript and the use of CSS descendant selectors to achieve its results.

The Modernizr library adds a suitable classname on the <html> tag if a feature is supported by your browser.
The site's CSS file contains a list of rules which mirror those used by Modernizr and apply a background icon of a "tick" if matched.
Each "feature" is enclosed within a list-item and given a class which matches the rule used in the CSS file (eg: the "border-radius" list-item has a class of "borderradius" and the "canvas" list-item has a class of "canvas").
The result is if the feature is supported then a tick appears next to the list-item with the classname that matches that added to the <html> tag by Modernizr.

It's certainly not the most accessible method ever seen, but as the whole site (necessarily) doesn't work without Javascript it's something I can live with.

The future

In the coming weeks we'll be adding some great new features to the site and implementing some of the feedback we've received so keep checking back for upgrades.

We'd also love to hear from you. So if you have anything you'd like us to know please leave a comment below.

Posted years ago

Tagged as: Apps, CSS3, Tools, HTML5, 20% Projects, Progressive Enhancement, Modernizr

32 Comments on this post

Mark said “Typo” years ago

Your title element says "FindMyByIP" — seems to be a typo.
Jim said “@mark - oops, yep!” years ago

Thanks Mark, so it is!! Oooops. Fixed.
Andy said “Findmebyip - Location” years ago

Strangely findmebyip reports I am in Crewe, Cheshire when visiting with Firefox but in Cardiff, Wales (closer!) when I visit with Internet Explorer (8)!
bruce said “Findmebyip - Modernizr” years ago
You seem not to be reporting anything about the browsers' html 5 webforms support (in Opera, Chrome, Safari) although those are given to you by Modernizr (see http://miketaylr.com/pres/html5/forms2support.html for an example).

Modernizr only goes so far with testing html5 support; Remy Sharp has some extra tests for html5 features at http://jsbin.com/aroho - see the bottom 9 tests).

Lastly, Modernizr ignores scalable vector graphics (SVG) which allows animations of text and shapes, and scripting of graphics that don't pixellate at any level of zoom. There is an entire test suite at the w3c. See for example these 2 tests Re SVG tests, there is a whole W3C test suite where the SVG much match the PNG image, for example:
- http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-animate-elem-03-t.html
- http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-animate-elem-04-t.html
Try them in Opera and Chrome and compare with IE or Firefox, for example. These are w3c test suites, but seem to be open for reusing http://www.w3.org/Consortium/Legal/IPR-FAQ-20000620#GNU1.

Be great to see some smaller versions of those tests in findmebyip, particularly testing animations and transforms, SVG fonts, text manipulations, filters, SVG background images linked in CSS and the other "cutting-edge" support.
David said “Thanks for the feedback” years ago

@bruce

Thanks for this Bruce. We'll definitely be looking to add these extra tests very soon.

I'm very interested in the SVG stuff. We want to keep the main page load down, but I'm sure we could add some demo pages.

I'll update you when the site gets an update.
Bernie said “One more thing...” years ago

This site might be useful as a way to debug things when someone reports having a problem on one of my pages. Could you add a script that opens up a text window with all that information in it?

If that were present, I would ask users to go to your page, copy that text and mail it back to me. (or, I guess, I could write something like this and put it on my own site and then just have them click on a link.)
Andy said “Microformats” years ago

Please add some microformats to the output; not least Geo for coordinates, but also hCard/ adr for places.

Happy to assist.
Adrian said “Chrome for IE misreports IE” years ago

I hit the site in IE8 with the Chrome plug-in installed. It comes up in the user agent string as "chromeframe," while still clearly IE8. The Browser portion says that I am running Chrome when I am not.

User Agent String:

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; chromeframe; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8)

Browser:

CHROME
Michael said “Opera” years ago

@brucel replied to me in twitter with similar information.

I'm a long time Opera user and fan dating back to Opera 2 and 4. Huge fan. And it is great that Bruce has tests that show progress in other areas. Have in these HTML5 areas they are clearly behind. Rather than say Opera is behind it is almost like saying it doesn't matter because we ace these other different tests.

There have been labs version of Opera that supports <video> for a long time but the feature never crosses into a production or beta version. I really want to use Opera and see it perform on par or better than the other browsers.

However, I think @brucel is saying it won't report well in these Modernizr tests but it is OK because we do better in other tests.

Here is a comprehensive list of proposed or standard technologies that Opera does not support on the Opera forums - Proposed standard technology that is NOT in Opera 10 (by now) - http://my.opera.com/community/forums/topic.dml?id=284355
Jim said “@Bernie - sure!” years ago

We've made a whole "Version 2" of findmebyip.com which will allow this... watch this space!
David said “Thanks for all your comments” years ago

Thanks for all the great comments guys. I've responded below:

@Bernie As Jim has mentioned (above) we're working on this and its going to be released on Friday. Check back for a much more powerful experience.

@Andy I totally agree. I've been wrestling over the best way to implement the "support/not supported" list. Now I've made a decision I'll try and add some better markup. Watch this space (although I can't guarantee for Friday's launch)

@Michael You make some interesting points. I've always found Opera to be an nice browser to use but as I've said before I can't find a place for it in my web life. I've invited @brucel to reply to your comment. I'm sure he'll have some good points to make in Opera's defence.
Jim said “@adrian - chromeframe & IE” years ago

Hi Adrian,

Thanks for highlighting this. The serverside browser sniffing is largely just a big regex and I think it's short circuiting on "chrome" in the user agent.

Well spotted and will fix! Thanks, J.
Allan said “Communicate Results” years ago

It would be invaluable to be able to emai the results of this information to someone, e.g. for user testing or customer support.
bruce said “r/e Michael said “Opera”” years ago
Hi Michael

"I think @brucel is saying it won't report well in these Modernizr tests but it is OK because we do better in other tests."

Apologies if it came out like that. What I mean is that you shouldn't assume that Deep Blue Sky's subset of the current Modernizr tests are the be-all and end-all gauge of a browser.

Many people make use of SVG and SMIL, for example, yet they are unrepresented in these tests. There are no tests for WAI-ARIA, either, yet IE and Firefox would do very well if there were. Many HTML5 features are untested by Modernizr (web database, web workers etc).

About the list of unsupported standards in Opera 10 you point to - thanks. I've been watching that thread for some time, as have many others in Opera. I can't speak about future releases (last time I did, our PR people nailed my ears to a wall for a month) but until the next main release comes out, I'd point to the other innovations that we've come out with:
- Opera Turbo that speeds up desktop browsing by up to four times for those on slow connections.
- Opera Unite that connects devices and computers together to share content.
- Opera Widgets that allow web developers to make applications for desktop (or mobile, or any other web-enabled device) using Web Standards.
David said “New features on Friday” years ago

@Allan - thanks for suggestion Allan. This functionality and much more besides will be available when we launch the new version of Friday. Follow @deepbluetweets or subscribe to RSS for updates.

@bruce @Michael - Bruce is right to point out that findmebyip's implementation of Modernizr's tests is somewhat incomplete (it was only meant as a side project one afternoon).

We're going to be adding new tests in the near future which should provide more complete/balanced results.

He's also right to mention Turbo, Unite and Widgets which are all excellent examples of Opera being innovative.
Paul said “the be-all and end-all gauge of a browser” years ago

I'll echo Bruce here, while Opera fails a few of these, they dominate with the webforms stuff as well as with SVG.

The tests mentioned above will be going into Modernizr 1.5.
bruce said “Modernizr” years ago

"findmebyip's implementation of Modernizr's tests is somewhat incomplete (it was only meant as a side project one afternoon)."

I wasn't bashing findmebyip. It's a nice Friday afternoon experiment. It's easy enough for you to add webforms reporting.

Modernizr seems currently to have a pretty arbitrary set of features it tests: no css 3 selectors (test suite here), a couple of the background and borders stuff but not all of them; and box-shadow but no text-shadow.

And to my knowledge (i might be wrong; I'm not on the CSS Working Group), CSS reflections is not a standard, hasn't been proposed as a standard and is a single vendor proprietary thing, so its inclusion in a list of "modern" browser attributes, to the exclusion of other more widely-supported real standards is somewhat puzzling.

It will be nice when more tests are added that gives a level playing field.
Jim said “@Allan - Next Friday! (And blog subs)” years ago

I'll leave Dave to answer Bruce & Paul - all this css stuff is a bit beyond me.

@allan - we're re-launching on Friday with developer tools to so you can send your clients to a short link and have the results emailed to you. We ran out of time last Friday and I had a beer festival to get to. Lots of client work on this week so sorry you'll have to wait till Friday.

Follow us on twitter and we'll let you know on Friday when we go live (@deepbluetweets)

@* - to everyone else who's expecting to get email updates when blog comments are posted, please bear with me, fixing (ie. writing the code;-) as we speak. J
Rubens Cavalheiro said “Browser” years ago

Recommend upgrading your browser version, mainly be for IE...

hehehe
Edwin said “HTML5 is more” years ago

It's a bit strange you only test for some HTML5-API's, but not all.

You test for Canvas and the Geolocation-API, but where is Storage? Or Web Workers?

You can find a list with demo's here: http://html5demos.com/
David said “Level playing field” years ago

@bruce That's fine. I understand your not bashing findmebyip and thanks for your input. The new version does now test for web forms via Modernizr.

It's true we rely on Modernizr for our tests. The alternative would be to write our own test suite which is fine but would be stepping on Modernizr's toes.

I know they're going to be adding some more advanced tests to their next release so findmebyip.com will become better once we get the new version.

Just for the record we think Opera is a good browser.
Bruce said “Screen Resolution” years ago

Hi

How about adding the screen resolution as well as browser width and height as not all users have their browser window maximized to the same size as their screen.

This will definitely help me in designing background images for my clients websites.

Cool app, by the way! Thanks...
Jim said “@bruce "client info"; screen size etc.” years ago

Screen-Size is a great idea Bruce, thanks. We'll get that added. There's actually a bunch of browser stuff like that's available from the GoogleAnalytics .js that's running on the page so should be easy.
Lord said “Bugs” years ago

Minefield (latest version of FF) is detected as IE

Linux nor OS X are properly detected
Robert said “JS and Flash support” years ago

I haven't been able to test, but I wonder what FMBIP would do if I had JS off? Does it just reject it?

Flash support ( good ) or Flash version number ( amazing ) would be great for client reports. We just send them to the Adobe test at the moment.
Binary said “Automating return values” years ago

Here is a suggestion. :) You could make an interface available to those who sign-up via the same form everyone currently signs up for to "Get Detailed results" on clients who hit a specially generated URL. :) A scripting interface would be really nice... :) For example, if you will notice "http://www.WhatisMyIP.com" has a bloated interface with 99% irrelevant content and can be a pain to parse using some sort of RegExp method, which is also a waste of bandwidth on their behalf... But this special URL is specifically designed to give a simplistic return value (The IP address)... :) "www.whatismyip.com/automation/n09230945.asp" Now if you were to have a nice interface for scripting such as... "http://www.findmebyip.com/scripting.php?IP=true&useragent=true" that would return the bare bone variables, and would include very little parsing... :) *Just a suggestion... :P
Matt said “Overall Rating” years ago

Some positives: I think the design is great, colours great, simplicity great.

Some suggestions:

A quick strapline of what the website is for might be useful for the user. I wasn't immediately clear what the purpose of the site was when I hit it.

Might be nice to see an overall rating (number, percentage, symbol) of how modern our browser is. Even maybe a continuum of how it stands alongside other browsers in an easy graphic form so I can judge how modern it is.
marc said “save report” years ago

For me "save report" function is a must, txt file or directly send to mail with all discovered details.
Matteo Lissandrini said “XSS” years ago

Hi! I recently signed in , it's really great, but there is an XSS hole when you grab the user agent and the other infos.

Then i'd like to change my password and to delete the various (old) stats.

Thanks a lot.
Jim said “@KuZeKo ( XSS vulnerability )” years ago

A public thank you to KuZeKo ( and TriZeN ) for spotting a Cross Site Scripting (XSS) vulnerability in FindMeByIP.com.

The problem stems from repeating the browser's UserAgent string without any checking.

Changing your browser's UserAgent string is pretty simple and would allow the attacker to execute arbitrary javascript on the FindMeByIP results page by placing javascript into their UserAgent string.

The bug has been quickly squished but thanks again for bringing it to our attention.
Ryan said “Incorrect information on IE8” years ago

Your litmus test, http://www.findmebyip.com/litmus, has IE8 as not supporting local and session storage even though it does. In you actual test page it shows that it supports it fine.

IE8 in compat mode or in IE7 mode return false positives with local/sessionStorage and postMessage.
Daniel said “Linux Category” years ago

I would love there to be a Linux Category preferably Ubuntu 10.04 which is do to be released in 2 days.