Publicado em: 3 de junho de 2026
Este é o resumo mensal do Baseline. Em maio de 2026, vários novos recursos do CSS, propriedades de eventos e adições de API ficaram disponíveis na versão Baseline Newly available, enquanto unidades do CSS, propriedades de interação do usuário e pseudoclasses alcançaram a versão Baseline Widely available, além de atualizações importantes da comunidade de desenvolvedores.
Pesquisa State of CSS 2026
A pesquisa anual da comunidade da Web já está disponível: a pesquisa State of CSS 2026 já está aberta. Este ano, os organizadores se esforçaram para refinar a pesquisa, focando nos recursos mais importantes para os desenvolvedores em uma era de programação assistida por IA. Os fornecedores de navegadores monitoram de perto esses resultados para ajudar a priorizar os roteiros de engenharia e resolver os problemas dos desenvolvedores. Não deixe de dar sua opinião e compartilhar sua experiência com o cenário em evolução do CSS antes do encerramento em 1º de julho.
Recursos de referência recém-disponibilizados
Os recursos nesta seção serão compatíveis a partir de maio de 2026 no conjunto principal de navegadores e agora estão disponíveis na versão mais recente do Baseline.
Consultas de estilo de contêiner
As consultas de contêiner não estão mais limitadas ao tamanho. Com as consultas de estilo, agora é possível aplicar estilos a elementos com base nas propriedades personalizadas de um contêiner principal. Isso permite criar componentes altamente modulares que podem adaptar o tema ou o estilo com base no posicionamento contextual sem depender de estruturas de classe complexas.
Saiba mais na página de referência da MDN para @container.
Pseudoclasse :open
Antes, para estilizar elementos com estados abertos e fechados, como <dialog> e <details>, era necessário verificar atributos ou gerenciar classes. A pseudoclasse :open simplifica isso ao corresponder a esses elementos apenas quando eles estão abertos, permitindo um CSS mais limpo e declarativo.
Leia sobre isso na página da MDN para a pseudoclasse :open.
ToggleEvent.source
Ao trabalhar com a API Popover, é fundamental reagir às mudanças de estado. A propriedade source da interface ToggleEvent retorna o elemento de controle que acionou a ação de alternância do popover. Isso permite identificar a origem do evento e coordenar interações complexas da interface.
Saiba mais na documentação do MDN para ToggleEvent.source.
Propriedade image-rendering
A propriedade image-rendering do CSS permite controlar o algoritmo de dimensionamento usado ao redimensionar imagens. Isso é especialmente útil para arte em pixels, imagens de baixa resolução ou códigos QR, em que é importante evitar a interpolação desfocada e manter o escalonamento nítido e pixelado.
Saiba como usar na página da MDN para renderização de imagens.
text-decoration-skip-ink: all
Sublinhados que passam por descendentes às vezes podem parecer confusos. Embora text-decoration-skip-ink: auto pule a tinta apenas quando há interseção, definir como all força o sublinhado a pular todos os glifos, independente da interseção, oferecendo mais controle sobre a estética da tipografia.
Leia os detalhes no guia do MDN para text-decoration-skip-ink.
SharedWorker
A API SharedWorker fornece um worker em segundo plano especializado que pode ser acessado de vários contextos de navegação, como diferentes janelas, guias ou iframes na mesma origem. Isso é útil para compartilhar estados, gerenciar conexões ou coordenar tarefas em segundo plano entre limites de guias.
Confira a documentação da MDN para SharedWorker.
Recursos de referência amplamente disponíveis
Os seguintes recursos ficaram amplamente disponíveis no Baseline, o que significa que agora eles são compatíveis e podem ser usados em seus projetos.
Unidade de comprimento lh
A unidade relativa lh corresponde à altura da linha calculada do elemento em que ela é usada. Isso facilita o dimensionamento de elementos, como selos de ícones ou destaques de plano de fundo, para corresponder perfeitamente à altura de uma linha de texto.
Saiba mais na referência da MDN para unidades de comprimento.
Unidade de comprimento rlh
Semelhante a lh, a unidade rlh representa a altura da linha, mas especificamente do elemento raiz (<html>). Isso permite estabelecer um ritmo vertical consistente em toda a página, independente do tamanho da fonte local ou das substituições de altura da linha.
Leia mais na referência do MDN para unidades de comprimento.
Navigator.userActivation
Muitas APIs da Web (como reprodução de vídeo, pop-ups ou acesso à área de transferência) exigem interação do usuário antes de serem acionadas. A propriedade Navigator.userActivation retorna um objeto que contém informações sobre o estado de ativação atual e histórico do usuário na janela, permitindo que os scripts verifiquem se um gesto do usuário ocorreu.
Saiba como usar na página do MDN para Navigator.userActivation.
clip-path
A propriedade CSS clip-path permite criar uma região de corte que define qual parte de um elemento deve ficar visível. Usando formas básicas (como círculos, elipses ou polígonos) ou caminhos SVG, é possível criar layouts e transições interessantes sem ocultar o estouro.
Confira os detalhes da implementação na página da MDN para clip-path.
Pseudoclasse :user-invalid
Ao contrário de :invalid, que aplica o estilo assim que uma página é carregada (geralmente resultando em uma experiência do usuário ruim), a pseudoclasse :user-invalid só corresponde a elementos de formulário inválidos depois que o usuário interage com eles. Isso significa que você pode mostrar o feedback de validação do formulário depois que o usuário sair do campo.
Saiba como ele funciona na documentação da MDN para :user-invalid.
Conclusão
Se você acha que esquecemos de algo relacionado ao Baseline, avise para que possamos incluir na próxima edição. Se você tiver dúvidas ou quiser enviar feedback sobre o Baseline, registre um problema no nosso Issue Tracker.