Como comentei no post anterior (anteriormente em…)
Hacks, em uma tradução mais coloquial podemos dizer que são as nossas tradicionais “gambiarras” (tenta explicar o que é essa palavra para um americano ou japonês). Portanto utilizar de gambiarras para fazer algo funcionar não é algo muito bom, entretanto alguns navegadores (leia Internet Explorer) “teimam” em renderizar os elementos em posições ou estruturas diferentes das que foram formatadas, devido à construção dos pixels e entendimento dos espaçamentos e posicionamento (principalmente).
Eu sou totalmente contra o uso de Hackes, pois acredito que possa ser possível criar formatações que funcione em todos os navegadores de forma uniforme, entretanto às vezes acontecem formatações inesperadas como “quebra” de um elemento ou em alguns casos (como já aconteceu comigo) o desaparecimento do elemento.
A primeira maneira de hack e talvez seja a melhor dentre os piores é o uso dos “Comentários condicionais”, onde é possível atribuir uma folha de estilos secundaria ao qual somente será incorporada caso o navegador seja da versão em que o comentário foi condicionado.
Como o navegador que costuma gerar mais problemas é o Internet Explorer, irei começar com ele:
Comentário condicional para IE6 e IE7:
IE 6:
1
2
3
4
5
<!--[if <strong>lt</strong> IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<![endif]-->
IE 7:
1
2
3
4
5
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie/ie7.css" type="text/css" media="screen">
<![endif]-->
Dica: lt = menor que(less than), lte = menor ou igual a(less than or equal too)
Ao adicionar essas linhas dentro da sua tag HEAD, os arquivos ie6.css e ie7.css somente serão incorporados à sua página, caso o usuário esteja utilizando o Internet Explorer 6 ou Internet Explorer 7 (respectivamente aos arquivos).
Dentro desses arquivos é possível subscrever a formatação de um elemento, fazendo com que esse elemento no navegador X tenha um comportamento diferente.
Exemplos:
1
2
3
4
5
6
7
8
9
10
11
div#teste {
width: 50px;
height: 50px;
background: #999999;
margin-top: 5px;
}
Na demonstração acima tem um elemento de divisão (uma div) com as dimensões de 50 pixels de altura e 50 pixels de largura uma cor de fundo cinza e uma margem de 5 pixels no topo e supostamente essa margem no topo não corresponde de forma igual nos navegador IE 6 e IE 7, dessa forma basta ir nesse arquivos e adicionar o mesmo elemento:
1
div#teste { magin-top: 10px !important; }
E adicionar uma nova margem ao mesmo elemento. O uso do “!important” ao contrário do que muitos afirmam que é um Hack, o “!important” não é um Hack, é dar aquela formatação uma importância maior do que qualquer outra formatação (inclusive formatação “inline” do elemento).
É necessário sempre o uso do “!important” nos arquivos de CSS direcionados para os navegadores?
Na verdade não, irá depender de como está à ordem de incorporação dos seus CSS. Por exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie/ie7.css" type="text/css" media="screen">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<![endif]-->
Nesse exemplo acima não será necessário o uso do “!important”, devido ao CSS padrão ser incorporado primeiro aos CSS de “Hack”, portanto, tudo que estiver no CSS de “Hack” irá sobrescrever os elementos.
Mas se fosse o contrário:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie/ie7.css" type="text/css" media="screen">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<![endif]-->
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
Nesse segundo caso já seria necessário o uso do “!important”, pois o que estiver no CSS de “Hack” será sobrescrito pelo CSS padrão.
Também é possível adicionar um comentário condicional para incorporar um css para navegadores diferentes do Internet Explorer:
1
2
3
4
5
6
7
<![if !IE]>
<link href=”css/diferentes-ie.css” rel=”stylesheet” type=”text/css” />
<![endif]>
Dessa forma o css somente será incorporado se o navegador não for o Internet Explorer.
Outras formas de Hack:
… Continue lendo
Como comentei no post anterior (anteriormente em…)
Hacks, em uma tradução mais coloquial podemos dizer que são as nossas tradicionais “gambiarras” (tenta explicar o que é essa palavra para um americano ou japonês). Portanto utilizar de gambiarras para fazer algo funcionar não é algo muito bom, entretanto alguns navegadores (leia Internet Explorer) “teimam” em renderizar os elementos em posições ou estruturas diferentes das que foram formatadas, devido à construção dos pixels e entendimento dos espaçamentos e posicionamento (principalmente).
Eu sou totalmente contra o uso de Hackes, pois acredito que possa ser possível criar formatações que funcione em todos os navegadores de forma uniforme, entretanto às vezes acontecem formatações inesperadas como “quebra” de um elemento ou em alguns casos (como já aconteceu comigo) o desaparecimento do elemento.
A primeira maneira de hack e talvez seja a melhor dentre os piores é o uso dos “Comentários condicionais”, onde é possível atribuir uma folha de estilos secundaria ao qual somente será incorporada caso o navegador seja da versão em que o comentário foi condicionado.
Como o navegador que costuma gerar mais problemas é o Internet Explorer, irei começar com ele:
Comentário condicional para IE6 e IE7:
IE 6:
IE 7:
Dica: lt = menor que(less than), lte = menor ou igual a(less than or equal too)
Ao adicionar essas linhas dentro da sua tag HEAD, os arquivos ie6.css e ie7.css somente serão incorporados à sua página, caso o usuário esteja utilizando o Internet Explorer 6 ou Internet Explorer 7 (respectivamente aos arquivos).
Dentro desses arquivos é possível subscrever a formatação de um elemento, fazendo com que esse elemento no navegador X tenha um comportamento diferente.
Exemplos:
div#teste { width: 50px; height: 50px; background: #999999; margin-top: 5px; }Na demonstração acima tem um elemento de divisão (uma div) com as dimensões de 50 pixels de altura e 50 pixels de largura uma cor de fundo cinza e uma margem de 5 pixels no topo e supostamente essa margem no topo não corresponde de forma igual nos navegador IE 6 e IE 7, dessa forma basta ir nesse arquivos e adicionar o mesmo elemento:
div#teste { magin-top: 10px !important; }E adicionar uma nova margem ao mesmo elemento. O uso do “!important” ao contrário do que muitos afirmam que é um Hack, o “!important” não é um Hack, é dar aquela formatação uma importância maior do que qualquer outra formatação (inclusive formatação “inline” do elemento).
É necessário sempre o uso do “!important” nos arquivos de CSS direcionados para os navegadores?
Na verdade não, irá depender de como está à ordem de incorporação dos seus CSS. Por exemplo:
Nesse exemplo acima não será necessário o uso do “!important”, devido ao CSS padrão ser incorporado primeiro aos CSS de “Hack”, portanto, tudo que estiver no CSS de “Hack” irá sobrescrever os elementos.
Mas se fosse o contrário:
Nesse segundo caso já seria necessário o uso do “!important”, pois o que estiver no CSS de “Hack” será sobrescrito pelo CSS padrão.
Também é possível adicionar um comentário condicional para incorporar um css para navegadores diferentes do Internet Explorer:
Dessa forma o css somente será incorporado se o navegador não for o Internet Explorer.
Outras formas de Hack:
… Continue lendo