Refresh de CSS para o Mozilla Firefox

Por: Henrique Costa PereiraTuesday 1 August 2006 às 07:1

Quando estou desenvolvendo um site novo, uma das coisas que mais acho chato é ter que dar refresh na página inteira para poder ver apenas atualizações que foram feitas na minha folha de estilos externa. Tempos atrás navegando pela Web, encontrei um script muito muito interessante que faz o que eu sempre quis fazer: ele força o re-download somente do CSS.

Isso funciona da seguinte maneira: seja em um servidor interno ou externo, quando você faz atualizações somente no CSS e aperta F5 em qualquer browser, você acaba baixando todo o XHTML e as imagens novamente. Quando está trabalhando em um servidor remoto, isso é ainda mais chato e acaba tomando alguns segundos precisosos do seu tempo. Com o JavaScript demonstrado abaixo, você cria um botão na sua bookmarks toolbar do Mozilla Firefox (sim, somente no Firefox, o Internet Explorer não possuiu este recurso), e toda vez que quiser dar um refresh somente nas folhas de estilos do site que você está desenvolvendo, basta clicar no botão, que ele deleta os arquivos de CSS do cache da sua máquina e faz o download novamente. E bem rapidinho.

Para criar este botão, faça o seguinte. Clique com o botão direito sobre a sua “bookmark toolbar” no Firefox. No menu contextual que abrir selecione “New Bookmark“. No campo “name” digite algo do tipo “CSS Refresh” e no campo “location“, cole o seguinte script:


javascript:void(function(){var  i,a,s;a=document.getElementsByTagName('link');for(i=0;i<a.length;i++){s=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href)  {var  h=s.href.replace(/(&|%5C?)forceReload=\d+/,'');s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new  Date().valueOf())}}})();

Agora, sempre que estiver no Firefox fazendo alterações de CSS, basta clicar neste botão pra atualizar somente sua folha de estilos. Infelizmente, eu perdi o artigo onde originalmente eu encontrei este código. Se alguém souber, por favor me informe para que eu possa dar os devidos créditos ao autor do script.

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!

Tags: Browser CSS JavaScript Mozilla Firefox

39 Comentários para “Refresh de CSS para o Mozilla Firefox”

# 1° Tiago Bega Tuesday 1 August 2006 às 07:1 AM GMT

Maravilha, fiz aqui e funcionou perfeitamente ontem mesmo estava imaginando alguma maneira de fazer isto.
Muito bao a indicação

# 2° Maicon Junches Tuesday 1 August 2006 às 08:1 AM GMT

Isso é ÓTIMO!

Abraços!!

# 3° Edgar Tuesday 1 August 2006 às 08:1 AM GMT

Realmente muito interessante.

# 4° Marcos V Bohrer Tuesday 1 August 2006 às 08:1 AM GMT

Perfeito!

# 5° Thalis Valle Tuesday 1 August 2006 às 09:1 AM GMT

Parabéns! Muito útil.

# 6° Raphael Tuesday 1 August 2006 às 10:1 AM GMT

Aqui tbm funcionou =)

Valew !!!

# 7° Dedexter Tuesday 1 August 2006 às 10:1 AM GMT

Realização de um sonho! ^^’

# 8° Xmedia Webfactory » Arquivo do Blog » CSS Refresh Tuesday 1 August 2006 às 11:1 AM GMT

[...] O Henrique deu uma dica muito boa sobre como adicionar no Firefox um botão para fazer o refresh somente do CSS da página ao invés de recarregar a página toda. Leiam lá. [...]

# 9° Lucas Alves Tuesday 1 August 2006 às 11:1 AM GMT

Caramba muito bom….muito útil.
valeu por compartilhar!

# 10° Carlos Eduardo Tuesday 1 August 2006 às 12:1 PM GMT

Muito boa!

Era isso que eu estava precisando… heheh =)

# 11° Arnaldo Tuesday 1 August 2006 às 01:1 PM GMT

Nao gostei!
Qual é o grande problema e a grande preguiça de dar F5 na página inteira?

# 12° Rael B. Riolino Tuesday 1 August 2006 às 02:1 PM GMT

Legal… Eu costumo fazer tudo no meu comp antes de publicar… mas isso com certeza é util! ;-D

valeu

# 13° O'Marin Tuesday 1 August 2006 às 02:1 PM GMT

Boa dica XD

Arnaldo, o Henrique descreveu no texto o problema de ter que dar um refresh (F5) só para visualizar uma alteração no CSS.

# 14° Ricardo Tuesday 1 August 2006 às 05:1 PM GMT

Muito bom isso ai… Segundo meus testes funciona no Ópera tbem … valeu !!!

# 15° Tulio Faria Tuesday 1 August 2006 às 06:1 PM GMT

muito útil, valeu

# 16° Marcus Danillo Tuesday 1 August 2006 às 08:1 PM GMT

Funciona no Opera também. Excelente.

# 17° Thomaz Leite Wednesday 2 August 2006 às 03:2 AM GMT

Dica muito boa para quem edita sites remotamente. Outra opção é usar a extensão editCSS, que abre uma barra lateral com o código CSS. Qualquer alteração nesse código aparece instantaneamente no site.

# 18° Rodrigo Soriano Wednesday 2 August 2006 às 07:2 AM GMT

Fantástico.

# 19° Ricardo Barato Wednesday 2 August 2006 às 08:2 AM GMT

Não funciona com endereços locais!

Somente remoto =/

# 20° Ricardo Barato Wednesday 2 August 2006 às 08:2 AM GMT

Opa, corrigindo, ele só recarrega quando a folha de estilo é carregada por

No meu caso que uso pois pusso N folhas de estilo ele já não funciona!

# 21° Marcus de Oliveira Silva Wednesday 2 August 2006 às 08:2 AM GMT

Caramba! Muito legal mesmo…muito útil!
O que algumas linhas de codigo bem bolado
nao fazem né!

Abraços

# 22° renato cruz Wednesday 2 August 2006 às 04:2 PM GMT

Fiz no Firefox e no Internet Explorer normalmente… Pq não funcionaria no IE, Henrique?

# 23° Arnaldo Wednesday 2 August 2006 às 04:2 PM GMT

Ainda acho inútil…

Me desculpe…
Questão de opinião…

Merecia uma coluninha na seção DICAS, nao um artigo de destaque.

# 24° Bruno Chaves Wednesday 2 August 2006 às 09:2 PM GMT

muito bom, porem o costume de apertar f5 ainda supera eu clicar no botao rsrs :)
mas muito fera mesmo
principalmente para sites remotos

# 25° Bruno Dulcetti Thursday 3 August 2006 às 12:3 PM GMT

Interessante Henrique… Sempre apertava F5, mas agora vou usá-lo… perfeito… ;)

Jah tinha pensado em algo assim, mas naum manjo js para criar tal script…

Akele abraço…

# 26° RodrigoWD Friday 4 August 2006 às 01:4 PM GMT

Ctrl + F5 da refresh limpando o cache da pagina atual.

# 27° Caio Alves Friday 4 August 2006 às 04:4 PM GMT

Muito bom esse código, vai poupar bastante o meu tempo na hora do desenvolvimento.
Quando ao link dos artigos, eu dei uma procurada e achei esses dois links:

http://mastodon.dojotoolkit.org/~david/recss.html
(Essa parece ser a página que mantém o script original, desenvolvido por David Schontzler)

http://pinds.com/articles/2006/02/13/re-recss
(Nesse artigo, o autor disponibilizou um update para funcionar no Safari – já atualizado no link acima)

# 28° Thiago Paes Friday 4 August 2006 às 05:4 PM GMT

meudues, show de bola.. chega de ctrl+f5 haahaha

# 29° Leandro Vieira Pinho Sunday 6 August 2006 às 09:6 AM GMT

Muito bacana este recurso, gostei.

Seria interessante também um script que funcionasse quando fosse utilizado o style e não o link.

Conhece algum?

# 30° Tiago Celestino Sunday 6 August 2006 às 03:6 PM GMT

Interessante, mas prefiro ainda dá o f5 na página inteira.

# 31° Felipe Sander Monday 7 August 2006 às 10:7 PM GMT

F5 atualiza a página inteira, imagens, textos, etc, e com este botão atualiza somente o código CSS, ou seja, economiza banda e tempo do refresh.

Sensacional.

# 32° marko Wednesday 30 August 2006 às 04:30 PM GMT

muito bom, adorei!!

# 33° Marcos Monday 4 September 2006 às 03:4 PM GMT

Legal d + cara

# 34° Thiago Risso Thursday 23 November 2006 às 08:23 AM GMT

Muito boa mesmo..
Fiz um ajustezinho pois no minha aplicação na funcionava pois ela contém frames…
Segue abaixo modificação para funcionar com frames :

void( function(){var i,a,s,f,fs;f=document.getElementsByTagName(”frame”);for(var ss=0;ss < f.length;ss++){fs = f[ss];if(fs.contentWindow){a=fs.contentWindow.document.getElementsByTagName(’link’); for(i=0;i=0&&s.href){ var h=s.href.replace(/(&|%5C?)forceReload=d+/,”); s.href=h+(h.indexOf(’?')>=0?’&’:'?’)+’forceReload=’+(new Date().valueOf())}}}}})();

# 35° Thiago Risso Thursday 23 November 2006 às 09:23 AM GMT

ops… O script acima funciona só em frames….
Assim funciona tanto em frames quanto sem :

javascript:void( function() { var i,a,s,f,fs;f=document.getElementsByTagName(”frame”); if(f.length==0){f=[window]}; for(var ss=0;ss < f.length;ss++) { fs = f[ss];fsc =fs.contentWindow ? fs.contentWindow : (fs.document ? fs : false); if(!fsc)continue; a=fsc.document.getElementsByTagName(’link’); for(i=0;i=0&&s.href){ var h=s.href.replace(/(&|%5C?)forceReload=d+/,”); s.href=h+(h.indexOf(’?')>=0?’&’:'?’)+’forceReload=’+(new Date().valueOf()) } }}})();

# 36° jorge Monday 4 December 2006 às 09:4 PM GMT

Algumas pessoas quando estão escrevendo e erram,
costumam apagar a linha onde erraram
e refazer a linha novamente, outras
preferem apagar TUDO começar de novo.
Realmente isso é uma questão de estilo,
e apagar somente os estilos pode ser uma coisa
muito divertida se você está montando um página mutante !
é isso aí !

# 37° Netlus » Blog Archive » Gerador de CSS Thursday 22 February 2007 às 05:22 AM GMT

[...] baseado no truque feito pelo Henrique Costa do Revolução.etc, limpei o código original e o reescrevi de forma que [...]

# 38° heitor Wednesday 18 April 2007 às 12:18 PM GMT

impressionate!!!!!

Avisos
Os itens com asterisco ( * ) são campos de preenchimento obrigatório.
Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.
Todos devem se identificar através de e-mail válido.
Os e-mails dos usuários não serão divulgados no site.
Comentários:


Assine por feed

assinantes Assine o feed do Revolução Etc

Sobre o Revolução Etc

Foto do autor Henrique Costa Pereira O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.

Livros que vão colocar minhocas na sua cabeça:

  • SEO Otimização de Sites - Paulo Teixeira
  • Não me faça pensar! - Steve Krug
  • Google Adwords a Arte da Guerra - Ricardo Vaz Monteiro
  • Design para Internet: Projetando a Experiência Perfeita - Felipe Memoria
  • Sopro no Corpo: Vive-se de Sonhos - Marco Antônio de Queiroz (MAQ)
  • 250 Segredos para Web Designers - MOLLY E. HOLZSCHLAG
  • O design do dia a dia - DONALD A. NORMAN
  • Ser e o Nada - Jean-Paul Sartre
  • Apocalípticos e Integrados - Umberto Eco
  • Ergodesign e Arquitetura de Informação - LUIZ AGNER
  • The Art and Science of Web Design - Jeffrey Veen
  • Ansiedade de Informação 2 - RICHARD SAUL WURMAN
  • Criando Páginas Web com CSS - ANDY BUDD, CAMERON MOLL, SIMON COLLISON
  • Mobile Web Design - Cameron Moll
  • Sigam-me no Twitter

Me encontre

Lugares onde digitalmente eu costumo estar presente.

Anúncios

Blogroll:

Alguns sites interessantes e blogs de amigos que eu leio com frequência. Em ordem alfabética.

Pessoas que trabalham comigo:

Sites dos colegas de trabalho na Webroom.

Já trabalharam comigo:

Som que faz a minha cabeça!

Procurando inspiração? Esta é uma breve lista do que eu ouço!

  • Diana Krall - The Very Best Of
  • U2 - How to dismantle an atomic bom
  • U2 - 18 singles
  • The Essential - Bob Dylan
  • Bob Dylan - Modern Times
  • Miles Davis - Cool & Collected
  • Miles Davis - Prestige Profiles Vol 1
  • Pink Floyd - The Division Bell
  • Pink Floyd - The wall
  • Pink Floyd - Delicate Sound Of Thunder
  • John Coltrane - The Best of John Coltrane
  • The beatles - The Beatles 1