CSS | @supports Rule

Last Updated : 23 Aug, 2022

The CSS @supports rule specifies a support condition for feature support on a browser, i.e. a specific CSS style property can be specified as a condition to check for its support on the browser and if the condition is true then the block of code is executed else not. It is a CSS conditional rule and comes under CSS at-rule.

Syntax:

@supports (condition) {
    //  Style you want to apply
}

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>Supports</title>
    <style>
        @supports (display: flex) {
            div h1 {
                display: flex;
                justify-content: flex-start;
                color: green;
                border: 3px solid green;
                padding: 20px;
                font-size: 40px;
            }
        }
    </style>
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
    </div>
</body>
</html>

Output:

In the above example, the display flex is supported by browsers, so the styling is applied. There are 3 keywords that can be used with @supports. These are:

not
and
or

not keyword: The ‘not’ keyword can be used to check the opposite of the condition specifies. To explain that keyword, below is an example to apply the styling if there is no support for display being flex.

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>Supports</title>
    <style>
        @supports not (display: flex) {
            div h1 {
                display: flex;
                justify-content: flex-start;
                color: green;
                border: 3px solid green;
                padding: 20px;
                font-size: 40px;
            }
        }
    </style>
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
    </div>
</body>
</html>

Output:

In the above example, the styling is not applied because the browser supports display as flex. and keyword: The ‘and’ keyword is used to check two conditions and if both are true then the block of style is executed.

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>Supports</title>
    <style>
        @supports (display: flex) and (display: -webkit-flex) {
            div h1 {
                display: flex;
                justify-content: flex-start;
                color: green;
                border: 8px solid green;
                padding: 20px;
                font-size: 35px;
            }
        }
    </style>
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
    </div>
</body>
</html>

Output:

or keyword: The ‘or’ keyword is used when we want to execute the block of style when even one of the multiple conditions specified is true.

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>Supports</title>
    <style>
        @supports (display: flex) or (display: -webkit-flex) {
            div h1 {
                display: flex;
                justify-content: flex-start;
                color: green;
                border: 8px solid green;
                padding: 20px;
                font-size: 35px;
            }
        }
    </style>
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
    </div>
</body>
</html>