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
}

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:

• not
• and
• or

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

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

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.