← All Tools

CSS @supports Builder

Compose feature queries clause by clause — combine property tests with and, or, not, test selector(:has(> *)), font-tech(), and font-format(), see whether your current browser supports each clause live via CSS.supports(), and copy a clean rule for your stylesheet.

clauses 0 supported in this browser 0 rule matches here — 

      

        
        
      

      
      
The @supports block below will style this element if your browser passes all clauses.

      
    

  






  
Presets

  

    
    
    
    
    
    
    
    
    
    
    
  






  
Clause syntax reference

  

    
Test typeSyntaxExample

    
      
property: value(prop: value)(display: grid)

      
property exists(prop: revert)(accent-color: revert)

      
selector()selector(...)selector(:has(> img))

      
font-tech()font-tech(...)font-tech(color-COLRv1)

      
font-format()font-format(...)font-format(woff2)

      
notnot (...)not (display: grid)

      
and / or(...) and (...)(display: grid) and (gap: 1rem)

    
  

  
A query is valid when the entire condition is a single supports-condition. Inside @supports, and / or can't be mixed at the same level without parentheses — the builder wraps clauses for you to stay valid.