A saga do aprendiz de CSS

Logo que comecei a usar CSS no meu site, fiquei empolgado em descobrir como era fácil e limpo definir várias regras de formatação em um arquivo separado e acabar de vez com aquela poluição de atributos nas tags HTML. Como uso o txt2tags para gerar as páginas, também acabou a festa de filtros %!postproc para inserir os famigerados atributos. Minha vida de webmonkey melhorou.

Tudo ia bem até o dia que lembrei que existia o IE (Internet Explorer, navegador do Windows). Já estava há tanto tempo sem ver um Windows que esqueci do pequeno “detalhe” que ele é o sistema usado pela grande maioria dos internautas. Pedi para um amigo me mandar uma foto da tela, com meu site aberto no IE, e fiquei chocado. Margens erradas, site todo torto, as coisas não estavam exatamente onde deveriam estar. Essa foi a mensagem de boas-vindas que ganhei ao entrar no maravilhoso mundo da incompatibilidade do CSS entre os navegadores. Minha vida de webmonkey piorou.

Pesquisei, li muito e instalei todos os principais navegadores (além do Safari): IE Windows, IE Mac, Firefox, Camino, Opera e claro, lynx :) Quanto mais navegadores, mais esquinas escuras e pegadinhas para se lembrar. Não é só o IE que é diferente. Ele é o pior, sem dúvida, mas cada navegador tem suas esquisitices. E quanto mais complexo o leiaute do site, mais surpresas aparecem. Você vai lá e deixa o site perfeito no seu navegador, depois gasta mais uma montanha de tempo para fazer ele ficar bom (ou aceitável) em todos os outros, poluindo o CSS com hacks. Minha vida de webmonkey virou um pesadelo.

Recentemente fui definir um leiaute integrado para meu site, que estava uma sopa de legumes com cada seção usando um estilo próprio e totalmente diferente das demais. Coisas de novato que precisa testar o que aprende…

Dessa vez foquei o leiaute exclusivamente no conteúdo. Para organizar as informações, eu precisava de um menu, um cabeçalho e um rodapé. Fácil: esquerda, em cima, embaixo. Precisei de uma caixa de busca, taquei no cabeçalho. Precisei acomodar as informações de contato, taquei no rodapé. E assim foi, continuei separando cada tipo de informação em sua “gaveta”, até o fim. Em todo esse processo o CSS era estritamente posicional, nada de cores, fontes e fru-frus.

Tá, separei tudo e tinha na mão um site organizado, porém feio. Brinquei com algumas cores, coloquei uns espaços em branco aqui e acolá, defini como seriam os links e as fontes. Essa era a hora de se preocupar com aparência. Não era a idéia inicial, mas na brincadeira das cores acabei escolhendo o tema “Genius” (aquele brinquedo de antigamentes) e me amarrei. Coloquei tudo no ar e fui dormir feliz.

No dia seguinte, acordei alarmado. Lembrei que eu não tinha testado o site em nenhum outro navegador fora o Safari! O clima de lamentações e incredulidade deu lugar a uma satisfação confortante ao perceber que sim, o site estava bonitão nos outros navegadores, nada tinha quebrado. Era difícil de acreditar, mas passei ileso pelo CSS Hell dessa vez.

Conclusão
A mesma de sempre, que às vezes acabo esquecendo: KISS, menos é mais, descomplique, não viaje.