Refresh de CSS para o Mozilla Firefox

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.

  • Tiago Bega

    Maravilha, fiz aqui e funcionou perfeitamente ontem mesmo estava imaginando alguma maneira de fazer isto.

    Muito bao a indicação

  • Maicon Junches

    Isso é ÓTIMO!

    Abraços!!

  • Edgar

    Realmente muito interessante.

  • Marcos V Bohrer

    Perfeito!

  • http://www.thalisvalle.com Thalis Valle

    Parabéns! Muito útil.

  • Raphael

    Aqui tbm funcionou =)

    Valew !!!

  • Dedexter

    Realização de um sonho! ^^'

  • http://lucasaf.wordpress.com Lucas Alves

    Caramba muito bom….muito útil.

    valeu por compartilhar!

  • http://project47.viscountbox.com Carlos Eduardo

    Muito boa!

    Era isso que eu estava precisando… heheh =)

  • Arnaldo

    Nao gostei!

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

  • Pingback: Xmedia Webfactory » Arquivo do Blog » CSS Refresh()

  • http://www.techzine.com.br Rael B. Riolino

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

    valeu

  • O'Marin

    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.

  • Ricardo

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

  • http://www.tuliofaria.net Tulio Faria

    muito útil, valeu

  • http://danillonunes.com Marcus Danillo

    Funciona no Opera também. Excelente.

  • Thomaz Leite

    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.

  • http://www.lynxdesign.com.br Rodrigo Soriano

    Fantástico.

  • Ricardo Barato

    Não funciona com endereços locais!

    Somente remoto =/

  • Ricardo Barato

    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!

  • http://www.cjb.net/ Marcus de Oliveira S

    Caramba! Muito legal mesmo…muito útil!

    O que algumas linhas de codigo bem bolado

    nao fazem né!

    Abraços

  • http://www.renatocruz.com.br renato cruz

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

  • Arnaldo

    Ainda acho inútil…

    Me desculpe…

    Questão de opinião…

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

  • Bruno Chaves

    muito bom, porem o costume de apertar f5 ainda supera eu clicar no botao rsrs :)

    mas muito fera mesmo

    principalmente para sites remotos

  • http://www.brunodulcetti.com/blog/ Bruno Dulcetti

    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…

  • http://www.digmedia.com.br RodrigoWD

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

  • Caio Alves

    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:

    (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)

  • Thiago Paes

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

  • Leandro Vieira Pinho

    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?

  • http://tcelestino.blogspot.com Tiago Celestino

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

  • Felipe Sander

    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.

  • marko

    muito bom, adorei!!

  • Marcos

    Legal d + cara

  • Thiago Risso

    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())}}}}})();

  • Thiago Risso

    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()) } }}})();

  • jorge

    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í !

  • Pingback: Netlus » Blog Archive » Gerador de CSS()

  • heitor

    impressionate!!!!!

  • Pingback: Algumas coisas interessantes para se fazer com JavaScript e/ou CSS « Universo Faces()

  • http://twitter.com/acustodioo ac

    Hoje temos o css reloader https://addons.mozilla.org/en-US/firefox/addon/cs… bem bacana é só apertar o F9 =D