Creating an Embed for CanIUse

Like a lot of developers, I use caniuse a lot. Additionally, because of this blog, I frequently reference support for particular features and wanted a way of providing up-to-date information from caniuse within a post.

So, I decided to create an (unofficial, but with permission) embed for caniuse. For example -

![Data on support for the transforms2d feature](

Create an embed | View on Github

Creating the Embed

Having never done something like this before, here is how I created this embed.

1. Hosting the Embedded Document

The embed is an iframe that loads a particular document. This document is hosted via Github Pages at -

This url accepts 2 parameters -

  • feat - the ID of the feature on caniuse
  • periods - The browser versions to display, e.g. current, past_1, future_1 etc.

For example, for the "CSS 2D Transforms" feature above, the embed is hosted at -,current,past_1,past_2

2. Getting the Relevant Data

The caniuse data is made publicly available in raw json format with a CC BY 4.0 licence. Performing an XMLHttpRequest on full data file, we get the following object returned -

  agents: Object // List of browsers
  cats: Object // List of categories
  data: Object // List of features
  eras: Object
  statuses: Object

Based on the featured ID that was passed through the URL, we can get the relevant feature data -

var featureID = location.href.split('?feat=')[1],
    featureID = featureID.split('&periods=')[0];

loadJSON(caniuseDataUrl, function(res) {
  var feature =[featureID];

We now have the feature object with the following information -

  categories: Array[1]
  chrome_id: "6437640580628480"
  description: "Method of transforming an element including rotating, scaling, etc. Includes support for `transform` as well as `transform-origin` properties."
  firefox_id: ""
  ie_id: "transforms"
  keywords: "transformation,translate,rotation,rotate,scale,css-transforms,transform-origin,transform:rotate,transform:scale"
  links: Array[7]
  notes: "The scale transform can be emulated in IE < 9 using Microsoft's "zoom" extension, others are (not easily) possible using the MS Matrix filter"
  notes_by_num: Object
  parent: ""
  spec: ""
  stats: Object // Support data for each browser
  status: "wd"
  title: "CSS3 2D Transforms"
  ucprefix: false
  usage_perc_a: 0
  usage_perc_y: 91.38
  webkit_id: ""

Once we have the relevant data, it just needs to be displayed in the document and styled appropriately.

3. Using a Placeholder for the Embed

To actually display the embed in an HTML document, you use a placeholder. For example -

<p class="ciu_embed" data-feature="transforms2d" data-periods="future_1,current,past_1,past_2">   
  <a href="">Can I Use transforms2d?</a> 
  Data on support for the transforms2d feature across the major browsers from 

By using a placeholder, we are able to provide a fallback (the content within the <p> tags) for situations where an iframe can't be loaded.

For example, if you're reading this article via the email newsletter, I used an image of the embed as the fallback instead of just text.

4. Loading the Embedded Document

Finally, to swap the placeholder for the actual iframe, I created a small script, which should be loaded onto any page with the embed.

<script src=""></script>

This script does a few things -

  • Finds all elements with the class ciu_embed and swaps the fallback content with the iframe.
  • Determines what feature to load from the data-feature attribute and adds the relevant ID to the feat parameter
  • Determines what browser versions to display from the data-periods attribute and adds the relevant information to the periods parameter
  • Calculates the correct sizing of the <iframe> responsively depending on the contents


You can view the source for the embed on github or visit to create an embed to use yourself.

blog comments powered by Disqus