Executando verificação de segurança...
21
gorpo85
1 min de leitura ·

Eis algumas coisas que podem substituir o JavaScript por CSS🤔

Aqui estão 20 coisas que você pode substituir JavaScript por CSS, usando suas capacidades avançadas, como animações, seletores, pseudo-elementos e transições:

  1. Menu Hamburger Animado: Use CSS :checked e transições para animar a abertura e fechamento do menu.
  2. Tooltip: Utilize :hover e ::after para criar e estilizar tooltips sem JS.
  3. Accordion: Combinando input:checked e label com o CSS display e height, você pode fazer um accordion funcional.
  4. Dropdown Menu: Use :hover ou :focus-within para mostrar e esconder submenus.
  5. Tabs: Com input:checked e display, você pode alternar conteúdo em abas.
  6. Animação de Loading: Crie spinners e barras de loading com animações de CSS.
  7. Animação de Hover: Efeitos de hover como aumento de escala, mudança de cor e rotação podem ser feitos apenas com transições e :hover.
  8. Scroll Suave: A propriedade scroll-behavior: smooth permite rolagem suave sem JS.
  9. Modais: Usando :target ou :checked para mostrar e ocultar modais.
  10. Carrossel de Imagens: Utilizando @keyframes, transições e input:checked, você pode criar carrosséis de imagens.

Se gostou veja mais dessas opções na fonte e deixe seu comentário lá

Fonte: https://chat-to.dev/post?id=700

Carregando publicação patrocinada...
3
condEduardo

Em meus projetos sempre evito ao máximo ter que usar javascript para criar "comportamento estilizado", é muito mais performático deixar o css cuidar de diversos tipos desse "comportamento estilizado". As vezes o sujeito está usando um canhão com javascript pra fazer uma div girar ou correr de um lado para o outro e isso não é legal em termos de performance que é o ponto central da web.

2
2
dealmeida

bom dia, sr.

depende.
para algumas operações com css puro, é mais vantajoso utilizar o javascript, mesmo. para realizar operações em paralelo, basta registrar web workers. assim, não teremos a thread principal bloqueada.
claro, depende de qual vai ser a finalidade.

por debaixo dos panos, dinamicidades que dependem de valores configurados chamados por API (por exemplo, CMS própria) exigem web workers a fim de tornar a renderização mais performática.

para um jogo web orientado a divs, o uso de web workers é obrigatório, além de outras APIs nativas.

1
gorpo85
  • Autor
    Autor

também tenho utilizado muito disso que você citou, e de longe da-nos muito mais performance do que ao utilizar o js para cuidar do estilo de nossas paginas

2
DivinSphere

Sempre tenho dificulade na parte dos Carrossels, ainda não consegui implementar um do zero apenas usando as bibliotecas já prontas

Interessante a ideia de tentar implementar essas coisas utilizando apenas CSS e HTML sem o JS

2
2
BrunoC

Utilizar CSS ao invés de Js traz algum benefício? Gostaria de saber se faz sentido ajustar alguns códigos para além do aprendizado pessoal...

3
gorpo85
  • Autor
    Autor

Pra mim quanto mais coisas puderes manter fora do DOM, mais rápido o js mais exigente será executado. O css só precisa de carregar uma vez e depois toda a sua funcionalidade está disponível. Quanto mais pequenas coisas puderes descarregar para o html ou css, mais recursos podes dedicar às verdadeiras funções do js. Se tens interesse podes participar desta discussão aqui

0
3
clacerda

Ainda existe a questão da acessibilidade, tem gente que só navega na internet sem js. Esperar que as pessoas tenham um navegador com js habilidatado não deveria nem ser a norma.. Se seu dite precisa de js para funcionar, ele esta quebrado para muita gente. Pense nisso!

1
0
1