Webpoint

Atire a primeira pedra quem nunca usou um hack, principalmente para o complicado IE6. Underscore, comentários condicionais e por aí vai... Quando meu colega de trabalho apresentou o underscore hack para mim foi uma maravilha, mas também um vício. Passei a usá-lo frequentemente e esquecia que poderia conseguir chegar no resultado, ultrapassar as diferenças de browsers apenas indo mais a fundo. Mas a pressa é a inimiga da perfeição e o underscore "quebrava um galhão". Resolvi abandoná-lo e testar até o final nos principais browsers. Aprendi muito com isto, descobri a fundo o por que dos problemas e o por que do IE6 renderizar tão diferente do Firefox. Percebi que o IE7 passou a ser mais padrão. Mas as vezes não tem como chegar a um layout comum entre os dois. Então há o recurso conhecido por muitos como comentário condicional. Ele não funcionou para mim em relação ao IE6 e 7, pois o IE7 abria uma tela em branco quando ele era usado.

Com poucas linhas de código, recorri ao Jquery para fazer esta tarefa. Como ele possui funções em seu core para detectar browser e sua manipulação com CSS é bastante intuitiva, resolvi corrigir algumas diferenças do IE6 para os demais com o Jquery. Como é possível?

// Corrigindo Hacks do IE6
var versao = $.browser.version;
 
if($.browser.msie and versao == 6) {
 
 // Estilos somente para o IE6
 
 $("#conteudo_central").css("width","621px");
 
 $("#navegacao").css("width","267px");
 
 $(".idioma").css("display","inline");
 
}

A função $.browser.version retorna o valor inteiro da versão do browser. Assim, para o IE6 a variável versão irá conter o valor 6. No exemplo acima mostrei um hack para corrigir ajustar algumas propriedades CSS para serem aplicadas no IE6. Lembrando que este método está disponível para a versão 1.1.3, antes dele era necessário recorrer a um plugin que extendia as funcionalidades de $.browser.

A função $.browser.msie retorna verdadeiro se o browser for o IE. Assim, a estrutura condicional se torna verdadeira se o browser for o IE e a versão for a 6.

Outros métodos aceitos pela função $.browser

• safari
• opera
• mozilla

O método css do Jquery você atribui propriedades css ao elemento através de dois parâmetros como string, o primeiro é a propriedade e o segundo o valor. Se existirem essas propriedades no CSS o valor final será o do Jquery, pois apesar de ele não inserir o css inline, ele é atribuido depois que o dom estiver carregado. Se ao invés de uma string um número for atribuído ao valor, ele é convertido automaticamente para string.

Não quero de forma alguma incentivar o uso de hacks, pois esta medida tem que ser tomada em último caso. Para todo hack usado tem com certeza uma saída melhor. Mas tem que ser avaliado o tempo e se vale a pena passar dias tentando resolver um bug ou um comportamento não esperado. A desvantagem deste método é que ele não funciona em browsers que não aceitam script ou o navegador esteja desabilitado do uso de javascript. Mas é uma alternativa muito simples e útil. Para quem não está satisfeito com o underscore ou comentários condicionais, está aí mais uma arma no arsenal de hacks a serem usados.

Estava com um layout para programar que a idéia era não ter espaço no topo, ou seja, teoricamente uma margem no topo com o valor de zero. Sendo assim, apliquei um margin: 0 no elemento body. No IE6 e 7 funcionou como esperado, mas no Opera e no Firefox ficou ainda um espaçamento no topo. Por que isso ocorre?

No Internet Explorer há elementos que por padrão tem uma propriedade chamada on having layout (tem layout) . Existe também um artigo desse do Maujor em português. Este assunto é muito amplo e pretendo postar um artigo exclusivamente para isto, mas uma lida neste artigo do Maujor já diz tudo. Entenda por enquanto que isto acontece por causa deste comportamento do IE, que não segue os padrões, possuindo uma própria maneira de tratar o layout.

O que importa, a solução!

Há várias soluções, mas há uma que achei bastante interessante pois me levou a usá-la para várias situações. Há um seletor * que especifica todos os elementos. Se você fizer algo do tipo:

* {  margin: 0;
 
padding: 0;
 
}

Não haverá margem e padding no topo, nos lados e abaixo do elemento body. O problema é que isto será aplicado a todos elementos. Todos sem exceção, pois este seletor serve justamente para este fim. Sendo assim, parágrafos, divs, inputs, uls ficarão com uma margin e um padding com o valor de zero.

Depois que isto aconteceu, comecei a perceber que no decorrer do desenvolvimento da diagramação html / css ocorreu menos diferenças entre o IE e o Firefox. O fato é que você colocando o padding e margin para zero torna-se o padrão da página e assim não haverá diferença destas duas propriedades. Resumindo: se um elemento ul, por exemplo, não tem uma margem especificada, esta margem será o padrão do browser, que é diferente para cada um. Você usando esta propriedade você "iguala" os browsers nesta propriedade. Então para dar uma margem em qualquer elemento, é só especificar que ele será o resultado final.

Além disto, você pode também usá-lo para colocar outras propriedades padrões. Por exemplo, em quase todo site eu costumo especificar o height para auto, então por que não colocar como propriedade do elemento asterisco? Assim quando surgir um elemento com um height diferente, simplesmente eu especifico, se não vai ficar como auto.

Este é o meu primeiro Post. Demorei muito antes de escolher por onde começar, deveria iniciar por problemas antigos que já resolvi e deveria compartilhar com os sofredores desenvolvedores HTML / CSS, ou deveria começar com problemas recentes?

Resolvi começar então com um problema que um companheiro de trabalho teve hoje e que eu já havia enfretado. Mais uma vez, é um bug do IE. Alguém já percebeu, que ao usar um float, por exemplo, com o valor left, ao usar a propriedade margin, por exemplo, de 100px, o IE na verdade faz esta margem ficar com 200px? Para entender melhor, logo abaixo está a solução traduzida do site Position is Everything. O texto original encontra-se no endereço http://www.positioniseverything.net/explorer/doubled-margin.html . O texto abaixo foi resumido e readaptado.

O que há de errado?

Um programador inocentemente coloca um float para esquerda em um box, e usa uma margem esquerda no float para tirálo da extremidade um pouco. Parece bem simples não? Simples até ser visualizado no Internet Explorer, onde a margem esquerda misteriosamente é duplicada!

A maneira que deve ser

O exemplo abaixo mostra uma DIV beje em que está contida um box verde com a propriedade float: left e uma margem esquerda de 100px. Até aqui tudo bem.

Abaixo está o código que gera esta visualização:

 
.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px;
  /*Este ultimo valor aplica uma margem de 100px
     a esquerda do box beje */
}

A dobradinha no IE

O mesmo código faz o Internet Explorer mostrar de uma maneira levemente diferente. A figura abaixo mostra como o IE faz este arranjo.

Que diabos está acontecendo? Não faça estas perguntas bobas, é o IE, não se lembra? Conformidades com as especificações são somente esperadas, não aplicadas.

Pontos importantes

Este bug ocorre somente se a margem no float vai na mesma direção do float. Ou seja, se você deu um float left e um margin-left, o bug ocorrerá no IE. Somente a primeira linha de float irá ser atingido pelo bug. Além disso, a margem dupla apresenta simetria, trabalhando da mesma maneira para a esquerda, quando para direita.

Finalmente, uma saída

Steve Clason descobriu uma saída. Esboçada nesta demonstração. Ela corrige tanto este bug da margem dupla quanto outro bug da identação de texto também. É um bug clássico do IE, usando uma propriedade para corrigir um bug que afeta uma uma propriedade irrelevante.

E a solução?

Olhe isto. Simplesmente coloque display: inline no box que está com a propriedade float e assim todos os browsers vão visualizar de maneira semelhante, incluindo o IE.

Abaixo está o código com a respectiva propriedade que estava faltando para corrigir o bug:

 
 
.floatbox {
 
    float: left;
    width: 150px;
    height: 150px;
    margin: 5px 0 5px 100px;
    display: inline;
 
    /* Esta propriedade acima
        corrige o bug no IE */
  }

Abaixo está o código na prática, uma sem o display: inline e outra com o display: inline. Visualize no IE para ver como ele renderiza esta página.

Demonstração do BUG da Dupla margem.

Espero que tenha sido útil com o este post, é primeiro de muitos retratando todos os problemas que surgem no dia a dia do desenvolvimento Web Cross-Browsers. No próximo irei falar de mais uma propriedade que surge como uma luz na escuridão, desta vez não é um BUG do IE, mas do Firefox.