stamatios
← Voltar ao feed
Documento HTML cria controles interativos sem depender de uma caixa separada de JavaScript
Dev & Engenharia · Produto & Design

HTML ganha recursos que antes exigiam JavaScript

resumo de ~3 min

A expansão do HTML

O HTML passou a incorporar recursos dinâmicos que antes normalmente exigiam JavaScript. A publicação reúne exemplos de funcionalidades que podem ser implementadas apenas com elementos e atributos nativos, embora ressalte que o suporte dos navegadores e a acessibilidade ainda são desiguais em vários casos.

O atributo popover, combinado com popovertarget e popovertargetaction, permite abrir e fechar popovers sem código JavaScript. O navegador também pode cuidar do fechamento ao clicar fora, da tecla Esc e da disposição do elemento no topo da interface, sem que o desenvolvedor precise administrar o z-index. O elemento dialog oferece uma estrutura própria para caixas de diálogo modais e pode ser controlado com HTML em alguns cenários, inclusive por meio de formulários com method="dialog". A publicação também mostra a alternativa tradicional em JavaScript, usando os métodos .showModal() e .close().

Controles nativos e novos comandos

Elementos details podem ser agrupados com um mesmo atributo name, fazendo com que apenas um item do acordeão permaneça aberto por vez. Já os atributos command e commandfor permitem que botões controlem um popover sem scripts. Entre os comandos atualmente estáveis nos navegadores estão show-modal, close, request-close, toggle-popover, show-popover e hide-popover. A expectativa apresentada é que invocadores futuramente também possam incrementar ou reduzir valores, interagir com elementos de mídia e copiar texto.

Outros recursos reduzem a necessidade de APIs JavaScript específicas. loading="lazy" adia o carregamento de imagens até que elas se aproximem da área visível, sem recorrer a IntersectionObserver. O atributo hidden="until-found" mantém uma seção oculta até que a navegação por fragmento a revele e o navegador remova o estado hidden automaticamente. Porém, esse recurso ainda funciona melhor com a busca padrão do navegador do que com mecanismos de busca de leitores de tela.

Limites de implementação e acessibilidade

A publicação também lista controles nativos para seleção de cor, data e intervalo, além de medidores e barras de progresso. Apesar de dispensarem soluções personalizadas, alguns desses elementos ainda parecem inacabados: os estilos padrão variam bastante entre navegadores e a experiência de acessibilidade pode ser ruim. Por isso, o texto recomenda cautela e alerta para possíveis armadilhas.

O elemento datalist fornece sugestões nativas de preenchimento automático, sem uma biblioteca de menus suspensos. Seu suporte, contudo, permanece irregular entre tipos de entrada, e a implementação apresenta problemas conhecidos. A recomendação é considerar evitar o recurso por enquanto e acompanhar sua evolução.

A conclusão não é que JavaScript tenha se tornado desnecessário, mas que o HTML moderno já cobre uma parcela maior de comportamentos interativos. Os exemplos devem ser testados, e as decisões de uso não devem ignorar diferenças entre navegadores nem as necessidades de pessoas que acessam a web de maneiras distintas.