References

Supports

The @supports CSS at-rule lets you specify declarations that depend on a browser’s support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

Syntax

<div class="bg:gray-1@supports(<stylesheet>)">...</div>

Basic usage

Property support

<div class="bg:gray-1@supports(backdrop-filter:none)">...</div>

Selector support

<div class="pr:10@supports_selector(::scrollbar)">...</div>

Operator

Not Operator

<div class="pr:10@supports(backdrop-filter:none)not(display:inline)">...</div>

And Operator

<div class="pr:10@supports(backdrop-filter:none)and(display:inline)">...</div>

Or Operator

<div class="pr:10@supports(backdrop-filter:none)or(display:inline)">...</div>

Hello world

.font\:heavy {
    font-weight: 900
}

@media print {
    .hide\@print {
        display: none
    }
}

@media (min-width:1024px) {
    .font\:24\@md {
        font-size: 1.5rem
    }
}

automatically