Utils compat data (@hint/utils-compat-data)

This package allows you to easily query the data from mdn-browser-compat-data to learn about the support status of a feature.

The type of information you can query is explained below:

API

The supported datasets are CSS and HTML. Most of the exposed functionality uses a FeatureQuery to indicate the type of information you are querying. You can retrieve information for:

• Attributes:

export type AttributeQuery = {
    attribute: string;
    element?: string;
    value?: string;
};

• Elements:

export type ElementQuery = {
    element: string;
};

• Declarations:

export type DeclarationQuery = {
    property: string;
    value?: string;
};

• Rules:

export type RuleQuery = {
    rule: string;
};

• Selectors:

export type SelectorQuery = {
    selector: string;
};

Most of the functions accept a FeatureQuery and a list of browser ids to check. This package accepts two different formats of browsers ids: browserslist or MDN.

The friendly names and ids for each one are as follows:

| Browser name | Browserslist | MDN | | ------------ | ------------ | --------- | | Chrome | chrome | chrome | | Chrome Android | and_chr | chrome_android | | Edge | edge | edge | | Firefox | ff | firefox | | Firefox for Android | and_ff | firefox_android | | Internet Explorer | ie | ie | | Opera | opera | opera | | Opera Android | op_mobile | opera_android | | QQ Android | and_qq | qq_android | | Safari | safari | safari | | Safari iOS | ios_saf | safari_ios | | Samsung Internet | samsung | samgsunginternet_android | | UC Android | and_uc | uc_android | | Webview Android | android | webview_android |

You can check the next sections for example on how to use FeatureQuerys and list of browsers.

getFriendlyName

Get the friendly name of a browser from an id.

import { getFriendlyName } from '@hint/utils-compat-data';

console.log(getFriendlyName('and_ff')); // "Firefox for Android"
console.log(getFriendlyName('ie')); // "Internet Explorer"

getUnsupported

Filter the list of given browsers to return those that do not support the given CSS or HTML feature.

It accepts a FeatureQuery and a list of browsers.

import { getUnsupported } from '@hint/utils-compat-data';

console.log(getUnsupported({ element: 'details' }, ['chrome 74', 'ie 11'])); // ['ie 11']
console.log(getUnsupported(
    {
        attribute: 'rel',
        element: 'link',
        value: 'noopener'
    },
    ['edge 12', 'firefox 63'])); // ['edge 12']

getUnsupportedDetails

Get browsers without support with details on when support was added or removed.

Similar to getUnsupported, but returns an object with both a list of:

• browsers which were unsupported and a map of browsers to browserDetails
• to get additional information (e.g. what version the feature is added in).

It accepts a FeatureQuery and a list of browsers.

import { getUnsupportedDetails } from '@hint/utils-compat-data';

const unsupportedInfo = getUnsupportedDetails(
    { property: 'appearance' },
    ['chrome 75', 'firefox 63']);

unsupportedInfo will look something like the following:

{
    "browsers": [ "chrome 75", "firefox 63" ],
    "details": {
        "chrome 75": {
            "alternative": {
                "name": "-webkit-appearance",
                "versionAdded": 1
            }
        },
        "firefox 63": {
            "alternative": {
                "name": "-moz-appearance",
                "versionAdded": 1
            }
        }
    }
}

Note: details is a Map that uses the browser versions as keys.

getSupported

Filters the list of browsers with those that support the given CSS or HTML feature. This is the opposite of getUnsupported.

It accepts a FeatureQuery and a list of browsers.

import { getSupported } from '@hint/utils-compat-data';

console.log(getSupported({ element: 'details' }, ['chrome 74', 'ie 11'])); // ['chrome 74']
console.log(getSupported(
    {
        attribute: 'rel',
        element: 'link',
        value: 'noopener'
    },
    ['edge 12', 'firefox 63'])); // ['firefox 63']

isSupported

Query MDN for support of CSS or HTML features. It returns true if all the browsers support it, false otherwise.

It accepts a FeatureQuery and a list of browsers.

import { isSupported } from '@hint/utils-compat-data';

console.log(isSupported({ element: 'details' }, ['ie 11'])); // false