Compartilhe

Novidade na plataforma web em dezembro | Blogue | web.dev

Descubra alguns dos recursos interessantes que chegaram aos navegadores estáveis ​​​​e beta em dezembro de 2025.

Publicado: 16 de dezembro de 2025

Versões de navegador estáveis

Cromo 143, Firefox 146 e
Safári 26.2
liberado para estável durante dezembro. Esta postagem analisa os muitos novos recursos deste mês, com várias coisas se tornando a linha de base recentemente disponível.

O @scope A regra CSS agora é linha de base

O Firefox 146 inclui o
@scope

Regra CSS que permite selecionar elementos em subárvores DOM específicas. Defina um escopo dentro do qual os seletores possam direcionar os elementos e evite seletores excessivamente específicos e longos. Por exemplo, o CSS a seguir tem como alvo apenas elementos se eles estiverem dentro de um elemento com uma classe de .card.

@scope (.card) {
    img {
        border-color: green;
    }
}

Com o Firefox 146, esta regra útil agora está disponível recentemente. Saiba mais sobre isso em
Limite o alcance dos seus seletores com CSS @scope regra.

O contrast-color() Função CSS

Também no Firefox 146 está o
contrast-color() função. Esta função pega um valor de cor e retorna uma cor contrastante, que visa garantir o contraste mínimo das WCAG AA.

Para mais exemplos veja
Como fazer com que o navegador escolha uma cor contrastante em CSS
no blog do WebKit.

Firefox é o primeiro navegador a oferecer o
text-decoration-inset

propriedade. Esta propriedade permite ajustar os pontos inicial e final da decoração do texto de um elemento para que ele possa ser encurtado, alongado ou ter sua posição deslocada em relação ao texto renderizado.

O font-language-override Propriedade CSS

O Chrome 143 inclui o
font-language-override

propriedade. Isso permite substituir o comportamento do tipo de letra para um idioma específico. Isso é útil se você estiver usando um tipo de letra que não tem suporte adequado para um idioma. Você pode optar por usar glifos de um idioma semelhante com melhor suporte.

Consultas de contêiner substituto ancoradas em CSS

O Chrome 143 apresenta @container anchored(fallback) para estilizar descendentes de elementos posicionados como âncora com base em qual deles position-try-fallbacks é aplicado.

Essas consultas podem ser usadas para estilizar a ligação de um elemento ancorado ou suas animações, com base em como a âncora e o elemento ancorado estão posicionados um em relação ao outro.

Sintaxe relativa lateral para background-position-x/y mãos longas

Também no Chrome, e agora disponível em todos os navegadores, está a capacidade de definir a posição da imagem de fundo em relação a uma de suas bordas nas propriedades longas para background-position. Por exemplo:

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: left 30px;
  background-position-y: bottom 20px;
}

A animação overallProgress propriedade

Safari 26.2 inclui
overallProgress. Esta propriedade somente leitura da interface Animation retorna um número entre 0 e 1 indicando o progresso geral da animação em direção ao seu estado final.

Esta propriedade agora está disponível como linha de base recentemente.

LCP e INP agora estão disponíveis recentemente

As métricas Largest Contentful Paint (LCP) e Interaction to Next Paint (INP) agora estão disponíveis como linha de base recentemente, com suporte no Safari 26.2 para a API Contentful Paint e a API Event Timing necessárias para medir essas métricas.

Esses recursos foram incluídos no Interop 2025 e agora você pode medir essas métricas na versão mais recente de todos os principais navegadores.

Maior API Contentful Paint

API de tempo de evento

CHIPS atinge a linha de base Recentemente disponível

O Safari 26.2 também inclui CHIPS (Cookies com estado particionado independente), que permite incluir um cookie no armazenamento particionado, com um jarro de cookies separado para cada site de nível superior.

hidden="until-found"

Safari 26.2 inclui suporte para
hidden="until-found"que agora se torna a linha de base recentemente disponível.

O command e commandfor atributos

Também para HTML no Safari 26.2 há suporte para
command e
commandfor em botões. Isso fornece uma maneira declarativa de controlar popovers e caixas de diálogo.

Saiba mais em Apresentando command e commandfor.

O scrollend evento

Outro recurso que se tornou o Baseline recentemente disponível no Safari 26.2 é o
scrollend

evento. Este evento é acionado quando a rolagem é concluída. Saiba mais sobre isso em
Scrollend, um novo evento JavaScript.

O scrollbar-color propriedade

O scrollbar-color propriedade permite alterar a cor da barra de rolagem dedãoe a barra de rolagem acompanhar. Com o Safari 26.2, isso também se torna o Baseline Newly disponível.

Lançamentos de navegadores beta

As versões beta do navegador oferecem uma prévia do que estará na próxima versão estável do navegador. É um ótimo momento para testar novos recursos, ou remoções, que podem impactar seu site antes que o mundo receba esse lançamento. Novos betas este mês são
Firefox 147 e
Cromo 144.

O Chrome 144 inclui o ::search-text pseudoelemento para estilo de resultado de pesquisa localizar na página e scrolled suporte para @scroll-state permitindo que você estilize descendentes de contêineres com base na direção de rolagem mais recente. Também está incluída a API Temporal, com objetos e funções padrão para trabalhar com datas e horas.

Firefox 147 é uma versão interessante que inclui posicionamento de âncora CSS, tipos de transição de visualização e API de navegação.

Para saber mais sobre recursos interessantes de CSS e UI lançados este ano, confira CSS finalizado em 2025.

Written by

Categorias