CSS e cache

Uma dica:

Durante o desenvolvimento, costumo usar:
@import url(estilo.css?<%=rnd%>);

Assim não tenho problemas com cache.

Depois que o site vai pro ar, coloco:
@import url(estilo.css?1);

Quando preciso fazer alguma alteração, mudo o número:
@import url(estilo.css?2);

Assim, quem costuma visitar constantemente o site não vai ficar com a versão antiga em cache.

Obviamente, você pode fazer a mesma coisa com PHP, Python, JSP, ColdFusion… Basta trocar rnd pela função de random da sua linguagem.

Elcio: Elcio é sócio fundador da Visie Padrões Web. Pioneiro no uso e divulgação dos padrões do W3C no Brasil, Elcio já treinou equipes de dezenas de empresas como Globo.com, Terra, Petrobras, iG e Locaweb. Além disso, tem dirigido as equipes da Visie no desenvolvimento de projetos web para marcas como Brastemp, Itaú Unibanco, Johnson & Johnson e Rede Globo.

View Comments (12)

  • Grande Elcio.
    Muito bacana a dica, muito simples, porém resolve muito bem a questão do cache e css.
    Seguindo tua dica eu faço +/- assim:

    Na primeira linha do meu css coloco a data/hora da ultima edição do arquivo (/*250320091556*/).
    Criei uma funçao em php que lê essa string e no link do meu css escrevo essa string logo depois do .css?

    Aí sempre que atualizo alguma linha no meu css antes de enviar o arquivo é só alterar a data/hora no início do arquivo e pronto.

    Parabéns pelo blog, conteúdo sempre muito bom!

  • >Considere-se um merda aquele que não consegue
    >gerar números aleatórios na
    >linguagem em trabalha!

    Considere-se um *****, pois esqueceu a palavra 'que' na frase acima!
    hahahaahahahahahaa

    Pros novatos:

    Bom trabalho Elcio, o blog está legal.

  • Considere-se um merda aquele que não consegue gerar números aleatórios na linguagem em trabalha!

    Esses novatos preguiçosos e sem neurônios alias não chamemos eles de: AMEBAS!

    Saudações!

  • Elcio, vc é realmente um mestre.
    Comé que acha uma solução tão simples...

    Muito boa a sua solução.
    Para o pessoal do php que está com dúvida aí acima, o nome da função para geração de aleatórios no php é a mesma do asp: rand() - http://br.php.net/rand.

  • Élcio, porque que acontece isso? Não entendi muito bem o porquê que faz o arquivo sempre ser carregado.... Pois se o arquivo não for atualizado o do cache vai ser usado? Ou SEMPRE é carrgado o arquivo?

  • eu uso assim
    echo '';

    dai nem preciso ficar me preocupando se atualizei o css o tal fica uma coisa mais automatica.

  • Cabe observar que "não vai ficar com a versão antiga em cache" não corresponde completamente à realidade. Vai ficar com todas as versões em cache, mas somente a última versão é solicitada pelas páginas atualizadas e, portanto, somente ela é usada.
    A permanência em cache será conforme as regras do navegador.

  • Bom!
    Já estou pensando em fazer 3 css, num projeto que envolve mudanças temporárias... daí cada css seria carregado em horas diferentes do dia, mudando sutilmente a aparência da página, sabe, aquela coisa de user experience...

    Legal isso de cache, hein ? :)

    Escrevi há uns dias algo mais básico pro pessoal.

    falouuu

  • Eu tb uso xD
    Não só pra isso, tb uso pra js e foto.
    Principalmente para avatar quando o cara pode fazer upload para trocar, então boto o timestamp da data de atualização :)