Webpoint

Bem, a abreviação do CSS já diz tudo sobre sua arquitetura. Ela funciona em cascata. Novidade para uns, obsoleto para outros, mas que quando aplicado da maneira correta, pode te ajudar em muito na leitura do CSS. Bem, o usuário final não vai ver o resultado, mas para desenvolvedores web que se prezem, não importa apenas o resultado final. Como ele foi atigindo também é relevante. Como já disse anteriormente, mesmo sendo uma linguagem de design, o CSS tem várias metodologias e truques por trás da manga.

Você vai entender melhor do que estou falando, irá diferenciar este post de uma weblosofia que não tem prática. Vamos supor que você quer estilizar um campo de formulário e assim você atribuiu uma classe para ele com o nome de campo. Como já mostrei no post hover em campos com o jQuery, você pode colocar outra classe que irá representar o estado hover do elemento, pois como já discuti antes, o IE6 suporta o hover apenas em links.

Assim, ele poderia ser estilizado da seguinte maneira:

.campo {
font-size: 18px;
color: gray;background-color: #DDDDDD;
border: 1px solid #A19A9A;
 
}
 
.campo_focus {
 
font-size: 18px;
color: gray;
border: 1px solid #E64D4D;
background-color: #DBCDCD;
 
}

No campo focus ele muda a cor de fundo e a borda, mas permanece com a fonte 18px. A fonte está especificada por que é diferente das demais, caso contrário ela seria especificada no body, no html ou com o símbolo asterisco que representa todos elementos. Olha o efeito em cascata evidente, pois a classe campo e campo_focus herdaria o tamanho da fonte de qualquer elemento ancestral a ele. Sim, pode considerar o documento como um pai cheio de filhos e que tem mais filhos, ou como uma árvore, pois uma família pode ser representada também por uma árvore. Não importa como você pensa, desde que você tenha isto em mente. Sendo assim, podemos reescrever este css desta maneira:

.campo, .campo_focus {
font-size: 18px;
color: gray;
background-color: #DDDDDD;
border: 1px solid #A19A9A;
}
 
.campo_focus {
border: 1px solid #E64D4D;
background-color: #DBCDCD;
}

Desta vez eu especifiquei o campo e no campo_focus suas propriedades em comum e as que irão ficar somente na classe campo estão declaradas. A segunda vai ter as propriedades diferentes e vai prevalecer no campo_focus as declarações que você colocou por último, obedecendo a herança. Assim, se você mudar o tamanho da fonte, basta apenas mudar em um local. Se não ficou evidente a diferença, vou ilustrar um exemplo mais complexo.

Imagina que você está colocando em um menu um fundo diferente para cada item e que este menu esteja como uma lista não ordenada. Pois bem, haverá várias declarações nos elementos li, mas neste li você terá que colocar um id para diferenciar dos demais para assim no css para cada id tem um background. Então você deve aplicar a frase anterior literalmente: "cada id tem um background", ou seja, a única coisa que diferencia-os é o background, portanto, todos as outras propiedades comuns devem ser declaradas no li e somente o background deve ser declarado em cada id. Isto evita redundância e melhora a hierarquia do seu CSS.

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.

Há sempre uma dica quando você valida o código na W3C. Estes dias eu li um que foi muito útil. Basicamente ele dizia:

Muitas pessoas usam nome de classes como textoazul ou bordavermelha. A melhor maneira de nomear suas classes é pela sua função no html que ela está inserida

Se você colocar um nome da classe bordaVermelha e essa borda ficar azul? Ou seja, a aparência pode sempre mudar, mas a função que a classe representa não. Então é sempe uma boa prática nomear classes de acordo com sua função ou contexto e não com suas características. Já me deparei com esses nomes, mas realmente é um hábito ruim de programação CSS. Abaixo, vai as dicas da W3C de nomes bons e ruins:

Nomes bons

• warning
• important
• download_imagem

Nomes ruins

• fundo_azul
• borda_verde
• lista_bonita

Isto não vai prejudicar a apresentação final, mas com certeza é um bom hábito e uma boa prática para se ter um código mais bem lido e com uma melhor manutenção.

Os layouts devem ser Tableless e não os sites. Tabelas tem seu lugar, não no layout, mas sim para mostrar dados tabulares. Até para formulários de contato e de registro não é nenhum "pecado" usá-las. Posteriormente irei postar sobre a construção de formulários com CSS, sem tabelas para mostrar que não é tão difícil e é bastante versátil. Mas isto é para outra oportunidade. Aqui vou falar para quem decide estilizar tabelas totalmente por CSS e se depara com situações esquisitas. Quando você coloca a propriedade border na tabela, a borda circunda os limites desta, mas você quer que a tabela seja uma grade não é isso? Então você coloca borda nas células da tabela. Então surge uma borda tanto circundando a tabela, quanto dentro das células. O problema surge quando você observa o resultado. Se a borda da tabela está com 1px, por exemplo, e as céluas com 1px, haverá limites que a borda irá ter 2px, pois as bordas da célula irão se encontrar com as bordas da tabela e assim irão somar sua largura.

Desta vez não terá necessidade nem de ilustrar o resultado, pois isto é bastante claro e intuitivo, além de ser o comportamento de todos os browsers.

A propriedade border-collapse

A propriedade border-collapse define se as bordas em uma tabela vão se fundir ou vão ser separadas.

Colocando border-collapse: separate irá ter um comportamento como descrito acima, ou seja, se duas bordas se encontrarem, elas se somarão, aumentando sua largura. Este é o comportamento padrão dos browsers. No entanto, ao colocar border-collapse: collapse irá fazer com que dois pixels que se encontre, por exemplo, gere para o usuário apenas um pixel, o que é ideal quando se deseja construir uma tabela. Então para fazer uma tabela usual, como se fazia com html quando o atributo border era escolhido, deve se fazer o seguinte código:

 
table {
  border: 1px solid black;
  border-collapse: collapse;
}
 
table td {
  border: 1px solid black;
}

Com isso, a tabela ficará preenchida tanto nos contornos quanto nas células com uma borda de apenas 1 pixel, como esperado.

Para quem trabalha com Float, as vezes há a necessidade de colocar o layout em uma DIV que podemos chamar de container. Ela é responsável por controlar mais duas divs que funcionam como uma coluna no Layout onde tudo se encaixa em uma estrutura simples e objetiva, como o Holy Grail (nome dado ao layout típico de um cabeçalho, três colunas).

O problema surge quando esse container não abriga as DIVs internas no Firefox quando se usa float, deixando layout como na figura abaixo:

Nesta visualização, há um container amarelado(que não aparece), uma div cinza flutuando à esquerda, uma div azul claro flutuando à direita.

O código CSS está logo abaixo:

 
#container {
 
  width: 300px;
  height: auto;
  margin: auto;
  border: 1px solid black;
  background-color: #FFFFCC;
 
}
 
#esquerda {
 
  width: 100px;
  float: left;
  background-color: #CCCCCC;
  border: 1px solid red;
 
}
 
#direita {
 
  width: 196px;
  float: right;
  background-color: #CCCCFF;
  border: 1px solid gray;
 
}

Como a altura do container está escolhida para auto, ela deveria se comportar fechando em uma só box as caixas internas, mas ela fica quase inperceptível, se não fosse a borda de 1px que faz aparecer, mostrando-a como o Firefox interpreta de maneira errada, se você olhar no IE, verá algo do tipo:

Desta vez não foi o IE que não se comportou da maneira esperada. Bem, se isto pode ser considerado um Bug, há contradições, pois muitos odeiam admitir que o Firefox falharia, mas o comportamento esperado seria este, pois a div container está com o código abaixo:

 
<div id="container">
<div id="esquerda">aqui ficará o conteúdo da esquerda</div>
<div id="direita">aqui ficará o conteúdo da direita</div>
</div>
 

Assim, se a div tivesse sido fechada logo após sua abertura, estaria certa a visualização do firefox.

Se a altura do Box "mestre" não for auto, ele irá se expandir até aquela altura, ou seja, você teria que colocar a altura do tamanho da maior página, o que seria uma solução problema, por que você teria que mudar toda vez este valor quando mais conteúdo é esperado.

E a solução?

Um simples propriedade deixa a visualização esperada no Firefox e não alterna nada no IE 6 e 7.

Apenas adicione a div que servirá como container overflow: auto e este box irá se expadir até o fim da div com maior altura se não for dada nenhuma margem.

Assim, o código do CSS do container ficará assim:

 
#container {	width: 300px;
 
 height: auto;
 
 margin: auto;
 
 border: 1px solid black;
 
 background-color: #FFFFCC;
 
 overflow: auto;
 
}

Sobre o overflow: auto

Esta propriedade que resolveu uma grande dor de cabeça tem a seguinte especificação na W3C:

Geralmente, o conteúdo de um box é geralmente confinado nos limites de conteúdo deste box. Em certos casos, este box pode "transbordar", significando que seu conteúdo fique parte ou completamente fora do box

Portanto, esta propriedade garante que o conteúdo irá contornar os boxs internos até seu final, não deixando nenhuma parte "sobrando".

Esta propriedade já deveria ser padrão no firefox, mas precisa ser especificada para funcionar como esperado. Ou seja, ela é precisa ficar explícita.

Esse é um grande problema, pois na maioria dos layouts este tipo de configuração precisa ser empregada.

No entanto, se não for bem calculada e planejada as dimensões, por esta propriedade estar explícita, ao ultrapassar os limites, o box que possui estar propriedade apresenta sua própria barra de rolagem para permitir que se chegue aos seus contornos. Portanto, cuidado na hora de usá-la. Sempre certifique-se que as dimensões estão corretas.

Espero mais uma vez ter sido útil e comentem, me diga se acham isto um bug, se já teve problemas com esta propriedade. Sintam-se a vontade para falar, afinal, estamos aqui para falar das soluções de problemas que nos pegam de surpresa na hora que caímos nos standards.

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.