Refresh de CSS para o Mozilla Firefox

Por: Henrique Pereira

Tuesday 01 August 2006 às 07:40

Categoria: HTML / CSS / JavaScript

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.

Comentários: 39

CSS Tooltip

Por: Henrique Pereira

Saturday 25 February 2006 às 18:25

Categoria: HTML / CSS / JavaScript

Encontrei um artigo interessante no CSS Beauty, uma galeria de web sites que seguem os padrões. Trata-se de um texto sobre como personalisar os tool tips do atributo title usando JavaScript e CSS.

Resolvi implementar aqui como teste e achei interessante. Na página de teste do artigo você encontra o script e o CSS disponível para reproduzir no seu site. Testei no Internet Explorer, Mozilla Firefox e Opera e funcionou perfeitamente nos três. Usando um JavaScript não obstrusivo e apenas uma regra de CSS você consegue personalizar a maneira com que os browsers exibem o title inserido nos hyperlinks.

Um ponto negativo é que o script é feito apenas para personalizar o title inserido em hyperlinks. Seria legal se alguém estivesse disposto a adaptá-lo para personalizar todos os title inseridos em todas as tags que o suportam, como abbr, acronym etc. Se alguém se interessar, faça as alterações no script e me envie novamente que eu posto aqui dando os devidos créditos.

[ UPDATE - 26/02/2006 - 08:03h ]

O Robson Júnior, seguido pelo Newton Horta fizeram atualizações no JavaScript do qTip. O Robson até escreveu um post (o site não existe mais) descrevendo a alteração feita. O script que ele alterou é o que está sendo usado aqui agora. E seguindo a sugestão que eu encontrei no script do Newton (o arquivo foi removido) eu adicionei no array do script do Robson o elemento input.

[ /UPDATE ]

Comentários: 12

Mozilla Firefox 1.5 Release

Por: Henrique Pereira

Wednesday 30 November 2005 às 01:13

Categoria: Internet / Web

Minhas primeiras impressões são as melhores possíveis. As principais alterações no novo Mozilla Firefox foram torná-lo mais rápido na navegação, o que pode ser notado facilmente; implementação do que eles chamam de FastBack, que te permite voltar a uma página já visitada instantaneamente, sem refresh ou delay, update automático, função de drag and drop nas abas, suporte a CSS3 e outras coisas mais.

O browser realmente está mais rápido como prometeram e a publicidade da imprensa e o apoio do Google com certeza deve incomodar e muito o Internet Explorer que só tem tido baixas no último ano. Algumas gafes como a chamada para os desenvolvedores corrigirem os hacks, ou seja, fazer o serviço que eles não fizeram, o boato ou notícia de que os bugs de CSS não serão corrigidos completamente, o que vai manter o Firefox como o melhor browser a adotar os padrões e a queda para 85% da fatia do mercado, considerando os 95% anos atrás, tem deixado a Microsoft de cabelo em pé.

Algumas extensões utilizadas na versão anterior não vão funcionar perfeitamente, mas no geral a maioria já possui atualizações. Na instalação ele te dá a opção de atualizar automaticamente todas as extensões que já estão instaladas na versão anterior. A extensão LiveLines não vai funcionar e até esta manhã, o próprio Mozilla não conseguiu fazer o update automaticamente. Mas já tem alguém que deu um jeito nisso e disponibilizou uma versão do LiveLines que funcione.

[UPDATE]

Stuart Colville do Muffin Research Labs encontrou uma solução interessante para as extensões que não funcionam na nova versão 1.5

1. Faça o Download da extensão, ao invés de instalar diretamente
2. Renomeie o arquivo .xpi para .zip
3. Abra o arquivo .zip e edite o arquivo install.rdf (clique com o botão direito e edite com o NOTEPAD por exemplo)
4. Altere a variável maxVersion para 1.6
5. Renomeia novamente o arquivo, agora de .zip para .xpi
6. Instale a extensão, clicando em File -> Open File CTRL+O

O Flávio Japs encontrou esta solução e fez os testes e realmente funciona.

[/UPDATE]

Comentários: 14

Button Replacement

Por: Henrique Pereira

Monday 07 November 2005 às 03:51

Categoria: HTML / CSS / JavaScript

A estilização de input do tipo submit ou button não é algo novo. Procurando um pouco no Google, você encontrará dezenas de artigos ensinando como estilizar um input (o site foi desatualizado) submit ou button por css. Dependendo do layout os resultados obtidos podem até ser satisfatórios, mas a maioria dos webdesigners vão querer utilizar uma imagem que se harmonize melhor com o restante do layout do que um botão padrão estilizado. Dessa forma, quando se quer ter botões visuais, a alternativa comum é utilizar os input do tipo image, onde você insere um “src” de uma imagem que será utilizada como botão.

Bom até aqui nada de novo, mas imagine se você pudesse utilizar um botão do tipo submit ou button, colocar uma classe nele e alterar a aparência de todos os botões do seu site exclusivamente por CSS? Me deixe explicar melhor.

Eu desenvolvi uma maneira diferente de se utilizar botões visuais sem utilizar botões do tipo “image”. Eu disse “eu desenvolvi” por que eu não encontrei nada na internet sobre isso. Esforcei-me, procurei, mas nada encontrei. Se você já ouviu falar sobre o cálculo infinitesimal de Leibniz e Newton, com certeza deve saber que ambos chegaram às mesmas conclusões matemáticas, separadamente mais ou menos na mesma época. A ambos é creditado a invenção do cáculo infinitésimal. Por isso se você encontrar este código por aí, pelo menos algo publicado anteriormente me avise.

A técnica consiste no seguinte. Se você utilizar uma das diversas formas de image replacement para alterar a aparência de botões exclusivamente por CSS ela não vai funcionar. Testei algumas e a mais comum e eficiente é a que utiliza text-indent negativo para retirar o conteúdo e colocar uma imagem por CSS no lugar. Na verdade isto até poderia funcionar em alguns browsers com certas limitações, mas em outros não. Ao invés disso, tive que adaptar o CSS a realidade do botão.

No MSIE utilizei

text-indent:0px; line-height:999999px; border:0px;

Isso tem que ser inserido como hack, para que somente o Internet Explorer possa interpretar assim. Sem nenhum segredo a mais. Isso é necessário porque no Mozilla eu coloco um text-indent vantajoso para poder fazer a troca, o que não pode ser concebido pelo Internet Explorer.

Foi relativamente estranho inicialmente descobrir a importância do border:0px (na verdade você não precisa usar o px) em um domingo à tarde, de um dia quente e delirante. E quem teve este insight (do border:0px) foi o Bruno Torres, que também é a minha única testemunha fidedigna e com algum credito para esta técnica. Pelo Messenger, eu mostrei a ele o que tinha feito e lhe prometi que daria os créditos pelo border:0px e cumpri!

Para o Opera, a questão é mais delicada. Também é necessário inserir um hack próprio pra ele onde eu utilizo os seguintes atributos:

font-size:1px; padding-left:90px;

O padding-left é o responsável por empurrar o conteúdo e o font-size para torná-lo pequeno o suficiente para não ter que ser empurrado a uma distância maior. O text-indent negativo gera uma barra de rolagem no Opera que é evitada com este hack.

Talvez você esteja se perguntando qual a real vantagem em utilizar esta técnica no mundo real com sites feitos prêt-à-porter onde não há muitos botões. Bom, minha sugestões são as seguintes.

Se você tem um site muito grande, com vários botões do tipo submit/button, nos mais variados contextos, você pode economizar código tendo o endereço (source) de todos estes botões em um único lugar. Se você pensa em manter o código fonte e trocar o layout de um trabalho um dia, você também pode ter total controle mantendo o endereço do botão em um único CSS. Se você tem um site e pretende ter mais de um template ativo, como estou pretendendo ter neste site, você pode ter botões personalizados para cada template que quiser, considerando que o source dele também vem de CSS. E em uma última hipótese, saber que você simplesmente pode ter os endereços destes botões vindos por CSS, nada mais.

Em suma, depende do tipo de controle que você quer ter em um site. Na minha opinião, eu prefiro manter todo o endereçamento, de qualquer elemento que utilize uma imagem em meu CSS , mesmo que isto utilize alguns caracteres a mais, do que mantê-los no XHTML.

Você pode conferir um exemplo desta técnica em uso no hotsite Rubens de Freitas e uma página de exemplo (não válida antes que alguém comente) para você conferir todo o CSS deste artigo. Eu testei no Mozilla Firefox, MSIE e Opera. Talvez esta técnica não funcione no Konqueror e no Safari. Você pode me ajudar a testar e encontrar uma solução pra isso, ou simplesmente me detonar. Você escolhe como quer contribuir. Se der uma solução que funcione, me mande um screenshot por e-mail nos browsers que testar que eu te dou os créditos aqui!

Agora mande suas críticas sobre isto que eu escrevi. Se isso te chocou, arrepiou ou te causou qualquer outro sentimento por mais primitivo que seja, poste aqui suas críticas e desabafe.

Comentários: 9