Novos recursos de front-end para designers em 2025

• Com a evolução das tecnologias web modernas, muitas tarefas que antes precisavam ser implementadas com JavaScript agora podem ser feitas de forma simples com HTML e CSS
• Novas tecnologias, como estilização centrada em componentes, estilização de elementos pais, definição de cores relativas e outras, já podem ser amplamente usadas em vários navegadores
• Oferecem maneiras para designers e desenvolvedores criarem componentes de UI de forma mais simples e eficaz

CSS Container Queries e Style Queries

• Estilização centrada em componentes
  • Aplicação de estilos CSS consultando informações de largura e estilo do contêiner
  • Útil para estilizar componentes reutilizáveis com várias variações
  • Referência: Introdução às CSS Style Queries

Balanceamento de texto (text-wrap: balance)

• Manutenção do equilíbrio tipográfico
  • Calcula automaticamente para que o texto seja distribuído de maneira uniforme em títulos e títulos de cards
  • Referência: Guia de Ahmad Shadeed

Redimensionamento automático de campos de formulário

• Automação do tamanho de entrada
  • O tamanho de campos de texto ou menus de seleção é ajustado automaticamente ao conteúdo
  • Pode ser implementado com uma única linha simples de CSS
  • Referência: Explicação de Adam Argyle

Conteúdo oculto pesquisável (hidden=until-found)

• Melhoria da acessibilidade da UI
  • Conteúdo oculto, como seções recolhidas de acordeão, pode ser encontrado pela busca na página e por mecanismos de busca
  • Referência: Guia de Joey Arhar

Suporte a cores de alta resolução (OKLCH, OKLAB)

• Suporte a 50% mais cores
  • Nova especificação de cores projetada com base na percepção humana de cor
  • Adequada para sistemas de design e gradientes
  • Referência: Explicação de Vitaly Friedman

Cores relativas em CSS

• Cálculo de cores com base em cores existentes
  • Usando a palavra-chave from, é possível ajustar o brilho da cor, calcular cores complementares e mais
  • Referência: Snippet de código de Adam Argyle

View Transitions API

• Transições de tela suaves
  • Ao passar da tela atual para uma nova, é possível implementar transições fluidas com animações CSS
  • Suporta transições em um único documento ou entre dois documentos
  • Referência: Guia de Bramus Van Damme

CSS Scroll Snap

• Oferece uma experiência de rolagem precisa
  • Permite configurar um contêiner de rolagem para que o usuário seja encaixado em itens específicos de conteúdo
  • Referência: Guia de Ahmad Shadeed

Estilização de elementos pais (:has)

• Estilização do elemento pai com base no estado dos elementos filhos
  • Também permite ajustar estilos com base no estado de outros elementos, indo além da relação pai-filho
  • Referência: Guia de Josh W. Comeau

Outros recursos dignos de destaque

• Melhorias na estilização de estados de entrada: :user-valid, :user-invalid permitem fornecer feedback após a alteração de entrada pelo usuário
• Otimização do teclado móvel: inputmode e enterkeyhint melhoram o teclado virtual
• Elemento HTML <dialog>: implementação de modais e popovers acessíveis

Conclusão

• Novas tecnologias de front-end, práticas e úteis, têm um impacto inovador no design de UI e UX
• Recursos que devem chegar no futuro: layout masonry, personalização de <selectmenu>, alinhamento de caixas de texto e mais
• Agradecimentos a todos os desenvolvedores que trabalham pela evolução da plataforma web; esperamos que este texto seja útil para melhorar projetos e aplicações. Bom trabalho!

[savvykang]

Como outra pessoa também apontou, o autor aparentemente não considera em nada a compatibilidade entre navegadores nem a consistência do comportamento. Além disso, há casos em que a implementação ou o funcionamento diferem de um navegador para outro, então não dá para simplesmente sair escolhendo novos recursos sem pensar. Por maior que seja a participação de uso do Chrome, por causa do iOS é preciso considerar pelo menos se isso funciona bem no Safari.

[n00nietzsche]

Concordo... acho que vai ser difícil usar isso no produto sem mais nem menos.

[cichol]

Não implementado no Safari e no Firefox

• Ajuste automático de tamanho dos campos de entrada de formulário
• Conteúdo oculto pesquisável (hidden=until-found)

Não implementado no Firefox

• View Transitions API

Na prática, é mais fácil considerar que as novas funcionalidades de frontend são funcionalidades novas exclusivas do Chrome.
Em casos extremos, como o OffscreenCanvas, isso pode levar até 5 anos. (Chrome 2018, Safari 2023)

[kyc1682]

Container queries e :has são extremamente práticos.