Show CSS browser support data with css-browser-support
Written by Bram.us
/ Original link
on Jul. 7, 2022
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.
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