quarta-feira, 18 de agosto de 2010

CSS Hacks, IE e Standards

Não, este não é um post para falar de como os outros navedores são mais legais que o Internet Explorer, e sim sobre como fazer uma "gambiarra elegante".

OK, não fui completamente sincero. O IE carece sim de muitos recursos e suporte que os outros navegadores dispõe, e isso faz diferença para quem trabalha com web. O que poucos desenvolvedores e webdesigners sabem na verdade é que o IE tem muitas soluções próprias para muita coisa. Sim, concordo que essas soluções não estão previstas nos padrões, mas o fato aqui é que elas existem.

Vou um pouco além e faço um questionamento sobre os próprios padrões e a implementação nos navegadores. Os novos - e bonitos - recursos de CSS3 incluem bordas arredondadas, sombras, cores com transparência (RGBA e HSLA) entre muitos outros. Pois bem, a nova safra de navegadores traz suporte a esses recursos, mas... nem tudo é tão fácil assim. Muitas das propriedades são implementadas através de:

myElt {
-moz-someNewStandardProperty: 20px;
-webkit-someNewStandardProperty: 20px;
-khtml-someNewStandardProperty: 20px;
-o-someNewStandardProperty: 20px;
someNewStandardProperty: 20px;
}

Sim, o padrão prevê abertura para implementações proprietárias através de prefixos (-moz, -o, -webkit,...). Assim, navegadores modernos como o Firefox, Chrome, Safari e Opera podem desconhecer completamente uma regra padrão, mas ter uma implementação proprietária para o mesmo. A exemplo das bordas arredondadas. Somente o Opera é que tem suporte à declaração nativa, prevista no padrão. Todos os outros tem implementações proprietárias (não foge do padrão por este mecanismo estar previsto, mas não é a mesma propriedade).

No meu ponto de vista, isso é uma coisa boa, mas também me parece uma gambiarra elegante e regulamentada.

O IE oferece alternativas a muitos desses recursos (não a todos, eu sei), e também a muitos recursos que os outros nem sonham em ter. O fato é que muitos desses recursos no Internet Explorer usam declarações completamente proprietárias. Da versão 7 pra cima, algumas propriedades já puderam são reconhecidas através de declarações com prefixo -ms-.

Enfim, vamos à minha sugestão de como fazer as coisas. Os benefícios são:
- Mantém o código válido (W3C)
- Segue recomendação da Microsoft
- Agiliza o processo de desenvolvimento

Primeiro, desenvolva o trabalho como de costume, SEM DAR A MÍNIMA PARA O LAYOUT NO IE, mas por favor, marcação semântica, enxuta, inteligente.
Depois, hora de alinhar as coisas no IE, mas sem sujar o código que já está feito e funcionando. Para isso, use a marcação no final (depois das suas declarações de CSS e Javascript) do seção <head>:

<!--[if IE]>
<script type="text/javascript" src="/scripts/ie.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/ie.css" />
<![endif]-->

Esse código é um comentário, ou seja, será ignorado por outros navegadores e pelo validador W3C. Mas é reconhecido - e recomendado - pela Microsoft/IE. Ótimo, assim podemos apenas adicionar as regras, efeitos e hacks necessários apenas nestes arquivos.

Alguns de vocês podem conhecer esta técnica, e alguns podem até sugerir que se faça uso das comparações avançadas (que também são recomendadas pela MS), como [if gte IE 7] ou [if IE 8], mas neste ponto eu já discordo. Ao invés de usar várias folhas de estilo e/ou vários scripts, sugiro usar regras de fallback num arquivo único. É simples, funcional, e diminui a quantidade de arquivos a serem baixados e mantidos facilitando a manutenção.

A idéia de fallback pra quem não está familizarizado consiste em declarar as propriedades mais antigas, ou não suportadas DEPOIS das regras mais aceitas. Assim, se a última regra falha, o navegador mantém a regra válida anterior.

A produtividade aumenta porque se evita o trabalhoso processo de modificar e testar repetidas vezes até que o resultado desejado seja obtido. Se trabalha uma vez, se faz os ajustes uma única vez também, se a preocupação de quebrar o layout em outros navegadores.

Bem, é isso. Espero que os códigos de vocês fiquem mais limpos, e que o processo de desenvolvimento seja mais rápido.
----------- keepReading

Nenhum comentário:

Postar um comentário