CSS random() Chegou! Como Usar Hoje com um Polyfill Cross-Browser

Por Que CSS random() Importa?

Olha só, pessoal! Durante anos, nós desenvolvedores recorremos ao JavaScript para adicionar aleatoriedade controlada às interfaces—confetes, campos de estrelas, grids aleatórios. Mas o CSS está numa missão de absorver padrões comuns de UI em standards declarativos, e o random() é o mais novo passo nessa direção.

O Safari foi o primeiro navegador a suportar CSS random() no final de 2025, mas Chrome e Firefox ainda estão trabalhando nisso. Se você quer usar esse recurso hoje em todos os navegadores, precisa de um polyfill. Este guia mostra como!

Fonte: Este artigo é baseado no post original do CSS-Tricks sobre o pacote css-random-polyfill.

Como o Polyfill Funciona

O polyfill usa uma propriedade esperta do CSS: custom properties podem armazenar qualquer string, mesmo que o navegador não entenda a sintaxe. O JavaScript consegue ler esses valores via getComputedStyle() e substituí-los.

Olha o código principal:

import { calc } from "@csstools/css-calc";

if (!CSS.supports("width", "random(0px, 100px)")) {
  // Esconde os elementos enquanto resolvemos os valores aleatórios
  const styleTag = document.createElement("style");
  styleTag.textContent = ".randomized { display: none; }";
  document.head.appendChild(styleTag);

  const elementIDs = new WeakMap();
  const documentID = crypto.randomUUID();

  document.querySelectorAll(".randomized").forEach((element) => {
    const styles = getComputedStyle(element);
    [...styles]
      .filter((property) => property.startsWith("--random"))
      .forEach((propertyName) => {
        const css = styles.getPropertyValue(propertyName);
        const value = resolveRandom(css, {
          element,
          propertyName,
          documentID,
          elementIDs,
          calcFn: calc,
          crypto,
        });
        element.style.setProperty(propertyName, value);
      });
  });

  // Mostra os elementos novamente
  if (styleTag.parentNode) {
    styleTag.parentNode.removeChild(styleTag);
  }
}

Passo a Passo

1. Detecção de suporte: Se o navegador já suporta random(), não faz nada.
2. Esconde elementos: Temporariamente esconde elementos .randomized para evitar flicker.
3. Lê custom properties: Percorre todas as propriedades com prefixo --random.
4. Resolve valores: Usa @csstools/css-calc para interpretar a expressão random().
5. Aplica estilos inline: Define o valor resolvido de volta no elemento.
6. Mostra novamente: Remove a tag de estilo temporária.

O insight principal é que custom properties CSS são extremamente permissivas—aceitam qualquer string, mesmo sintaxe inválida. Isso dá ao JavaScript um ponto de extensão limpo sem precisar parsear folhas de estilo.

Limitações e Cuidados

• Status de rascunho: CSS random() ainda está em fase inicial de exploração. Mudanças significativas são esperadas.
• Atualizações dinâmicas: O polyfill só processa estilos computados no carregamento inicial. Mudanças dinâmicas no DOM não são reavaliadas.
• Quirk de distribuição: A biblioteca @csstools/css-calc nem sempre gera valores uniformemente distribuídos sem um parâmetro base—o polyfill corrige isso injetando uma base aleatória.
• Não é uma implementação completa: O polyfill suporta um subconjunto da sintaxe nativa. Quando o suporte nativo virar baseline, você pode remover o script e seu CSS continuará funcionando.

Próximos Passos

• Teste o demo de starfield para ver o polyfill em ação.
• Explore random-item() (bônus Chromium-only) combinado com custom functions CSS para seleção aleatória de listas.
• Fique de olho no cronograma de implementação do Chrome e Firefox.

Leitura relacionada: Se você se interessa por ferramentas de IA responsáveis, confira nosso guia sobre ferramentas de IA para desenvolvedores responsáveis. Para automação de workflows, veja Introducing Daggr: Build AI Workflows in Code.

Conclusão

CSS random() é um vislumbre de um futuro mais declarativo para o web design. Enquanto o suporte nativo ainda é limitado ao Safari, o polyfill deixa você experimentar hoje—e seu código permanecerá compatível quando o suporte nativo chegar.

A abordagem também revela um padrão mais amplo: usar custom properties CSS como ponte entre CSS declarativo e JavaScript imperativo. Essa técnica pode ser aplicada a outros recursos CSS emergentes aguardando suporte cross-browser.

Bora randomizar!