This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
A JS Foundation Project

New CSS features

New CSS features (compat-api/css-next)

What does the hint check?

compat-api/css-next checks if the CSS features used are supported in the targeted browsers.

Why is this important?

New CSS features are being implemented all the time. It’s tricky knowing when a feature has become standard among all browsers, when it needs a prefix, and when it is not supported. This hint will check if you are using features that are not supported by your targeted browsers, taking into account prefixes.

Examples that trigger the hint

The box-flex was never added for any version of Internet Explorer. If Internet Explorer is being targeted, using the box-flex property will trigger the hint.

.example {
    box-flex: 1;
}

The flex value of the display property was added for versions of Chrome 29 and onwards. Using display: flex while targeting Chrome browsers of versions less than 29 will trigger the hint.

.example {
    display: flex;
}

The at-rule keyframes was added for versions of Chrome 43 and onwards. Using @keyframes while targeting Chrome browsers of versions less than 43 will trigger the hint.

@keyframes name {
    0% {
        left: 0%;
    }
}

The prefixed flex value of the display property was added for versions of Chrome 21 and onwards. Using display: -webkit-flex while targeting Chrome browsers of versions less than 21 will trigger the hint.

.example {
    display: -webkit-flex;
}

Examples that pass the hint

The charset at-rule was added from Chrome version 2. It should pass the hint for versions of Chrome from 2 onwards.

@charset "UTF-8";

The box-flex property was added with prefixes for Chrome, Firefox, Opera, and Safari. MDN compat data does not specify which versions they were added in, asserting that the property is supported with prefixes, regardless of version. If box-flex is used with prefixes, it should pass the hint for these browsers.

.example {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
}

The capitalize property of text-transform does not have any information about when it was added to various browsers according to the MDN compat data. No error is thrown if there is no information available on when, or if, the feature was added.

.example {
    text-transform: capitalize;
}

Can the hint be configured?

This hint throws errors for CSS features that are not supported in any of the targeted browsers listed.

The targeted browsers can be defined in either the .hintrc or package.json file. This property follows the same convention as browserslist.

{
    "browserslist": [
        "> 1%",
        "last 2 versions"
    ]
}

ignore can be used to specify a list of CSS features to be ignored. The default value is ['cursor'].

In the .hintrc file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "compat-api/css-next": ["error", {
            "ignore": ["border-radius", "box-lines"],
        }],
        ...
    },
    ...
}

enable can be used to specify a list of CSS features to be checked even if they are included in the ignore list. The default value is [].

In the .hintrc file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "compat-api/css-next": ["error", {
            "enable": ["cursor"],
        }],
        ...
    },
    ...
}

Further Reading