What it is: @supports asks the browser “do you understand this CSS?” and applies a block of styles only if the answer is yes. It is the safe way to use new features, because older browsers just use your fallback.

Basic syntax

css">.lotgrafix-layout {
    display: block;
}

@supports ( display: grid ) {
    .lotgrafix-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
    }
}

Use not to write the fallback

.lotgrafix-glass {
    background: rgba( 255, 255, 255, 0.15 );
    backdrop-filter: blur( 12px );
}

@supports not ( backdrop-filter: blur( 1px ) ) {
    .lotgrafix-glass {
        background: rgba( 255, 255, 255, 0.9 );
    }
}

Combine conditions with and, or

@supports ( display: grid ) and ( gap: 20px ) {
    .lotgrafix-cards {
        display: grid;
        gap: 20px;
    }
}

@supports ( -webkit-backdrop-filter: blur( 1px ) ) or ( backdrop-filter: blur( 1px ) ) {
    .lotgrafix-header {
        backdrop-filter: blur( 10px );
    }
}

Test a selector with selector()

@supports selector( :has( a ) ) {
    .lotgrafix-card:has( img ) {
        display: grid;
    }
}

Test it from JavaScript

if ( CSS.supports( 'animation-timeline', 'view()' ) ) {
    document.documentElement.classList.add( 'has-scroll-animations' );
}

Good habits

• Write the basic version first, then improve it inside @supports.
• Browsers that ignore a property you wrote outside @supports simply skip that line, so many features do not need the rule at all. Use it when the old and new styles would conflict.
• Combine it with @layer to keep your fallbacks organized.