CSS @supports Rule

The CSS @supports rule checks if a browser supports a specific CSS property and executes the code block only if the condition is true.

Purpose: Acts as a conditional rule to apply styles based on browser support for a property.
Usage: Ensures fallback or alternative styling when a feature is not supported.

Syntax:

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

html

<!--Driver Code Starts-->

<!DOCTYPE html>
<html>
<head>
    <title>Supports</title>
    <style>
<!--Driver Code Ends-->

        @supports (display: flex) {
            div h1 {
                display: flex;
                justify-content: flex-start;
                color: green;
                border: 3px solid green;
                padding: 20px;
                font-size: 40px;
            }
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
    </div>
</body>
</html>

<!--Driver Code Ends-->

Keywords Used with @supports

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

Example: The not keyword applies styles when a specified condition is not supported, such as when display: flex is unavailable.

html

<!--Driver Code Starts-->

<!DOCTYPE html>
<html>
<head>
    <title>Supports</title>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
    </div>
</body>
</html>

<!--Driver Code Ends-->

Example: The and keyword applies the styles only when both display: flex and display: -webkit-flex are supported by the browser.

html

<!--Driver Code Starts-->

<!DOCTYPE html>
<html>
<head>
    <title>Supports</title>
    <style>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
    </div>
</body>
</html>

<!--Driver Code Ends-->

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

html

<!--Driver Code Starts-->

<!DOCTYPE html>
<html>
<head>
    <title>Supports</title>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
    </div>
</body>
</html>

<!--Driver Code Ends-->

Keywords Used with @supports

Explore