Você não precisa de JavaScript para isso

Princípio central do desenvolvimento web: o princípio do menor poder

• Um dos princípios centrais do desenvolvimento web, o 'princípio do menor poder', significa escolher a linguagem de nível mais baixo adequada ao objetivo proposto.
• Entre HTML, CSS e JS, o HTML é o mais preferido, seguido por CSS, e por último JS.
• O JS é o mais versátil, mas traz riscos como falha no carregamento, consumo adicional de recursos e problemas de acessibilidade.

Switch personalizado

• Quando for necessário implementar um switch personalizado no lugar de uma checkbox comum por exigências de design, é possível fazê-lo com HTML e CSS usando a pseudoclasse :checked, em vez de JS.
• O navegador conecta automaticamente os elementos de entrada dentro de um rótulo e os torna clicáveis, oferecendo a funcionalidade de alternância sem handlers adicionais em JS.

Recurso nativo de preenchimento automático: Datalist

• Em vez de JavaScript, é possível implementar um recurso que filtra e mostra automaticamente as opções conforme o usuário digita usando o datalist, uma funcionalidade nativa do navegador.
• O usuário pode inserir o valor que quiser ou clicar no ícone de dropdown adicionado pelo navegador para ver todas as opções.

Seletor de cores nativo

• Em vez de um seletor de cores complexo feito com JS, pode-se usar um seletor de cores nativo implementado com uma única linha de HTML.
• Em navegadores baseados em Chrome, há um recurso adicional que permite selecionar cores de qualquer lugar da tela.

Acordeão

• Usando os elementos details e summary, é possível ocultar o conteúdo até que o usuário precise dele e melhorar a estrutura da página.
• Com o atributo open, é possível deixar um dos itens do acordeão aberto por padrão.

Modal interativo

• Com o elemento dialog, é possível implementar um modal para informar o usuário ou solicitar entrada.
• O modal é aberto com JS, mas todo o restante pode ser tratado com HTML e CSS nativos.

Conclusão

• Este artigo mostra que é possível usar menos JS e criar sites melhores aproveitando os recursos do CSS e do HTML.
• É importante testar novas formas de implementação considerando a acessibilidade.

Opinião do GN⁺

• O ponto mais importante deste texto é que, no desenvolvimento web, é possível melhorar desempenho e acessibilidade sem depender de JS, aproveitando ao máximo os recursos do HTML e do CSS.
• O motivo de isso ser interessante para desenvolvedores web é que o texto apresenta novas formas de implementar, de maneira mais simples e eficiente, recursos que antes se pensava serem possíveis apenas com JS.

[GN⁺]

Comentários no Hacker News

• Foi apontado que faltou mencionar que o JavaScript tem melhor compatibilidade, o que justifica seu uso em certas áreas

  • É possível usar recursos novos de JavaScript via transpilation, mas fazer polyfill de funcionalidades ausentes de CSS e HTML é muito mais difícil e às vezes impossível
  • Ao usar a propriedade appearance, o MDN traz muitos avisos, e recomenda testes rigorosos especialmente para o uso de appearance: none
  • datalist não funciona no Firefox Android e aparece apenas como uma caixa de entrada simples
  • O seletor de cores é muito pouco padronizado, o que dificulta seu uso na maioria dos negócios
  • O próprio artigo reconhece a falta de consistência de details e dialog
  • Espera-se que chegue uma era em que os navegadores deem suporte consistente a esses recursos, mas até lá eles seriam usados principalmente em projetos pessoais

• Foi expressa surpresa pelo fato de, ainda em 2023, continuarmos tendo problemas gerais de experiência do usuário (UX) com formulários e entrada de dados do usuário

  • Não se entende por que esse problema ainda não foi resolvido
  • Houve uma tentativa de resolver isso de uma vez com XForms, mas os navegadores não implementaram a proposta; em vez disso, frameworks de componentes em CSS/JS passaram a oferecer um conjunto limitado de elementos de formulário

• Não conhecia datalist, mas aparentemente ele não funciona direito no Chrome Android

  • Dá para ver as opções no teclado, mas é a primeira vez que esse recurso foi visto na UI web móvel, e não há confiança de que usuários comuns consigam descobrir como usá-lo
  • No Firefox Android, não há suporte algum

• Foi mencionada a rolagem suave nativa com scroll-behavior: smooth, carrosséis nativos com scroll-snap e animações baseadas em rolagem

  • Recomenda-se limitar o uso desses recursos e empregá-los com cautela, pois muitas vezes trazem efeitos colaterais negativos

• Usar <details> tem a vantagem de permitir buscar o conteúdo com Ctrl+F, enquanto acordeões em JavaScript não podem ser abertos dessa forma, mas <details> pode

• Opinião de que datalist não é uma escolha adequada, a menos que seja para ferramentas internas

  • O padrão não é bom, não dá para mudar o estilo, e quando há limitações de estilo ou de comportamento, JavaScript costuma ser a única opção

• Opinião de que, ao seguir o padrão HTML, tudo fica consistente e pode ser aplicado facilmente a coisas como acessibilidade ou tradução

  • Aponta-se o problema de sites modernos carregarem páginas dinamicamente, a ponto de nem o botão de voltar funcionar

• Foi apontado que CSS pode ser usado como ferramenta para tornar páginas web difíceis de ler

  • Opinião de que deveríamos voltar a navegadores em que o usuário pudesse controlar todos os aspectos de layout e tipografia

• Foi mencionado um dos princípios centrais do desenvolvimento web, a "Regra do Menor Poder (Rule of Least Power)"

  • Opinião de um desenvolvedor de que nunca tinha ouvido falar desse princípio, junto com a curiosidade sobre se ainda existem desenvolvedores frontend que queiram fazer as coisas da forma mais simples possível