# supports at-rule

The `@supports` at-rule styles elements based on the features supported by the browser. In this at-rule you can create conditions using logical operators `not`, `and`, `or`.

## Syntax

`@supports condition { }`

## Example

Let's set the condition that if your browser supports the `display` property with the `flex` value, then only the paragraph with the corresponding text will be displayed, and its font color will be blue:

`<p class="yes">Your browser support display: flex.</p> <p class="no">Your browser does not support display: flex.</p>` `@supports (display: flex) { .no { display: none; } p { color: #467CBC; } } @supports not (display: flex) { .yes { display: none; } }`

:

## See also

- the `@import` at-rule
  that imports a CSS file
- the `@media` at-rule
  that specifies a style for a media type
- the `!important` flag
  that sets a style precedence

← →
↑
en ru