Extending the Availability of CanIUse
What is CanIUse?
CanIUse is an extremely useful tool for quickly visualizing which frontend technologies are compatible with which browsers. You've likely seen us include various CanIUse support table screenshots in our blog. They help give readers a quick look at how compatible a particular technology is before implementing it into their own setup.
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 is 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 frontend technology by entering caniuse proceeded by the name of the technology, for example:
caniuse preload
There are also many options which can be used based on personal preference and information required. These include things such as:
--short, -sShort output: show browsers on one line and don't display notes or description (default when displaying multiple results) [boolean]--long, -lLong output: show more information (default when displaying a single result) [boolean]--oneline, -1One-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:
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="//example-hexid.kxcdn.com/caniuse-embed/1.1.0/caniuse-embed.min.js"></script>Choose the feature you want to show support for from the CanIUse Embeds site and select your browser versions preferences.
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="https://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 frontend technology. Hopefully, this post has given you a couple more options for viewing or displaying CanIUse information that you weren't aware of before.