demo · v143

Custom @-rule Feature Detection Builder

Build progressive-enhancement wrappers for every at-rule you use. Check support live in your browser, write custom probes, and generate copy-pasteable @supports at-rule(…) snippets.

Preset at-rule checker

Click Check support on any row to probe your current browser in real time using CSS.supports("at-rule(@name)").

Custom at-rule probe

Type any at-rule name (with or without the @) to test support in this browser.

Progressive enhancement snippet generator

Select the at-rules your CSS uses

The tool wraps each rule's content in an @supports at-rule(…) guard and outputs a ready-to-paste block.


      
    

  


  
Browser compatibility matrix

  
Known first-ship milestones for each at-rule across major engines (based on public release data).

  

    
      

        at-rule
        Chrome
        Firefox
        Safari
      

    
    
  


  
Live CSS editor

  

    
Write CSS using @supports at-rule(…) syntax

    
The rendered output in the preview updates when you click Apply. Uses a real <style> injection so you see exactly what the browser does.

    

      

        
        
      

      

        

          
This box is styled by the @supports block above. If @layer is supported, it turns blue; otherwise red.

        

      

    

  


  

    
How it works

    
    
      
  1. The at-rule() function inside @supports is new in Chrome 143. It returns true if the browser understands the named at-rule as a valid CSS construct.
    2. 
      
  2. In JavaScript, CSS.supports("at-rule(@layer)") mirrors this — returns a boolean you can branch on.
    3. 
      
  3. For progressive enhancement, wrap declarations in @supports at-rule(@property) { … } so only browsers that parse @property apply them.
    4. 
    

  


  

    
See also