@supports 使 CSS 能夠執行 "功能查詢"。

所述 @supports 在規則不僅可以在一個 CSS 的頂層中使用，但也內部的任何 CSS 條件組在規則並且可以通過 CSS 對象模型接口來訪問 CSSSupportsRule。 @supports 由不同邏輯運算符組合一個或多個聲明組成。運算符的優先級可以用括號來推翻。

若支援 ( CSS 屬性 ) 則應用 { ... }

@supports (animation-name: test) {
    /* 當動畫支援 "未加前綴的 'animations' 屬性" 的時候應用以下 CSS */
    @keyframes {
        /* @supports 作為一個 CSS 條件組 at-rule, 他可包含其他相關 at-rules */
    }
}

若支援 (CSS 屬性) 或 (前綴)，則應用 { ... }

@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
     /* 支持 "perspective 透視" 时应用的以下 CSS，前缀放後面 */
}

若不支持 (某個屬性) 則應用 { ... }

@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    /* 应用特定的 CSS 进行模拟 text-align-last:justify */
}

支援 (自定義屬性) 則應用 { ... }

@supports (--foo: green) {
    body {
        color: green;
    }
}