hint tools

Usage no npm install needed!

<script type="module">
  import hintUtilsCompatData from 'https://cdn.skypack.dev/@hint/utils-compat-data';


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:


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.


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"


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']
        attribute: 'rel',
        element: 'link',
        value: 'noopener'
    ['edge 12', 'firefox 63'])); // ['edge 12']


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.


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']
        attribute: 'rel',
        element: 'link',
        value: 'noopener'
    ['edge 12', 'firefox 63'])); // ['firefox 63']


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