Novidades do Chrome 154

Rachel Andrew

Publicado em: 22 de setembro de 2026

O Chrome 154 já está sendo lançado, e esta postagem compartilha alguns dos principais recursos da versão. Leia as notas da versão completa do Chrome 154.

Destaques desta versão:

Tamanho responsivo <iframe>

O Chrome 154 adiciona suporte a iframes responsivos, permitindo que um elemento <iframe> em um documento pai se ajuste ao tamanho do layout do documento incorporado para evitar a rolagem no documento filho. Isso substitui o padrão em que você mede manualmente o conteúdo do iframe, envia dimensões com postMessage() e atualiza o tamanho do iframe na página de incorporação.

Para dimensionar um iframe de acordo com a altura do conteúdo, use a propriedade frame-sizing do CSS no elemento <iframe> da página de incorporação:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

O documento incorporado também precisa ativar a opção incluindo um elemento <meta name="responsive-embedded-sizing"> no <head>:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

Para mais detalhes e demonstrações, consulte Iframes responsivos no Chrome 154.

Modos scroll-marker-group do CSS

A propriedade scroll-marker-group controla se um contêiner de rolagem gera um pseudoelemento ::scroll-marker-group antes ou depois do conteúdo. O Chrome 154 melhora o scroll-marker-group com dois modos que definem a ordem de foco e a semântica de acessibilidade WAI-ARIA de ::scroll-marker-group e ::scroll-marker:

/* Links mode (default) */
scroll-marker-group: after links;

/* Tabs mode */
scroll-marker-group: before tabs;

CSS text-decoration-inset

Por padrão, a decoração de texto de um elemento (como sublinhado, sobrelinhado ou tachado) tem o mesmo comprimento do texto renderizado. A propriedade CSS text-decoration-inset permite ajustar os pontos de início e fim da decoração de texto de um elemento para que ela seja inserida, estendida além ou deslocada em relação às bordas da execução de texto.

text-decoration-inset aceita valores de auto, comprimento e porcentagem usando uma sintaxe de um ou dois valores. Por exemplo, para inserir as duas extremidades em 10 px:

text-decoration-inset: 10px;

Valores positivos inserem a decoração (encurtando-a), enquanto valores negativos aumentam a decoração (alongando-a). Isso permite ajustar o espaçamento da decoração e criar efeitos animados de revelação de sublinhado com decorações de texto CSS em vez de gradientes de plano de fundo ou elementos extras.

Para mais informações, consulte a documentação do text-decoration-inset na MDN.

Leitura adicional

Isso abrange apenas alguns destaques importantes. Confira os links a seguir para mais mudanças no Chrome 154:

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo. Ou siga nosso perfil no X ou LinkedIn para ler novos artigos e postagens do blog.

Assim que o Chrome 155 for lançado, vamos contar tudo sobre as novidades do Chrome!