Chrome 154: o que mudou para desenvolvedores Front-end?

O Chrome 154 chegou ao canal estável trazendo novas possibilidades para quem trabalha com desenvolvimento Front-end.

Algumas novidades são pequenas melhorias de CSS, enquanto outras começam a resolver problemas que por muitos anos dependeram de JavaScript.

Principais novidades

• Iframes responsivos: conteúdo incorporado pode ajustar sua altura automaticamente.
• Scroll Markers: novos recursos para navegação e carrosséis.
• Melhorias de CSS: mais controle visual diretamente pelo navegador.
• Menos JavaScript: algumas tarefas passam a ser resolvidas declarativamente.
• Acessibilidade: novos comportamentos semânticos para componentes de navegação.

Tecnologias Utilizadas

• HTML: estrutura dos exemplos.
• CSS: aplicação das novas propriedades.
• JavaScript: comparação com soluções utilizadas anteriormente.
• Chrome 154: navegador utilizado nos exemplos.

Como Usar

Antes de utilizar funcionalidades recentes em produção:

1. Verifique a compatibilidade entre navegadores.
2. Teste o comportamento no Chrome atualizado.
3. Utilize fallback quando necessário.
4. Evite assumir que um recurso novo já possui suporte universal.

Como fazer?

Vamos analisar algumas das novidades mais interessantes do Chrome 154 através de exemplos simples.

Passo a Passo

🧑🏽‍💻 Iframes que acompanham o conteúdo

Um dos problemas mais comuns com iframes é controlar sua altura.

Antes poderíamos precisar de JavaScript para medir o conteúdo e atualizar o iframe.

Agora podemos utilizar recursos nativos.

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

Antes, uma implementação poderia envolver:

window.addEventListener("message", (event) => {
  const iframe = document.querySelector("iframe");

  if (iframe && event.data?.height) {
    iframe.style.height = `${event.data.height}px`;
  }
});

Com recursos nativos, parte dessa lógica pode deixar de existir.

🎠 Scroll Markers

Scroll Markers permitem criar indicadores relacionados ao conteúdo rolável.

● ○ ○ ○

Um exemplo:

.carousel {
  scroll-marker-group: after links;
}

Também podemos utilizar:

.carousel {
  scroll-marker-group: after tabs;
}

A diferença não é apenas visual. Ela também influencia a semântica do componente.

Por que isso importa?

O Chrome vem adicionando recursos que reduzem a necessidade de scripts para comportamentos simples.

Antes:

Agora, em alguns casos:

já é suficiente.

Isso significa menos código para manter, testar, carregar e depurar.

✅ Resultado Final

Com o Chrome 154 conseguimos utilizar novos recursos da plataforma web para construir interfaces com:

1. Menos JavaScript.
2. Melhor integração com o navegador.
3. Mais semântica.
4. Código mais simples.
5. Menor necessidade de soluções personalizadas.

🛠️ Considerações Finais

Novidades de navegador não significam que devemos abandonar imediatamente soluções existentes.

Antes de utilizar qualquer recurso novo em produção:

• verifique compatibilidade;
• considere seu público;
• teste fallbacks;
• avalie se a nova API realmente simplifica o projeto.

Está curtindo nosso conteúdo?

Considere nos apoiar com uma doação!

Na página Sobre você encontra mais informações sobre como contribuir 💖