An eclectic collection of articles, case studies and opinion pieces ranging from the creative process to technical tips... - our latest afternoon project

  • Screenshot of the website
    Screenshot of the website

Here in the DeepBlueSky offices we've been making a new effort to dedicate Friday afternoons for our developers to developing "in house" projects. This week we've created, 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

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 do? 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.