Como gerar números aleatórios com CSS

Eu não gosto de JavaScript

Se você não sabe o que é JavaScript ou por que isso importa, me permita fazer um breve resumo: JS é uma das linguagens de programação mais populares do mundo (ela é usada em 98% de todos os websites!) e ele permite que o seu navegador faça coisas incríveis como logar no seu Gmail ou assistir os vídeos da Curso-R no YouTube.

O problema é que o JS é tão sensacional que as pessoas começaram a usar ele em todo lugar. Apesar de o JS ser de fato necessário para criar páginas dinâmicas, ele não é necessário na maioria dos lugares; o termo “crise de obesidade dos websites” começou a ser usado para descrever o fato de que, hoje em dia, a maior parte dos sites focam muito mais no visual e em dinamismos desnecessários do que no conteúdo e na acessibilidade.

Eu poderia ficar aqui falando sobre como o JS deixa as páginas mais inseguras, ele normalmente nem é necessário e é um custo absurdo para quem tem uma conexão lenta de internet, mas acho que você já entendeu o meu ponto. Eu queria fazer um rolador de dados (ou seja, um gerador de números aleatórios) leve e sem JavaScript.

CSS salvou o dia

Além do JS, um dos maiores componentes do desenvolvimento web é o CSS, que descreve a aparência das coisas na página. Mas o que isso tem a ver com o gerador de números? Bem, primeiramente, o CSS é super leve e 100% seguro, mas ele também tem uma funcionalidade ignorada por muitos chamada Animations Animations.

Eu quase não acreditei quando eu li pela primeira vez o post Creating randomness with pure CSS. O resumo do artigo é que você pode usar CSS para mover uma imagem de um lado para o outro por trás de uma fenda virtual e parar ela só quando o usuário clica em um botão. Se a sua imagem for um monte de cartas de baralho lado-a-lado, apenas uma delas vai aparecer quando a animação parar.

A grande sacada é que, se a animação for rápida o suficiente, as pequenas variações nos cliques do usuário vão efetivamente fazer com a que a fenda mostre uma carta aleatória cada vez que ela for clicada!

Esse era o substituto do JS que eu precisava. Agora tudo que eu precisava fazer era aplicar esse método a uma lista de números ao invés de uma imagem. Demorou um tempo, mas eu vasculhei a internet em busca de uma solução e eventualmente eu encontrei ela no caça-níqueis sem JS do iokaravas.

O código dele recebe três listas de números e anima elas para cima e para baixo até que elas caiam na combinação configurada por quem fez o programa. Apesar de ser determinístico, isso poderia ser integrado com a técnica do Creating randomness para criar exatamente o que você vê agora no topo desta página.