If you've ever written an article about HTML5 web technologies, you'll appreciate how important it can be to inform your readers which browsers the technology works with.
The "When Can I Use" Web Widget provides authors with the ability to include up to date information about browser support for a feature they are talking about based on the data crafted by CanIUse.com.
Features
-
Provides the latest "When Can I Use" information to your readers without manual maintanence.
-
Easy to include in any article (here's how).
-
Runs standalone without the need for a JS library.
-
Customise look and feel easily.
-
Fork me on Github!
To include the Can I Use Web Widget in your page, you need to complete the following simple steps:
-
Download the library.
-
With the rest of your stylesheets at the top of the page, include caniuse.css:
<link rel="stylesheet" href="/css/caniuse.css" />
-
Include the following JavaScript file at the bottom of your page, before the </body> tag:
<script src="/js/caniuse.js" /></script>
-
Where ever you wish to show the Can I Use Web Widget, include the following HTML:
<div class="caniuse" data-feature="feature"></div>
You'll need to change the value of data-feature="feature" to the feature you wish to show information on.
You can customise the browsers shown and output from the JavaScript file.
-
Alexis Deveria, who created and maintains the brilliant CanIUse.com, where this widget gets its information from.
You can download the raw data on Github.
-
IcoMoon, where the beautiful browser icons are sourced from.
If you are looking for custom vector icons, check out IcoMoon.
-
The Yahoo! Developer Network for creating YQL, which allows us to filter the JSON data in to JSON-P without requiring additional server-side code.
-
The Modernizr team for providing a library to reliably detect features in the user's browser.
Andi Smith is a Presentational Technical Architect based in London who loves diving in to HTML5; CSS3 and JavaScript APIs. He has been building websites for over 13 years for companies such as Barclays, Nike, Heineken, Sainsburys, Coca Cola and Unilever. He hopes you find this widget useful!
Follow him on Twitter