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.

Publicado por

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.

13 comentários em “CSS e cache”

  1. 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!

  2. >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.

  3. 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!

  4. 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.

  5. É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?

  6. 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.

  7. 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

  8. 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 🙂

  9. Po élcio ! maneirissimo ter dado essa dica, eu sempre via isso.. mas nunca achei nada explicando o que era.. e qnt poder fazer isso em php tb.. ia ser legal.. mas tb não achei .. =X nem google =S.. como faria em php . .vc sabe ?
    vlw ! to adorando a nova fase do blog.. vários posts .. sempre atualizado.. parabéns =]

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *