Skip to content
Related Articles

Related Articles

Improve Article

CSS | @supports Rule

  • Last Updated : 21 Nov, 2019

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:




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




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




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




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

    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
  • Recommended Articles
    Page :