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 -

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 -

https://caniuse.bitsofco.de/embed/index.html

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 -

https://caniuse.bitsofco.de/embed/index.html?feat=transforms2d&periods=future_1,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 = res.data[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: "https://www.w3.org/TR/css3-2d-transforms/"
  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="https://caniuse.com/#feat=transforms2d">Can I Use transforms2d?</a>
  Data on support for the transforms2d feature across the major browsers from caniuse.com.
</p>

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="https://caniuse.bitsofco.de/caniuse-embed.min.js"></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 caniuse.bitsofco.de to create an embed to use yourself.