Evitando caching ao atualizar arquivos CSS

Uma das grandes vantagens de se usar CSS para definir a camada de apresentação (layout) de um site é o fato de que os arquivos
CSS são guardados no cache do browser na primeira vez em que são carregados, evitando assim a necessidade de baixar o arquivo
toda vez que se acessa o site.

Mas isso causa um problema: se você fizer alguma modificação no CSS, o browser só vai baixar a nova versão do arquivo se você der
um reload (F5, em geral). Isso é muito chato e pode “quebrar” totalmente o layout de uma determinada página se forem feitas
modificações também no (X)HTML.

Vejamos como esse problema pode ser resolvido.

Uma solução seria trocar o nome do arquivo CSS. Bom, mas trocar o nome do arquivo não é lá uma solução muito boa. Imagine um site com 100 páginas (X)HTML estáticas. Se você
trocar o nome do arquivo CSS, vai ser obrigado a editar todos os (X)HTML para trocar o nome do CSS no link ou style e
subir todos os arquivos pro servidor. No caso de um site dinâmico com um template para todas as páginas o trabalho seria menor, mas mesmo
assim não é uma solução muito elegante.

Outra solução seria gerar o CSS a partir de um script, por exemplo, PHP. Mas isso está fora de questão já que evitaria o caching
pra sempre, a não ser que você controlasse o caching pelo PHP - o que não é a mais trivial das tarefas.

Diante do problema, ponderei sobre algumas possíveis soluções e a melhor que achei foi fazer uso do
mod_rewrite do apache.

O processo é bem simples. Digamos que você tenha um arquivo chamado estilo.css. Ao atualizá-lo, salve-o como
estilo2.css e use a seguinte regra de reescrita no seu arquivo .htaccess

RewriteEngine On
RewriteRule ^estilo.css$ /estilo2.css

Simples e indolor. Agora é só subir os dois arquivos (.htaccess e estilo2.css) para o servidor e pronto, o CSS vai ser atualizado
automaticamente. Feito isso você pode apagar o arquivo estilo.css original.

[update]A técnica do Élcio é bem mais simples, elegante e eficiente. Hoje em dia, é a que uso.[/update]

30 Mai 2005 | 13 comentários... | Comentar | |

13 Comentários sobre “Evitando caching ao atualizar arquivos CSS”

Faça um comentário

#1 | Marcos

Rewrite Engine On

Corret:

RewriteEngine On

:o)

#2 | eduardo

ehheehehe!!! boa. Mas e pra quem não usa o Apache???

Como seria isso no IIS ??

#3 | Leandro Vieira Pinho

Interessante a técnica, mas ainda acho mais bacana a desenvolvida pelo Élcio. Mas, a detalhe precisa atualizar todas as páginas também, para alterarmos o número (…?1/…?2), a que você apresentou pode ser mais simples, irei testá-la.

Um abraço.

#4 | Flávio Theruo Kaminisse

Muito boa sacada, realmente muito fácil de se implementar.
Acho que você poderia criar algum post no estilo “Resolva a maioria de seus problemas utilizando mod_rewrite”.
Abraço.

#5 | Willian

Leandro, basta você utilizar a função de gerar números aleatóriamente, toda linguagem de programação tem isso.

daí vc sempre teria: estilo.css?1 ou estilo.css?3 ou estilo.css?10, etc…

#6 | Willian

Concordo com o Flávio!
hehehehe

#7 | Thiago Melo

Bom dia Bruno,

Achei a solução encontrada excelente, mas penso que existe uma solução ainda mais fácil que revoluciona até mesmo o processo de desenvolvimento e manutenção de um site.

Se você colocar o seu doctype, meta-tags, title, e o próprio link para sua folha de estilo em um include você teria vários problemas resolvidos como:

- Rápida modificação de palavras-chave e descrição do documento (x)HTML.
- Rápida modificação da folha de estilo. (Não importando se o site possuí 100 páginas (x)HTML estáticas)
- Fácil controle de todos os scripts conjuntos utilizados no site.

É isso aí … Já utilizo há algum tempo esta técnica e estou muito feliz com os resultados. Um grande abraço.

#8 | Ciro Feitosa

Idéia bacana. Esta é melhor que a do Élcio, porque não precisa mudar no xHTML o source do CSS (arquivo.css?1, arquivo.css?2).

OBS.: Adorei a mensagem no final dos posts, sobre presentear :-D. Ah, e preferia a barra lateral na direita, como antes.

#9 | René Pinheiro

Fala ai Bruno blz. Legal a idéia realmente, porém a solução do thiago é muito boa. é o que eu uso hoje em dia.

Abraços,

René Pinheiro.

#10 | Leandro Vieira Pinho

Ao Willian,

“Leandro, basta você utilizar a função de gerar números aleatóriamente, toda linguagem de programação tem isso…”

Sim, eu utilizo durante o desenvolvimento do site. Mas, ao enviar para o servidor eu coloco os números estatícos, se não toda vez o cliente teria que carregar as CSS e sim perderíamos a funcionalidade do cache.

Ao Thiago,

“Se você colocar o seu doctype, meta-tags, title, e o próprio link para sua folha de estilo em um include você teria vários problemas resolvidos como:…”

Boa sacada também, mas descordo no seguinte:

é bom termos meta-tags específicas para cada página, afinal em cada uma temos um conteúdo diferente. Para o title a mesma coisa (principalmente).

Quanto ao doctype, as css e o js realmente seria um boa.

#11 | Thiago Melo

Concordo com você Leandro …

Você está certo quanto à linha de raciocínio que você teve, porém para resolver este problema basta que você coloque o fora do include, assim você pode tratar meta-tags específicas para cada página mantendo, é claro, a folha de estilo, doctype, description, keywords e js no include. Seria basicamente desta forma:

Neste local você tratará meta-tags específicas para cada página.

Já o “title” pode ser gerado dinâmicamente se você quiser com algumas linhas de programação (O Wordpress, por exemplo, já faz isso).

#12 | Thiago Melo

Concordo com você Leandro …

Você está certo quanto à linha de raciocínio que você teve, porém para resolver este problema basta que você coloque-o fora do include, assim você pode tratar meta-tags específicas para cada página mantendo, é claro, a folha de estilo, doctype, description, keywords e js no include. Seria basicamente desta forma:

<!– #include file=”includes/include_doctype.htm” –>
Neste local você tratará meta-tags específicas para cada página.
</head>

Já o “title” pode ser gerado dinâmicamente se você quiser com algumas linhas de programação (O Wordpress, por exemplo, já faz isso).

#13 | Cesar Schneider

acho que a solucao mais adequada para esta situacao seria “estilo.css?” ou como ja foi citado antes “estilo.css?1″ , “estilo.css?2″ e por ai vai.

usando timestamp (qquer linguagem server-side tem isso) não haverá cache.

Bruno Torres ponto net