Nas últimas semanas muito falou-se das novas versões de browsers que serão colocadas à disposição dos usuários nos próximos meses. Alguns esperam para ver se a gigante Microsoft recuperará o mercado e outros acompanham as novidades de Mozilla e Google com suas versões beta do Firefox 4 e do Chrome 6. É inevitável perceber a preocupação de todos em adaptar-se às necessidades dos usuários, padrões de desenvolvimento web e compatibilidade com o novo protagonista da web – o HTML5 – porém em meio à esses lançamentos, fica a pergunta: enquanto isso, como agir com os atuais browsers? Como criar estruturas de front-end para que os parâmetros do CSS 2 sejam igualmente aplicados à todos?
Essas perguntas já travaram várias batalhas entre desenvolvedores e navegadores, tendo como principal vilão o Internet Explorer em suas versões 6, 7 e 8 que além de não ser compatível com os demais browsers também não é compatível entre suas próprias versões, dificultando a criação de padrões e a exclusão de hacks. De qualquer forma, nosso trabalho é visualizar igualmente as interfaces em todos os navegadores – o chamado crossbrowser – e para isso, apresento algumas possibilidades e propriedades que podem ser inseridas aos seus arquivos css para evitar esses problemas sem utilizar hacks, “gambiarras” ou arquivos diferentes para cada browser.
Dica nº 1: Organização x manutenção.
Em seu artigo, a Talita Pagani apresenta estratégias para melhorar a organização dos arquivos CSS e aproveito o gancho para aconselhar: é indiscutível que, em se tratando de manutenção ou a criação de arquivos CSS, a organização seja fundamental para encontrarmos os problemas quando as incompatibilidades surgirem. Então, uma estrutura de classes, ID’s e identação de elementos, parâmetros e valores é ponto crucial para manutenção e desenvolvimento de estruturas html&css.
Dica nº 2: Elementos com propriedades pré-definidas.
Muitos desenvolvedores não sabem, mas alguns elementos do HTML tem propriedades pré-definidas que, quando começamos a trabalhar com a diagramação podem por exemplo, nos trazer dificuldades de encontrar aquele “espaço a mais” que incomoda tanto. Então, inicialmente, vamos eliminar todas estas formatações criando uma declaração que elimina os principais parâmetros pré-definidos que “bagunçam” a interface de browser para browser: margin’s e padding’s. Para tanto, utilizaremos o selector universal (*) no ínicio da folha de estilo eliminando os espaçamentos internos ou externos dos elementos:
[cc lang=”css”]*{
padding: 0;
margin:0;
}[/cc]
Caso em sua estrutura tenha várias folhas de estilo, separadas por página (home.css), aconselho que seja criado um arquivo específico para a declaração desta propriedade e valores zerados, com o nome de “geral.css” ou “reset.css”. Assim, posteriormente ele poderá ser linkado à página ou inserido, via parâmetro @import, às outras folhas de estilo incorporando às demais declarações.
Se necessário utilizar margin’s ou padding’s para alguns elementos, meu conselho é que você crie classes específicas para cada um deles, pois isso vai lhe garantir um controle maior de qual elemento tem uma propriedade que pode causar alguma diferença em larguras ou alturas nos blocos do HTML.
Há um artigo aqui no Tableless que explica esse conceito chamado CSS Reset.
Dica nº 3: largura e altura x propriedade padding.
Alguns desenvolvedores também não sabem, mas quando inserimos a propriedade width ou height à um elemento e adicionamos a propriedade padding à esse mesmo elemento, os valores estabelecidos serão somados. Por exemplo, se tenho um elemento com width: 640px e estabeleço o parâmetro padding-left: 20px, meu elemento terá ao todo 660px de largura. Portanto, quando utilizar a propriedade padding, tanto os valores de largura quanto os de altura, devem ser reduzidos proporcionalmente para que seu bloco continue com o mesmo tamanho e com um espaçamento interno necessário.
No nosso exemplo, o correto então seria: width: 620px e padding-left: 20px. Ficando o elemento todo com uma largura total de 640px.
[cc lang=”css”].blocoNoticias{
width: 620px;
padding-left: 20px;
}[/cc]
Dica nº 4: colunas x propriedade float.
Toda vez que utilizamos a propriedade float para formatação de colunas em nossa página, temos que nos lembrar de regras básicas:
- – Se as colunas estão inseridas dentro de algum outro elemento, você terá que obrigatoriamente usar, neste elemento “externo”, a propriedade display:table e a propriedade height:auto. Caso contrário, no Firefox, seu background pode não aparecer ou tão pouco obedecer a altura da colunas.
- – Se após as colunas, existir um outro elemento com propriedade horizontal, formando uma linha, ele obrigatoriamente deve receber a propriedade clear:both, para que ele não incorpore a propriedade float inserida nas colunas e fique logo abaixo delas.
Dica nº 5: Propriedade border para visualizar os problemas.
Para quem já está com toda a página pronta e não consegue encontrar e resolver alguns problemas como uma coluna embaixo da outra ou um texto ultrapassando o limite de seu bloco, insira a propriedade border:solid 1px red ao elemento e visualize na tela a altura e largura deste bloco. Com isso você vai conseguir perceber qual elemento está extrapolando o limite ou qual espaçamento está “empurrando” os demais blocos.
Visualizar o problema na tela, facilita a resolução.
Dica nº 6: verifique sua página, desde o início, em todos os browsers.
É muito mais fácil começar uma estrutura html&css já verificando a inserção de cada elemento em todos os browsers ao mesmo tempo, do que desenvolver tudo visualizando apenas em um dos navegadores e após finalizar o projeto, visualizar nos demais. Com toda certeza, se este cuidado não for tomado, você vai se deparar com uma interface com cara de “jogos de puzzle embaralhados” em algum momento e vai ser ainda mais difícil resolver os problemas.
Essas são apenas algumas das tantas possibilidades que temos para evitar o uso de hacks ou “jeitinhos” na construção de nossos arquivos html&css no trabalho de crossbroswers. De qualquer forma, me mantenho na torcida de que com a nova geração, tenhamos muito mais chances de desenvolver um código html melhor estruturado e um css com propriedades visuais que hoje ainda não podemos utilizar, do que ficar estudando os erros dos navegadores para encontrarmos os acertos dos desenvolvedores – quase como tiros no escuro.