Este artigo é para aqueles que desenvolvem sites ou sistemas na web e se preocupam em fazê-los funcionar bem nos diversos navegadores e plataformas. É muito triste entrar em um site e perceber que ele não funciona bem no navegador e sistema operacional que você está usando. Às vezes o site até funciona, mas você percebe que alguns detalhes não estão funcionando bem.

Eu sou paranóico com isso, faço diversos testes, no Linux com o Firefox, Konqueror, Mozilla e Opera e no Windows com Internet Explorer, Firefox, Opera e agora o Swift que é o engine do Safari para o Windows. Os teste no Mac são feitos pelo meu parceiro designer Vinicius Braga, nos navegadores Internet Explorer, Firefox e Safari. O trabalho de colocar os sites para funcionar bem em todos os navegadores sempre me tomou muito tempo, dedicação e paciência. Por isso até entendo que alguns sites não funcionem bem, imagino que seja problema de orçamento ou prazo apertado que dificultaram a vida do programador.

Inspirado pela 37signals, que postou em seu blog um desejo de como poderia ser mais fácil especificar os atributos de CSS, eu desenvolvi o CSS Browser Selector. Trata-se de um pequeno script que tem por objetivo facilitar a definição de atributos CSS específicos para cada navegador/plataforma.

Como usar o CSS Browser Selector

. Baixe o script em http://rafael.adm.br/css_browser_selector/.

. Copie para o diretório onde você guarda os arquivos de javascript (ex: /js). Lembre-se de renomear o arquivo baixado, retirando o .txt do final.

. Coloque a linha abaixo acima dentro da tag header:

<script src="/js/css_browser_selector.js" type="text/javascript"></script>

. Utilize os códigos dos navegadores na especificação do CSS

Códigos de sistemas operacionais

. win - Microsoft Windows
. linux - Linux (x11 and linux)
. mac - Mac OS

Códigos de navegadores

. ie - Internet Explorer
. ie6 - Internet Explorer 6
. ie5 - Internet Explorer 5
. gecko - Mozilla, Firefox, Camino
. opera - Opera
. konqueror - Konqueror
. webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira

Exemplo de utilização

Para atribuir um padding específico em uma tag com id “header” apenas no Internet Explorer do Mac OS:

.ie .mac #header {
 padding: 10px
}

Para esconder todos os objetos com class “help” em todos os navegadores no linux:

.linux .help {
 display: none
}

Uma aplicação prática

No BielBid, sistema de gerenciamento de cotações para compradores, nós permitimos que o usuário faça upload de uma imagem com a logomarca para compor a interface. Fizemos um javascript que submete o formulário automaticamente logo após o usuário selecionar o arquivo em seu computador, para evitar o botão de Enviar e agilizar o processo.

Perfeito se funcionasse em todos os navegadores. Percebemos que na engine KHTML, utilizada pelo Konqueror e pelo Safari, este script não funciona. Optamos então por manter o botão de Enviar apenas nestes dois navegadores. Veja a diferença na tela:

Captura de tela retirada do Firefox

Captura de tela retirada do Konqueror

Agora veja como ficou elegante o código utilizando o CSS Browser Selector:

input.file_upload_button {
 display: none
}

.safari input.file_upload_button,
.konqueror input.file_upload_button {
 display: block
}

Obs.: file_upload_button é a classe que está atribuida ao botão (<input class="file_upload_button" name="commit" type="submit" value="Enviar" />)

Aproveite o script, use a sua imaginação e ganhe tempo desenvolvendo seus próximos projetos.

O CSS Browser Selector também ajuda na identificação se o javascript está habilitado no navegador do usuário e este será o tema do próximo artigo.

Um grande abraço a todos.