CSS | @supports Rule

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

    Supported Browsers: The browsers supported by CSS @supports rule property are listed below:

    • Google Chrome
    • Microsoft Edge
    • Firefox
    • Safari
    • Opera


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.