Probador de CSS @supports

Pega cualquier condición @supports de CSS y mira si el navegador actual la cumple. La página prueba cada sub-condición de forma independiente vía CSS.supports() para que veas exactamente qué brazo de un and u or se activa — y cuál no. Vista previa en vivo de cómo el navegador resolvería display: grid, :has(), aspect-ratio, container queries y cualquier otra característica moderna. Puro lado cliente, sin subir nada.

Envuelve cada sub-condición entre paréntesis. Usa and / or / not como siempre. Formas con llamada a función: selector(:has(a)), font-tech(opentype), font-format(woff2).

Veredicto —
Forma canónica —

—

Sub-condiciones

Cada hoja se prueba de forma independiente contra CSS.supports(). Pasa el cursor sobre una tarjeta para ver la cadena de prueba cruda que recibe el navegador.

  1. Aún no se analizaron sub-condiciones.

Pruebas de referencia

Haz clic en cualquier fila para cargar la prueba en el campo de arriba. Úsalas para probar las cuatro formas de hoja de la gramática @supports (declaración, selector(), font-tech(), font-format()) sin tener que escribirlas desde cero.

Tipo Prueba Qué comprueba Este navegador
Sobre la gramática

La gramática de la condición @supports está definida en la especificación CSS Conditional Rules Level 3. 

supports-condition  = not supports-in-parens
                     | supports-in-parens [ and supports-in-parens ]*
                     | supports-in-parens [ or  supports-in-parens ]*

supports-in-parens  = ( supports-condition )
                    | ( declaration )
                    | selector( complex-selector )
                    | font-tech( font-tech-ident# )
                    | font-format( font-format-ident# )

not liga más fuerte, luego and, y después or. font-tech prueba la tecnología de renderizado de fuentes (COLRv1, variaciones, OpenType) y font-format prueba los formatos de archivo (woff2, truetype). Ambos son raros en el trabajo diario; las formas declaration y selector() cubren ~99 % del uso en producción.