What Is @supports In CSS 2023

CSS @At-Rules Explanation
Interview
By XiaoXin
A Bit Randomly

In Android, you can use several different mechanisms to communicate between threads. Some common ways to communicate between threads in Android are: Using Handler and Message objects: You can use a Handler object to send M... Read 4 Ways To Communicate Between Threads In Android

Main Contents

What Is @supports In CSS

The @supports at-rule in CSS allows you to specify CSS declarations that depend on a browser's support for CSS features. This is commonly known as a feature query, and it allows you to write styles that are only applied if the browser supports the specified CSS features.

.flex-container > * {
    padding: 0.3em;
    list-style-type: none;
    text-shadow: 0px 0px 2px red;
    float: left;
}

@supports (display: flex) {
    .flex-container > * {
        text-shadow: 0px 0px 2px blue;
        float: none;
    }

    .flex-container {
        display: flex;
    }
}

To use the @supports at-rule, you specify a condition after the @supports keyword, which is a media query that tests whether the browser supports the specified CSS features. You can then include a block of CSS declarations inside the @supports rule, which will only be applied if the browser supports the specified features. This allows you to create styles that are adaptable and flexible, and that can take advantage of newer CSS features without causing problems for older browsers that do not support those features.

The @supports at-rule must be placed at the top level of your CSS code, or nested inside any other conditional group at-rule. This ensures that the feature query is properly evaluated and the appropriate styles are applied to your document.

Please Share This Article Thank You!

Parts of CSS @At-Rules Explanation
How To Use Input Accept Attribute In HTML

The accept attribute in HTML is used to specify the types of files that a file input field can accept. This allows you to restrict the types of files that can be selected and uploaded through the file input field, ensuring...

What Is @property In CSS

The @property at-rule in CSS is part of the CSS Houdini umbrella of APIs, which allows developers to explicitly define custom CSS properties and control their behavior. The @property rule allows you to define the type of a...