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 across the major browsers from caniuse.com

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.

Keep in touch KeepinTouch

Subscribe to my Newsletter 📥

Receive quality articles and other exclusive content from myself. You’ll never receive any spam and can always unsubscribe easily.

Elsewhere 🌐