Show CSS browser support data with css-browser-support

If you want to include Browser Support tables on your site, you can use this package by Stephanie Eckles

Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentages.

Per feature that ask it, you get back an object with the browsers and the data:

{
  'aspect-ratio': {
    chrome: {
      sinceVersion: '88',
      flagged: true,
      globalSupport: 22.46,
      browserTitle: 'Chrome'
    },
    chrome_android: {
      sinceVersion: '88',
      flagged: false,
      globalSupport: 41.34,
      browserTitle: 'Chrome Android'
    },
    edge: {
      sinceVersion: '88',
      flagged: false,
      globalSupport: 3.88,
      browserTitle: 'Edge'
    },
    // ... continued for all browsers
    globalSupport: 86.49
  }
}

Stephanie also released a plugin for use with 11ty.

css-browser-support

Do note that if you statically build your site, you will have to update dependencies and rebuild regularly to have up-to-date support data

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 …)

Leave a comment

Your email address will not be published.

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