Evitando caching quando (e só quando) o arquivo CSS for atualizado
Caching é uma das coisas mais interessantes e, até mesmo, importantes do protocolo HTTP. Mas quando se trata de arquivos CSS, caching pode ser um imenso problema.
Não tenho certeza, mas acho que isso se deve a algum tipo de implementação equivocada do protocolo nos user agents. Mas, o fato é que, quando você atualiza um arquivo CSS, a não ser que o usuário dê um reload (às vezes é necessário um shift + reload), o CSS que está no cache do browser será usado, ao invés da nova versão, que acabou de ser modificada. É um saco, mas há uma maneira bem simples de resolver isso.
O Élcio chamou a atenção para o fato de que, se você coloca uma query string (algo como “?alguma-coisa”) após o nome do arquivo, este é tratado pelo browser como um novo arquivo, e a versão em cache é descartada em favor de uma nova versão, que será baixada do servidor.
Uma solução é colocar uma query string diferente a cada vez que você atualizar o seu CSS. Mas isso demanda um trabalho manual de edição de um outro arquivo, a cada vez que o CSS for alterado. Portanto, não é uma solução tão boa assim, mas é a única opção disponível para páginas HTML estáticas. Seria algo mais ou menos assim:
<link rel="stylesheet" href="estilo.css?1">
Alterou o arquivo, troque o “?1″ para “?2″, e assim sucessivamente.
Mas, e quando o seu site não é formado apenas por páginas estáticas (o que é o cenário mais comum hoje em dia, com a abundância de serviços baratos de hospedagem que dão suporte a linguagens server-side, como PHP), o que fazer para automatizar esse processo?
Uma estratégia que julgo ser interessante, e que tenho usado ultimamente, é utilizar o timestamp da data e hora da última alteração do CSS na query string. Dessa forma, a versão do CSS em cache será descartada sempre quando (e somente quando) o arquivo CSS for alterado.
Se você usa wordpress, isso é bem simples de implementar. Edite no arquivo header.php (ou equivalente, caso você usa uma nomenclatura diferenciada) do seu template a linha que faz a chamada ao arquivo CSS, que pode ser assim:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
ou assim:
<style type="text/css">
@import url(<?php bloginfo('stylesheet_url'); ?>);
</style>
Troque <?php bloginfo('stylesheet_url'); ?> por <?php bloginfo('stylesheet_url'); ?>?<?php echo filemtime(dirname(__FILE__).'/style.css'); ?>
O resultado será algo como <link rel="stylesheet" href="http://brunotorres.net/css/style.css?1152078199" type="text/css">
Pode até ser meio tosco (meio?), mas funciona que é uma beleza, e você nunca mais vai precisar se preocupar com caching dos seus arquivos CSS.
Se você entende um pouquinho de PHP e é pouquinho esperto, você pegou a idéia e pode adaptar isso para qualquer outro sistema. Na verdade, pode até fazer algo mais interessante do que o que eu fiz e mandar pra mim a sua idéia, o que acha?
Grande dica Bruno.
Acabo de implementar e testar no meu Blog.
Adeus edição manual (já vai tarde!) a cada mudança na folha de estilo.
Agora vou adaptar para meu site.
Grato por divulgar.