Publicado em 17 de julho de 2026
Bem-vindo de novo ao resumo mensal da Baseline. Em junho de 2026, o field-sizing ficou disponível na Baseline, permitindo que os controles de formulário se ajustem automaticamente ao conteúdo. Enquanto isso, uma ampla variedade de recursos de CSS, HTML e API da Web atingiu o status de Disponível na Baseline, além de atualizações importantes da comunidade de desenvolvedores.
Alertas da Baseline sobre o status da plataforma da Web
Agora é mais fácil acompanhar quando os recursos da Web se tornam interoperáveis com os alertas da Baseline no painel Status da plataforma da Web. Ao fazer login com o GitHub, você pode se inscrever para receber notificações de recursos à medida que eles ficam disponíveis na Baseline, amplamente disponíveis ou recebem 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. Você pode definir 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 Apresentamos os alertas da Baseline.
Recursos disponíveis na Baseline
Os recursos desta seção são compatíveis a partir de junho de 2026 no conjunto principal de navegadores e agora estão disponíveis na Baseline.
field-sizing
A propriedade CSS field-sizing oferece controle sobre o comportamento de dimensionamento de
elementos de formulário, como <textarea>, <input> e <select>—que tradicionalmente
têm dimensões fixas padrão. Com field-sizing: content, os controles de formulário são expandidos ou reduzidos automaticamente para se ajustar ao conteúdo, reduzindo a necessidade de scripts de redimensionamento automático personalizados em JavaScript.
Saiba mais na página de referência do MDN para field-sizing.
Recursos amplamente disponíveis na Baseline
Os recursos a seguir ficaram amplamente disponíveis na Baseline, o que significa que agora eles são amplamente compatíveis e utilizáveis nos seus projetos.
Pseudoclasse :has()
O seletor pai CSS :has() permite estilizar um elemento com base nos descendentes ou irmãos subsequentes. Essa pseudoclasse funcional permite padrões de layout condicionais diretamente no CSS, sem precisar de JavaScript para inspecionar estruturas DOM.
Leia mais na página do MDN sobre a pseudoclasse :has.
HTMLIFrameElement.loading
A propriedade loading em 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 de carregamento de página inicial.
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 a limpeza manual da propriedade.
Saiba mais na documentação do MDN para CanvasRenderingContext2D.reset.
Unidade de comprimento cap
A unidade relativa à fonte cap corresponde à altura nominal da fonte do elemento. Ela permite alinhar e dimensionar elementos em relação à altura das letras maiúsculas, permitindo layouts tipográficos precisos.
Saiba mais na referência do MDN para unidades de comprimento.
Propriedade counter-set
A propriedade CSS counter-set define um contador CSS para um valor especificado, complementando counter-reset e counter-increment. Ela fornece controle ao manipular listas numeradas, estruturas de tópicos 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 da performance da interface ao processar gráficos de tela complexos.
Confira os detalhes da implementação na documentação do MDN para createImageBitmap.
Tipo de dados <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 oferece suporte a funções como linear() para construir efeitos de mola ou salto personalizados.
Saiba como usá-lo na referência do 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 CSS integrado. Ele garante clareza e regras de especificidade corretas ao definir estados de foco, 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 em elementos <link rel="preload"> permite o pré-carregamento responsivo
de recursos importantes. Ao combinar rel="preload" com consultas de mídia,
os navegadores fazem o download apenas dos 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 usá-lo na documentação do MDN para rel="preload".
HTMLMediaElement.preservesPitch
A propriedade preservesPitch em 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 desacelerar a 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 direção 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 nas declarações CSS, elevando um número base a um expoente (por exemplo, pow(2, 3)). Isso simplifica o escalonamento responsivo e as relações de grade matemática.
Leia os detalhes na referência do MDN para a função pow.
Propriedade mask do CSS
A propriedade abreviada mask do CSS oculta partes de um elemento usando imagens ou gradientes como camadas de recorte. Ela combina subpropriedades como mask-image, mask-position e mask-repeat para criar efeitos de mascaramento visual complexos.
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 do MDN para o recurso de mídia de script feature.
URL.canParse()
O método estático URL.canParse() verifica se uma determinada string é um URL válido,
analisável (com um URL base opcional) sem gerar uma exceção,
simplificando a validação de URL de 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 a 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
Informe se perdemos algo relacionado à Baseline, e vamos garantir que ele seja capturado em uma edição futura. Se você tiver dúvidas ou quiser enviar feedback sobre a Baseline, registre um problema no nosso rastreador de problemas.