Introduce una propiedad y un valor, combina dos pruebas con and/or, niega la consulta y copia el bloque @supports. El veredicto lo da el navegador que muestra esta página.
Se ejecuta localmente en tu navegadorEl generador convierte una propiedad y un valor en una prueba de funciones CSS y la envuelve en un bloque @supports. Una segunda prueba puede unirse con and u or, la consulta completa puede negarse y el veredicto lo emite CSS.supports() en el navegador que muestra la página: solo este navegador, no el de tus visitantes.
Cinco preajustes cubren las pruebas más habituales: display: grid, container-type: inline-size, color: oklch(60% 0.2 140), backdrop-filter: blur(8px) y la prueba de selector selector(:has(*)). Al elegir uno se rellenan propiedad y valor y se reinicia el combinador; cualquier cambio posterior pasa la lista a Custom.
selector(), font-tech() y font-format() son pruebas completas por sí mismas: escribe selector(:has(*)) o font-tech(color-COLRv1) en el campo de propiedad y el campo de valor no participa. Un par propiedad/valor solo se envuelve como (property: value) cuando ambos campos están rellenos.
Una propiedad vacía o un valor vacío dejan la consulta vacía: el veredicto muestra «Aún no hay condición» y la exportación queda vacía en lugar de enviar un bloque (: ) mal formado, que es lo que producía la página antes de esta pasada. La negación es igual de honesta: @supports not (property: value) se cumple cuando la declaración no está soportada, incluidas las propiedades desconocidas.
CSS.supports() se ejecuta en la página, así que el veredicto describe el navegador que usas y nada más. En la medición, Chrome 153 respondió true para (display: grid), (container-type: inline-size), (color: oklch(60% 0.2 140)), (backdrop-filter: blur(8px)) y selector(:has(*)); un navegador más antiguo mostraría otros veredictos en la misma página.
Un veredicto verde significa que la condición se analiza y está soportada aquí; no es una tabla de compatibilidad para tu audiencia. Deja una declaración simple antes del bloque @supports y los navegadores que fallen la prueba usarán esa.
El bloque exportado es @supports <condición> { <reglas> }: la condición se imprime tal como se prueba y cada línea del campo de reglas se indenta dos espacios. El texto de las reglas se copia tal como se escribió, con comentarios y declaraciones de reserva, y Copiar CSS pone el panel de código en el portapapeles carácter por carácter.
Todo ocurre dentro de la página. Escribir, los preajustes, el combinador, la negación, Copiar CSS y Restablecer no enviaron ninguna petición de red en la medición (en, fr y ja) y la herramienta sigue funcionando sin conexión; la única petición a terceros de la página es la etiqueta compartida de analítica.