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

Overview

css-browser-support

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

Usage

Install the package:

npm i --save-dev css-browser-support

Then import it into your project:

const { cssBrowserSupport } = require("css-browser-support");

And call it by passing a string or an array of strings containing the CSS features you'd like to query support:

cssBrowserSupport([
  "aspect-ratio",
  "margin-inline",
  "border-radius",
  ":nth-last-child",
  "@layer",
  "gap",
]);

Returns an object that includes each browser for which support is available, example for aspect-ratio:

{
  '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
  }
}

Supported CSS features

The API is intended to work for passing features as you would write them in CSS. As such, a few things will not be available if they exist on MDN under an expanded name. For example, > would be available as child.

Additionally, some features are nested and may be missed by the API. Exceptions are grid features (ex. repeat()), and color types (ex. color-contrast()) which have been explicitly included.

Review the data from MDN:

Special case: gap

Since gap is a popular feature known to have been implemented for both flexbox and grid at different times, the API splits a request for gap to return support for both implementations.

In your implementation, you'll want to check for an input of gap and then update to handle for the two returned keys of gap - flexbox and gap - grid.

Example:

if (queries.includes("gap")) {
  queries.splice(queries.indexOf("gap"), 1);
  queries.push("gap - flexbox");
  queries.push("gap - grid");
}

Implementing the data

  • if your implementation accepts properties with values, ex margin-inline: auto, you are responsible for removing values before passing the property to the API
  • due to the data returned from MDN, characters like : are stripped from selectors and pseudo-elements, and @ is removed from at-rule, so for example @layer will be found in returned data as layer

For an example on using this data, see my Eleventy plugin implementation: @11tyrocks/eleventy-plugin-css-browser-support

Browser list

You can also import the full browser list as BROWSERS:

const { cssBrowserSupport, BROWSERS } = require("css-browser-support");
View full browser list

The list is as follows:

[
  "chrome",
  "chrome_android",
  "edge",
  "firefox",
  "firefox_android",
  "ie",
  "opera",
  "safari",
  "safari_ios",
  "samsunginternet_android",
];

Credits

Two packages are being used to obtain support data:

You might also like...

This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

Capstone M2: Music App This project is a Web application based on the music API Napster built with ES6, HTML and CSS and it is a SPA. This API provide

Aug 29, 2022

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype.

Dec 26, 2022

Get started on Remix with TypeScript and Tailwind CSS in seconds

remix-typescript-tailwind-quickstart Get started on Remix with TypeScript and Tailwind CSS in seconds. This is an example setup of Remix building on t

Mar 16, 2022

A Node.js microservice to store and query time series data

Time series storage microservice This is a simple Node.js application which allows the storage and query of time series datasets in an InfluxDB 2.0 in

Apr 25, 2022

The Trino datasource allows to query and visualize Trino data from within Grafana.

Trino Grafana Data Source Plugin The Trino datasource allows to query and visualize Trino data from within Grafana. Getting started Drop this into Gra

Nov 3, 2022

A movie schema sandbox for playing with EdgeDB and the EdgeQL query builder, pre-loaded with MCU data

The EdgeDB MCU sandbox đŸŠč This is a sandbox for playing with EdgeDB and the EdgeQL query builder. It includes a simple movie database schema (dbschema

Nov 9, 2022

logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq-custom-files custom.js and custom.css utilities for Logseq. current version v20220331 query table view : add handles on the query table headers

Dec 7, 2022

A complete media query framework for CSS, to apply specific properties in specific screen

A complete media query framework for CSS, to apply specific properties in specific screen

A complete media query framework for CSS, to apply specific properties in specific screen Note: Size of every media query is `50px, 100px, 150px, 200p

Aug 23, 2022

The Remix version of the fakebooks app demonstrated on https://remix.run. Check out the CRA version: https://github.com/kentcdodds/fakebooks-cra

Remix Fakebooks App This is a (very) simple implementation of the fakebooks mock app demonstrated on remix.run. There is no database, but there is an

Dec 22, 2022
Comments
  • Flags not set correctly

    Flags not set correctly

    For example: When you run browser support for has() the data suggests that :has() is supported in Firefox since v103 behind no flag. That's not correct.

    {
      has: {
        firefox: {
          sinceVersion: '103',
          flagged: false,
          globalSupport: 2.21,
          browserTitle: 'Firefox'
        }
    }
    
    opened by matuzo 0
Owner
Stephanie Eckles
đŸ‘©â€đŸ’» (she/her) ModernCSS.dev, StyleStage.dev, Front-end focused SWE, egghead instructor, mom
Stephanie Eckles
List all browsers compat data from MDN and filter with browserlist.

mdn-compat-browserlist List all browsers compat data from MDN and filter with browserlist. Features Support filter all browserlist queries List all br

SerKo 2 Apr 17, 2022
Emojion - Create and share images combined emoji and text

?? Emojion Emojion is a web application to create and share images combined an emoji and text. Your contribution is welcome! Concepts Simple Since the

ajfAfg 4 Oct 14, 2022
caniuse.com but for PHP - a searchable list of new and deprecated features in recent PHP versions

caniphp.com caniphp.com is like caniuse.com but for PHP features. It's a simple search of PHP features that added, deprecated and removed in recent ve

Ross Wintle 95 Dec 25, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till mÀnniskor pÄ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
CLI tool to update caniuse-lite to refresh target browsers from Browserslist config

Update Browserslist DB CLI tool to update caniuse-lite with browsers DB from Browserslist config. Some queries like last 2 version or >1% depends on a

Browserslist 31 Dec 30, 2022
A simple query builder, it will helps to develop DSL query for Elasticsearch

Elasticsearch Dynamic Query Builder A simple query builder, it will helps to develop DSL query for elasticsearch Installation You can start it from np

Hashemi Rafsan 4 Nov 20, 2022
Persistent key/value data storage for your Browser and/or PWA, promisified, including file support and service worker support, all with IndexedDB. Perfectly suitable for your next (PWA) app.

BrowstorJS ?? ?? ?? Persistent key/value data storage for your Browser and/or PWA, promisified, including file support and service worker support, all

Nullix 8 Aug 5, 2022
Pull sensitive data from users on windows including discord tokens and chrome data.

⭐ For a ?? Pegasus Pull sensitive data from users on windows including discord tokens and chrome data. Features ?? Discord tokens ?? Geolocation data

Addi 43 Dec 24, 2022