How to Embed CanIUse In Your Blog or Website

30 April, 2020 #tools #hugo

CanIUse.com is an invaluable source of information for web developers providing cross browser information on the latest HTML, CSS and JavaScript specs. However, it doesn’t provide an official embed for displaying this excellent information on your own website.

Luckily @IreAderinokun has created an excellent unofficial CanIUse embed.

It uses the live data from CanIUse, so it’s always kept up to date.

This is excellent news if you are writing blog articles about front-end web development, like Codeboosh, or if you are writing documentation.

Once you fill in the form on the CanIUse embed website, it will give you some HTML to embed. The example below is for CSS Grid.

<script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js"></script>
<p class="ciu_embed" data-feature="css-grid" data-periods="future_1,current,past_1,past_2" data-accessible-colours="false">
	<a href="http://caniuse.com/#feat=css-grid">
		<picture>
			<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-grid.webp">
			<img src="https://caniuse.bitsofco.de/image/css-grid.png" alt="Data on support for the css-grid feature across the major browsers from caniuse.com">
		</picture>
	</a>
</p>

And here is what it looks like on your page.

Data on support for the css-grid feature across the major browsers from caniuse.com

Embedding in your blog

Codeboosh uses the static website generator Hugo, which makes use of shortcodes for embedding cool stuff into markdown.

To create a shortcode for CanIUse, create a file called caniuse.html in the shortcodes folder of your Hugo theme and add the following.

{{/* DEFAULTS */}}
{{ $feature := "lazyload" }}
{{ $periods := "future_1,current,past_1,past_2" }}
{{ $accessibleColours := "true" }}

<script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js"></script>
<div class="ciu_embed" 
data-feature="{{ or (.Get "feature") $feature }}" 
data-periods="{{ or (.Get "periods") $periods }}" 
data-accessible-colours="{{ or (.Get "accessibleColours") $accessibleColours }}">
    <a href="http://caniuse.com/#feat={{ or (.Get "feature") $feature }}">
    <picture>
    <source type="image/webp" srcset="https://caniuse.bitsofco.de/image/{{ or (.Get "feature") $feature }}.webp">
    <img src="https://caniuse.bitsofco.de/image/{{ or (.Get "feature") $feature }}.png" alt="Data on support for the {{ or (.Get "feature") $feature }} feature across the major browsers from caniuse.com">
    </picture>
    </a>
</div>

You can then use it in a blog post like so.

{{< caniuse feature="css-grid"  >}}

Codeboosh is definitely going to make use of this excellent resource.