Publicado em: 17 de julho de 2026
Mais uma vez, seja bem-vindo ao resumo mensal da Baseline. Em junho de 2026, field-sizing
se tornou a versão recém-disponibilizada da linha de base, permitindo que os controles de formulário se ajustassem automaticamente
ao conteúdo. Enquanto isso, uma ampla variedade de recursos de CSS, HTML e API da Web
atingiu o status de linha de base amplamente disponível, além de atualizações importantes da
comunidade de desenvolvedores.
Alertas de valor de referência no status da plataforma da Web
Agora é mais fácil acompanhar quando os recursos da Web se tornam interoperáveis com os Alertas de linha de base no painel de status da plataforma da Web. Ao fazer login com o GitHub, você pode se inscrever para receber notificações sobre recursos quando eles ficarem disponíveis na linha de base, disponíveis para todos ou receberem novas implementações de navegador. As assinaturas podem ser configuradas para enviar atualizações por e-mail ou feeds RSS personalizados em uma programação mensal, semanal ou imediata. É possível definir o escopo dos alertas para pesquisas salvas (como todos os recursos HTML), criar newsletters personalizadas, gerar listas de recursos compartilháveis ou configurar webhooks do Slack para notificar sua equipe de engenharia.
Saiba mais em Apresentação dos alertas de valor de referência.
Recursos de referência recém-disponibilizados
Os recursos nesta seção serão compatíveis a partir de junho de 2026 no conjunto principal de navegadores e agora estão disponíveis na versão Baseline Newly.
field-sizing
A propriedade CSS field-sizing controla o comportamento de dimensionamento de elementos de formulário, como <textarea>, <input> e <select>, que tradicionalmente têm dimensões fixas padrão. Com os controles de formulário field-sizing: content, o tamanho é ajustado automaticamente ao conteúdo, reduzindo a necessidade de scripts JavaScript personalizados de redimensionamento automático.
Saiba mais na página de referência do MDN para field-sizing.
Recursos de referência amplamente disponíveis
Os seguintes recursos se tornaram amplamente disponíveis no Baseline, o que significa que agora eles são amplamente compatíveis e podem ser usados nos seus projetos.
Pseudoclasse :has()
O seletor de elemento pai :has() do CSS permite estilizar um elemento com base nos descendentes ou irmãos subsequentes dele. Essa pseudoclasse funcional permite padrões de layout condicionais diretamente em CSS sem precisar de JavaScript para inspecionar estruturas DOM.
Leia mais na página do MDN para a pseudoclasse :has.
HTMLIFrameElement.loading
A propriedade loading nos elementos <iframe> permite o carregamento lento de
frames incorporados. Ao especificar loading="lazy", os navegadores adiam o carregamento de iframes fora da tela
até que eles sejam rolados perto da janela de visualização, economizando largura de banda da rede e sobrecarga inicial
de carregamento da página.
Confira os detalhes na referência do MDN para HTMLIFrameElement.loading.
CanvasRenderingContext2D.reset()
O método reset() em contextos de tela 2D limpa o estado do contexto de desenho, redefinindo propriedades como transformações, caminhos de recorte, estilos de linha e estilos de preenchimento para os valores padrão. Isso permite que um contexto de tela seja
reutilizado de forma limpa sem limpeza manual de propriedades.
Saiba mais na documentação do MDN para CanvasRenderingContext2D.reset.
Unidade de comprimento cap
A unidade relativa à fonte cap corresponde à altura nominal da caixa alta da fonte do elemento. Ele permite alinhar e dimensionar elementos em relação à altura das letras maiúsculas, possibilitando layouts tipográficos precisos.
Saiba mais na referência da MDN para unidades de comprimento.
Propriedade counter-set
A propriedade CSS counter-set define um contador CSS com um valor especificado, complementando counter-reset e counter-increment. Ele oferece controle ao manipular listas numeradas, estruturas de documentos ou sequências de contadores personalizados.
Leia os detalhes na página do MDN para counter-set.
createImageBitmap()
O método estático createImageBitmap() cria uma imagem de bitmap assíncrona
de várias fontes de imagem, incluindo <img>, <canvas>, Blob ou
ImageData. Como ele decodifica imagens fora da linha de execução principal, evita o bloqueio
do desempenho da interface ao processar gráficos complexos de tela.
Confira os detalhes da implementação na documentação do MDN para createImageBitmap.
Tipo de dado <easing-function>
O tipo de dados CSS <easing-function> descreve curvas matemáticas de taxa de mudança para transições e animações. Além de palavras-chave padrão, como ease-in
ou cubic-bezier(), ele é compatível com funções como linear() para criar efeitos
de mola ou de retorno personalizados.
Saiba como usar na referência da MDN para easing-function.
Seletor de aninhamento &
O seletor de aninhamento & ancora explicitamente os seletores de regra filhos ao seletor pai ao usar o aninhamento de CSS integrado. Isso garante clareza e regras de especificidade corretas ao definir estados de passar o cursor, foco ou pseudoclasse aninhados.
Leia os detalhes no guia do MDN para o seletor de aninhamento.
Pré-carregamento responsivo com rel="preload"
O atributo media nos elementos <link rel="preload"> permite o pré-carregamento responsivo de recursos principais. Ao combinar rel="preload" com consultas de mídia, os navegadores baixam apenas os recursos que correspondem à largura da janela de visualização ou às características de exibição do usuário no início do ciclo de vida de carregamento.
Saiba como usar na documentação do MDN para rel="preload".
HTMLMediaElement.preservesPitch
A propriedade preservesPitch nos elementos <audio> e <video> controla
se o navegador ajusta o tom do áudio ao mudar o playbackRate.
Definir como false permite mudanças de tom ao acelerar ou diminuir a velocidade da reprodução de mídia.
Confira os detalhes na página do MDN para HTMLMediaElement.preservesPitch.
Pseudoclasse :dir()
A pseudoclasse CSS :dir() corresponde a elementos com base na direcionalidade do texto (como ltr ou rtl), correspondendo à direção herdada de atributos HTML, como dir ou contexto de texto calculado.
Saiba mais na página do MDN sobre a pseudoclasse :dir.
Função matemática pow()
A função CSS pow() calcula valores de potência exponencial diretamente em declarações CSS, elevando um número base a um expoente (por exemplo, pow(2, 3)). Isso simplifica o dimensionamento responsivo e as relações matemáticas de grade.
Leia os detalhes na referência do MDN para a função pow.
Propriedade CSS mask
A propriedade abreviada mask do CSS oculta partes de um elemento usando imagens ou gradientes como camadas de corte. Ele combina subpropriedades como mask-image, mask-position e mask-repeat para criar efeitos complexos de mascaramento visual.
Saiba mais na página do MDN sobre a propriedade mask.
@media (scripting)
O recurso de mídia scripting testa se a linguagem de cliente (como JavaScript) está ativada e disponível no contexto do navegador. Isso permite que estilos de aprimoramento progressivo segmentem ambientes com ou sem JavaScript ativo.
Saiba mais na referência da MDN para o recurso de mídia de scripting.
URL.canParse()
O método estático URL.canParse() verifica se uma determinada string é um URL válido e analisável (com um URL base opcional) sem gerar uma exceção, simplificando a validação de URL em tempo de execução antes de instanciar objetos URL.
Confira os detalhes da implementação na documentação do MDN para URL.canParse.
API Storage Access
A API Storage Access oferece um mecanismo para que o conteúdo entre sites incorporado
em <iframe>s de terceiros solicite acesso a cookies e armazenamento
não particionados, permitindo autenticação e interações com estado em limites
de domínio.
Leia os detalhes na página do MDN sobre a API Storage Access.
Conclusão
Avise se esquecemos de algo relacionado ao Baseline, e vamos incluir na próxima edição. Se você tiver dúvidas ou quiser enviar feedback sobre o Baseline, informe um problema no nosso Issue Tracker.