Embeddable CanIUse Images

2 Comments on Embeddable CanIUse Images

Ire Aderinokun, author of the CanIUse Embed, has added an extra option where you can embed static images of features as mentioned on CanIUse.com. The images are generated using Puppeteer, are stored on Cloudinary, and are updated daily using Heroku Scheduler.

What I wanted to do was have a URL linking to an image (hosted on Cloudinary) that I would periodically update with the support table for that feature. For example, to get the latest image of CSS Grid support, anyone could use this URL: https://caniuse.bitsofco.de/image/css-grid.png

A detailed writeup on how she created those images (and how she updates) takes you through the whole process.

How I created 488 “live images” →

💁‍♂️ You can also check CanIUse data using the command line tool caniuse-cmd

🔗 Related: Building a Website Screenshot API with Puppeteer and Google Cloud Functions →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

2 Comments

  1. Pingback: CSS `:nth-of-class` selector – Bram.us
  2. Pingback: Spacing grid/flexbox items in CSS with the gap property – Bram.us

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.