Loading
carregando...

Como evitar cache do CSS na máquina do usuário


Olá pessoal!

Hoje decidi compartilhar com todos um método muito simples de fazer com que o navegar faça o download dos arquivos css toda vez que o usuário visitar seu site.

Depois de algumas pesquisas descobri que pode-se definir um determinada versão para o css, e a cada vez que for alterado basta somente alterar a versão do arquivo CSS que queremos forçar o navegador a carregar.

Mas como definir essa tal versão para o CSS?...
E como fazer o navegador entender q o css do site precisa ser carregado novamente com as novas alterações sem ser preciso alterar o nome do seu arquivo CSS?

É muito simples, basta definir-mos uma "tal variável" em nosso arquivo css como se fosse no PHP...

Em vez de chamar-mos o CSS do site assim:

  1.  
  2. <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
  3.  


Podemos chamar o CSS para a página de uma forma que o navegador entenda que a versão do CSS que está no cache da máquina é antiga.
Mas como fazer isso?...

Muito simples no fina da URL onde chamamos o arquivo colocamos um ponto de interrogação "?" e após o ponto definiremos uma versão para o CSS em questão, tipo 1.0, 01, etc, pode definir como desejar.

Para que fique mais claro como se define a versão veja o exemplo abaixo:

  1.  
  2. <link type="text/css" rel="stylesheet" href="style.css?1.0" media="screen" />
  3.  


Dessa forma cada vez que fizermos alguma alteração no CSS podemos definir uma versão diferente e isso forçará o navegador a fazer o download novamente do arquivo CSS mesmo que já tenha um cache não expirado salvo na máquina do usuário.

Existe outra forma de se fazer isso utilizando o PHP dessa outra forma toda vez que o usuário visitar seu site ou atualizar uma página do site o navegador irá fazer o download do CSS em questão mesmo que o usuário tenha acabado de visitar seu site.

Também é muito simples basta usar a função time() do PHP no final da URL do arquivo em vez de definir-mos uma tal versão para o CSS.

Mas como faço isso?...

Veja no exemplo abaixo:

  1.  
  2. <link type="text/css" rel="stylesheet" href="style.css<?php echo time(); ?>" media="screen" />
  3.  


Pronto!... dessa forma toda vez que o usuário der um famoso F5 ou visitar seu site o navegador será forçado a fazer o download novamente do arquivo CSS.

Mas como tudo na vida existe uma restrinção para o uso desse exemplo acima, toda vez que o usuário entrar no site o navegador irá fazer o download novamente do arquivo, quando o usuário clicar em outra página novamente irá fazer o download do arquivo e assim por diante.

Imagine milhares de usuário visitando seu site ao mesmo tempo e o servidor sendo obrigado a distribuir banda para todos, isso exigiria um consumo muito alto de banda!!!

Para evitar tal problema, usaría-mos a função filemtime() também do PHP, isso faz com que o navegador faça o download do arquivo somente quando ouver alguma alteração no mesmo.

Veja no exemplo como utilizar essa funçao:

  1.  
  2. <link type="text/css" rel="stylesheet" href="style.css?<?php echo filemtime('style.css'); ?>" media="screen" />
  3.  



Esse último exemplo eliminaria também o primeiro que teria q definir uma versão toda vez que alterasse o arquivo CSS.
Mas tudo isso varia muito de acordo com cada aplicação que irá utilizar o CSS.

Dúvidas postem comentários!

Vlw ... tt


Autor: Dárcio Gomes
Data: 14/08/2012 00:00:00