Cross Browser: garanta a qualidade do seu site em todos os navegadores

As muitas opções de navegadores aos usuários, se tornam grandes problemas para desenvolvedores de front end, pois precisam lidar com interpretações diferentes de cada browsers, alguns deles que mal seguem os padrões W3C.

Para isso, um site bem feito exige certa validação do css e html em vários desses navegadores, o que torna o trabalho exaustivo. Existem atualmente algumas ferramentas para auxiliar nesse trabalho. Neste post estou trazendo algumas dessa ferramentas:

Serviços Online
1. Browser Shots
Esse site tira uma screenshot de seu site em todos navegadores. O screenshot pode não ser a opção mais atraente, mas é a única (se desconsiderarmos a possibilidade de você instalar todos os browsers e sistemas operacionais possíveis… rs).

2. Markup Validate Service by W3C
Verifica se o código está semanticamente correto, e indica algums erros que costumam ser problemáticos em alguns browsers.

Softwares
1. IE Tester
O IE Tester é uma emulador de IE, que permite abertura de abas de várias versões do IE, desde o 5.5 até o 8. Já que os usuários não abandonam… os desenvolvedores que se ferrem!

2. DebugBar
Da mesma empresa que desenvolveu o IE Tester, a DebugBar é uma espécie de Firebug com Webdeveloper (essas últimas, extensões para Firefox praticamente obrigatórias para programadores de front end – se você não conhece, corra no Google agora!).

Recursos de Desenvolvimento
1. IE.js do Dean Edwards
O Danilo já postou sobre esse js, que minimiza os problemas do IE. Mais informações, volte ao post “Como eliminar as diferenças de CSS do IE6 e IE5x com o IE7.js”.

2. CSS Global Resets
O resets.css é um recurso para minimizar através do css as diferenças entre browsers, equilibrando todas as propriedades antes de começar a criar o CSS. Para aplicá-lo é bem simples: basta incluir o código abaixo em seu css.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:101.1%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

4 thoughts on “Cross Browser: garanta a qualidade do seu site em todos os navegadores

  1. O IE Tester é realmente confiável? Já até apresentei uma solução no Blog chamada Multiple IE, mas quando fizemos testes na empresa onde trabalho comparando com a situação real, duas versões em PC´s diferentes, não era a mesma coisa. A única forma de testar confiável está sendo utilizar dois PC´s ou uma máquina virtual. Muito boa as ferramentas, nenhuma delas pode faltar!

  2. Não é 100% confiável! O ie tester renderiza as páginas de uma forma correta, margin / float, essas coisas que infelizmente dão problemas no ie6, ele interpreta igual, até expression no css ele roda direitinho, o problema dele é flash.. e png24… o png24, colocando aquele filtro que faz rolar em ie6, no ie tester, é ignorado. E flash, ele lê quando quer, rs. Mas o interessante é que esse projeto é de uma pessoa, sozinha, que está ainda em desenvolvimento, lista todas as diferenças que tem entre ele e o ie6 e promete deixar tudo redondo um dia. Mas realmente, a única forma 100% confiável, hoje, é usar máquina virtual.

    []s

  3. Pingback: CSS Global Reset - Elimine as diferenças entre browsers | TidBits

  4. Pingback: 8 erros de CSS que você não deve cometer | TidBits

Leave a Reply

Your email address will not be published. Required fields are marked *