Para adotar CSS moderno em produção, a pergunta não é apenas se a sintaxe funciona na versão mais recente do seu navegador. É se o recurso está disponível nos navegadores que seus usuários realmente utilizam e se o conteúdo continua acessível quando ele falta. Em 23 de setembro de 2026, o catálogo Baseline 2026 já inclui recursos como field-sizing, consultas de estilo de contêiner, :open e contrast-color().
O caminho mais seguro é manter o comportamento indispensável em HTML e CSS compatíveis, adicionar os novos recursos como melhoria progressiva e reservar testes mais rigorosos às funções que afetam formulários, leitura, navegação e posicionamento de controles.
O que Baseline 2026 afirma, e o que não afirma
Newly available significa que um recurso passou a funcionar no conjunto principal de navegadores coberto pelo Baseline, em suas versões atuais. Widely available significa que se passaram pelo menos 30 meses desde a interoperabilidade inicial. Um recurso novo em 2026 ainda não é, apenas por isso, amplamente disponível.
O conjunto de referência inclui Chrome no desktop e Android, Edge no desktop, Firefox no desktop e Android, além de Safari no macOS e iOS. A presença de um recurso no catálogo não elimina diferenças entre versões antigas, WebViews embarcadas ou ambientes de manutenção prolongada. Consulte a definição oficial do Baseline e compare-a com os dados de uso do seu produto.
Uma meta por ano, como baseline 2024, é fixa quanto ao conjunto de recursos daquele ano; metas móveis, como baseline widely available, evoluem. A documentação do Browserslist com Baseline explica essas consultas. Não configure baseline 2026 automaticamente se o seu contrato de suporte inclui versões anteriores.
Oito recursos e o plano de compatibilidade
| Recurso | Problema que resolve | Fallback para legado | Ponto de atenção |
|---|---|---|---|
| field-sizing | Campos de comentário e mensagem. | Altura fixa ou com rolagem; script se necessário. | Revise campos longos, overflow, layouts compactos e dispositivos com teclado virtual. |
| Container style queries | Temas de componentes reutilizáveis. | Estilo base e classe de tema no ancestral. | Evite depender apenas da consulta para contraste, legibilidade ou estados essenciais. |
| Acordeões e caixas de diálogo. | details[open] e dialog[open]. | Não substitua semântica nativa e estados acessíveis por uma aparência dependente da pseudoclasse. | |
| contrast-color() | Selos e componentes com paleta controlada. | Cor fixa e teste real de contraste. | Não trate o resultado como certificação automática de acessibilidade. |
| @scope | Componentes repetidos e CSS modular. | Seletores de classe prefixados. | Reveja especificidade e limites da subárvore antes de migrar CSS já consolidado. |
| Ancoragem CSS e @position-try | Dicas e painéis perto de um botão. | Conteúdo no fluxo normal ou posição convencional. | Evite que menus críticos fiquem ocultos fora da tela em WebViews e navegadores antigos. |
| crisp-edges | Ícones raster e pixel art ampliados. | pixelated ou ativo com resolução adequada. | Não use para fotografias comuns, que podem ganhar aspecto serrilhado. |
| text-decoration-skip-ink | Links em textos com sublinhado. | auto e sublinhado convencional. | É refinamento tipográfico, não justificativa para bloquear navegadores legados. |
Como implementar sem comprometer a experiência
field-sizing: formulários que acompanham o conteúdo
Resolve a expansão de campos de texto sem depender sempre de JavaScript. O valor content permite que o controle ajuste seu tamanho ao conteúdo. É Newly available desde junho de 2026, não uma garantia para todas as versões ainda em uso. MDN.
Exemplo compacto de CSS: textarea { min-height: 6rem; max-height: 20rem; overflow: auto; field-sizing: content; }
Fallback: Comece com textarea de altura mínima, atributo rows e limite de altura; em navegadores antigos o campo permanece utilizável e pode rolar. Se o ajuste automático for um requisito funcional, mantenha o script de redimensionamento testado para esses usuários. Quando ter cautela: Revise campos longos, overflow, layouts compactos e dispositivos com teclado virtual.
Container style queries: variações por contexto
Permitem consultar propriedades personalizadas calculadas no contêiner com @container style(...). Um cartão pode adaptar seus descendentes ao tema herdado de uma região. A interoperabilidade do caso de uso com custom properties chegou em 2026; isso não significa que consultas a qualquer propriedade comum, como color, estejam universalmente implementadas. MDN.
Exemplo compacto de CSS: .card__label { color: #243047; } @container style(--tone: dark) { .card__label { color: white; } }
Fallback: Defina um visual padrão completo e, se o tema escuro for importante, replique a regra com uma classe explícita no ancestral, como .theme-dark .card__label. Não dependa de @supports isoladamente para provar que todo comportamento da consulta funciona. Quando ter cautela: Evite depender apenas da consulta para contraste, legibilidade ou estados essenciais.
:open: estilizar elementos abertos
A pseudoclasse corresponde ao estado aberto de elementos como details, dialog e certos controles com seletor visível. Chegou a Baseline em maio de 2026. Para popovers que estão sendo exibidos, o estado correspondente é :popover-open, não :open. MDN.
Exemplo compacto de CSS: details[open] > summary { font-weight: 700; } details:open > summary { background: #eef4ff; }
Fallback: Para details e dialog, seletores por atributo, como details[open] e dialog[open], preservam a indicação visual em versões antigas. Trate :open como aprimoramento, sobretudo para o estado visual de seletores nativos. Quando ter cautela: Não substitua semântica nativa e estados acessíveis por uma aparência dependente da pseudoclasse.
contrast-color(): escolha automática entre preto e branco
A função escolhe preto ou branco conforme o contraste com a cor de entrada. Está Newly available desde abril de 2026 e ajuda em selos com fundos variáveis. Contudo, a escolha não dispensa testar contraste: certas cores intermediárias podem continuar inadequadas para texto pequeno. MDN.
Exemplo compacto de CSS: .badge { background: var(--badge-bg); color: #111; } @supports (color: contrast-color(red)) { .badge { color: contrast-color(var(--badge-bg)); } }
Fallback: Declare primeiro uma cor de texto fixa, escolhida e verificada para a paleta permitida. Sobrescreva com contrast-color() apenas quando houver suporte. Para cores arbitrárias fornecidas por usuários, restrinja a paleta ou valide o contraste separadamente. Quando ter cautela: Não trate o resultado como certificação automática de acessibilidade.
@scope: estilos restritos ao componente
Delimita regras a uma subárvore do DOM, reduzindo seletores longos e conflitos entre componentes. Tornou-se Newly available em março de 2026. É útil em portais com blocos repetidos ou estilos de terceiros. MDN.
Exemplo compacto de CSS: .article-card .label { font-weight: 700; } @scope (.article-card) { .label { text-decoration: underline; } }
Fallback: Mantenha seletores de classe prefixados, como .article-card .label, para as regras essenciais. Adicione @scope apenas para refinamentos, pois navegadores sem suporte ignoram o bloco inteiro. Quando ter cautela: Reveja especificidade e limites da subárvore antes de migrar CSS já consolidado.
Ancoragem CSS e @position-try: menus que mudam de lado
A ancoragem CSS posiciona um painel em relação a um elemento e @position-try define alternativas caso a posição inicial transborde. Os componentes desta família chegaram ao patamar Newly available em etapas de 2026, e é preciso checar todas as propriedades usadas, não só a regra @position-try. MDN.
Exemplo compacto de CSS: .trigger { anchor-name: --help; } .hint { display: block; } @supports (position-anchor: --help) and (position-area: top) { .hint { position: fixed; position-anchor: --help; position-area: top; position-try-fallbacks: --below; } @position-try --below { position-area: bottom; } }
Fallback: Deixe ajuda e ações acessíveis no fluxo normal do documento ou use posicionamento convencional validado. Ative o comportamento ancorado em um bloco @supports que verifique as propriedades necessárias e teste limites de tela e zoom. Quando ter cautela: Evite que menus críticos fiquem ocultos fora da tela em WebViews e navegadores antigos.
crisp-edges: ampliar pixel art sem suavizar as bordas
O valor crisp-edges de image-rendering preserva bordas e contraste ao redimensionar imagens, especialmente arte em pixels e desenhos de linhas. É o valor específico que integra a seleção Baseline 2026; não confunda com o suporte histórico da propriedade inteira. MDN.
Exemplo compacto de CSS: .pixel-art { image-rendering: pixelated; image-rendering: crisp-edges; }
Fallback: Use pixelated antes de crisp-edges se a estética de pixels for desejada; os algoritmos não são perfeitamente idênticos. Se a imagem carregar informação essencial, ofereça arquivo na resolução correta ou SVG apropriado. Quando ter cautela: Não use para fotografias comuns, que podem ganhar aspecto serrilhado.
text-decoration-skip-ink: all: sublinhado legível
O valor all exige que sublinhados e sobrelinhas sejam interrompidos perto dos traços das letras. O valor auto já possui suporte mais antigo; a novidade destacada em Baseline 2026 é especificamente all. MDN.
Exemplo compacto de CSS: .article-link { text-decoration: underline; text-decoration-skip-ink: auto; text-decoration-skip-ink: all; }
Fallback: Declare auto antes de all ou confie no comportamento padrão. O link continua sublinhado se o valor novo for ignorado. Quando ter cautela: É refinamento tipográfico, não justificativa para bloquear navegadores legados.
Um método prático de decisão em quatro passos
- 1. Defina a população atendida. Observe analytics ou métricas reais de navegador e versão, incluindo iOS, Android, WebViews e dispositivos de atualização lenta. Documente um alvo mínimo; não confunda a parcela de visitantes com suporte universal.
- 2. Separe função de acabamento. Envio de formulário, acesso a conteúdo, navegação e contraste legível exigem saída estável sem a novidade. Sublinhos e tratamento de pixel art podem degradar visualmente sem impedir a tarefa.
- 3. Escreva o fallback primeiro. Use HTML semântico, declarações CSS convencionais e classes explícitas. Acrescente declarações novas depois das antigas; use @supports ou @supports selector() quando forem adequados, mas teste o comportamento completo, sobretudo consultas de contêiner e posicionamento ancorado.
- 4. Teste e acompanhe. Verifique pelo menos um navegador atual e as versões mais antigas que sua política cobre, em desktop e celular; teste teclado, foco, zoom, rolagem, cores reais e estados de erro. Reavalie a meta quando a distribuição de navegadores mudar.
Quando ainda evitar uma dependência exclusiva
Evite fazer qualquer um desses recursos ser a única via para tarefas críticas quando houver Safari antigo, navegador corporativo congelado, WebView desatualizada ou dispositivos sem atualização no público. Para uma função essencial sem fallback equivalente, adie a adoção exclusiva ou implemente alternativa convencional.
Os rótulos Baseline descrevem interoperabilidade e tempo de disponibilidade, não certificam acessibilidade nem qualidade de uma implementação. Por exemplo, contrast-color() ainda exige avaliação de contraste com a paleta real; e um painel com posicionamento ancorado precisa permanecer acessível junto às bordas da tela. Oito recursos podem entrar no mesmo projeto com políticas distintas: dependência controlada para requisitos demonstrados, aprimoramento progressivo para os demais.
Fontes de consulta
- Catálogo oficial Baseline 2026 e definição dos estágios.
- Guia oficial de metas Baseline com Browserslist.
- Referências da MDN ligadas a cada recurso nas seções acima. Status editorial considerado em 23 de setembro de 2026; novos lançamentos podem alterar a classificação.
