Informe uma propriedade e um valor, combine dois testes com and/or, negue a consulta e copie o bloco @supports. O veredito vem do navegador que exibe esta página.
Funciona localmente no seu navegadorO gerador transforma uma propriedade e um valor em um teste de recursos CSS e o envolve em um bloco @supports. Um segundo teste pode entrar com and ou or, a consulta inteira pode ser negada e o veredito é dado pelo CSS.supports() no navegador que está exibindo a página — só neste navegador, não no dos visitantes.
Cinco predefinições cobrem os testes mais comuns: display: grid, container-type: inline-size, color: oklch(60% 0.2 140), backdrop-filter: blur(8px) e o teste de seletor selector(:has(*)). Escolher uma preenche propriedade e valor e zera o combinador; qualquer edição depois muda a lista para Custom.
selector(), font-tech() e font-format() são testes completos por si sós: digite selector(:has(*)) ou font-tech(color-COLRv1) no campo de propriedade e o campo de valor não participa. Um par propriedade/valor só é envolvido como (property: value) quando os dois campos estão preenchidos.
Propriedade vazia ou valor vazio deixam a consulta vazia: o veredito mostra “Ainda sem condição” e a exportação fica vazia em vez de enviar um bloco (: ) malformado, que era o que a página produzia antes desta passagem. A negação segue a mesma regra: @supports not (property: value) vale quando a declaração não tem suporte, incluindo propriedades desconhecidas.
O CSS.supports() roda na página, então o veredito descreve o navegador que você está usando e nada mais. Na medição, o Chrome 153 respondeu true para (display: grid), (container-type: inline-size), (color: oklch(60% 0.2 140)), (backdrop-filter: blur(8px)) e selector(:has(*)); um navegador mais antigo mostraria outros vereditos na mesma página.
Veredito positivo significa que a condição é analisada e tem suporte aqui; não é uma tabela de compatibilidade para o seu público. Mantenha uma declaração simples antes do bloco @supports: os navegadores que falharem no teste usam essa declaração.
O bloco exportado é @supports <condição> { <regras> }: a condição sai exatamente como foi testada e cada linha do campo de regras é indentada em dois espaços. O texto das regras é copiado como digitado, comentários e declarações de fallback incluídos, e Copiar CSS coloca o painel de código na área de transferência caractere por caractere.
Tudo roda dentro da página. Digitação, predefinições, combinador, negação, Copiar CSS e Redefinir não enviaram nenhuma requisição de rede na medição (en, fr e ja) e a ferramenta continua funcionando offline; a única requisição de terceiros na página vem da tag compartilhada de análise.