Extending the Availability of CanIUse

caniuse

What Is CanIUse?

CanIUse is an extremely useful tool for quickly visualizing which front-end technologies are compatible with which browsers. You’ve likely seen us include various CanIUse support table screenshots over in our blog posts. They help give readers a quick look at how compatible a particular technology is before implementing it into their own setup.

caniuse example

At a glance, you can see which major browser support the technology in question, notes, resources, known issues, and more. Browser support for features are always kept up to date and in some cases, even show which future browser version is set to support said feature.

In this article we’ll explore a couple of things you may not have known was possible with CanIUse including how to use it via the command line, and how to embed support tables directly into a page or post.

CanIUse Via the Command Line

Apart from viewing support tables directly from the CanIUse website, there’s also an option for users who prefer the command line tool. Setting this up is pretty straightforward. First, you’ll need to ensure you install Node.js which comes with npm pre-packaged. To check whether you already have npm installed or not, simply run npm -v in the CLI.

Once you’ve confirmed you have npm installed, enter the following command:

npm install -g caniuse-cmd

This will install the CanIUse utility and allow you to use it directly from the CLI. Now you can lookup feature support for any particular front-end technology by entering caniuse proceeded by the name of the technology, for example:

caniuse preload

cli caniuse

There are also many options which can be used based on personal preference and information required. These include things such as:

  •   --short, -s Short output: show browsers on one line and don’t
    display notes or description (default when displaying
    multiple results) [boolean]
  • --long, -l Long output: show more information (default when
    displaying a single result) [boolean]
  • --oneline, -1 One-line output: just global percentages, no per-
    browser info

For a full list of options, visit the official GitHub repo.

Embedding CanIUse Tables

CanIUse tables are well formatted and provide a good amount of information in a relatively small space. If you would rather embed an interactive table into your post instead of a simple screenshot the CanIUse Embeds project is a great way to achieve this. The process for embedding tables involves just a few steps:

  1. Include the CanIUse Embeds script in your document:
    <script src="//cdn.jsdelivr.net/caniuse-embed/1.1.0/caniuse-embed.min.js"></script>

    The link above uses jsDelivr although you can also use your own CDN to deliver this file. Simply save the content and add it to your own server. In the case of KeyCDN, your link will look something like:

    <script src="//lorem-1c6b.kxcdn.com/caniuse-embed/1.1.0/caniuse-embed.min.js"></script>
  2. Choose the feature you want to show support for from the CanIUse Embeds site and select your browser versions preferences.caniuse choose feature
  3. Click the generate button and copy/paste the embed code where you want the support table to be displayed. The embed code for WebP image format would look something like this:
    <p class="ciu_embed" data-feature="webp" data-periods="future_1,current,past_1,past_2">
        <a href="http://caniuse.com/#feat=webp">Can I Use webp?</a> Data on support for the webp feature across the major browsers from caniuse.com.
    </p>

Summary

Overall, CanIUse is a great tool for determining which browsers and browser versions support a particular front-end technology. Hopefully, this post has given you a couple more options for viewing / displaying CanIUse information that you weren’t aware of before.