helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Comentamos o que são os Hacks CSS e damos um exemplo de Hack CSS simples de aplicar e muito prático.
Por Miguel Angel Alvarez - Tradução de JML
Os Hacks de CSS são artimanhas para conseguir que uma mesma declaração de estilos CSS atue de maneira distinta em diferentes navegadores. Sob este conceito se englobam diversas técnicas, muitas vezes pouco ortodoxas, para lidar com as diferentes interpretações de CSS que têm os distintos navegadores.
Os hacks CSS surgem porque diferentes navegadores muitas vezes interpretam de forma distinta o mesmo estilo CSS. Então, os desenvolvedores e designers, que se vêem na necessidade de fazer páginas que se mostrem igual independentemente do navegador, têm que utilizar códigos e truques complexos para conseguir que a página se visualize da mesma forma em distintos navegadores.
A questão é que deveria haver uma só interpretação do padrão CSS, porém como cada navegador vai por sua conta, afinal cabe a nós resolver o problema de fazer com que tudo se enquadre. É algo que já estamos acostumados com HTML e Javascript, mas que também temos que aprender a lidar com CSS.
Os Hack CSS muitas vezes jogam com distintas interpretações a erros de sintaxe, cometidos de propósito no código CSS. Por isso, à princípio convém evitá-los ou pelo menos utilizá0lo com cuidado.
Hack CSS dos comentários de duas barras (//)
Neste artigo mostraremos um exemplo sobre como funcionam os Hack CSS, com um típico caso que utiliza os comentários formados por duas barras (//), que não são tratados como comentários em Internet Explorer.
Ou seja, como vimos em outras linguagens de programação, se uma linha de código tem duas barras ao começo significa que está comentada e não se tem em conta. Em CSS os comentários tem que ser feitos assim:
/* isto é um comentário */
Poré, Firefox também interpreta os comentários formados por //
// isto é um comentário
Internet Explorer simplesmente ignora as duas barras e trata a linha como se fosse um código normal.
Por exemplo, temos este código:
h1{
font-size: 12px;
color: #009900;
//font-size: 16px;
//color: #000099;
}
Aqui definimos dois estilos para a etiqueta H1.
Os dois primeiros estilos são font-size:12px e color:#009900. Todos os navegadores lerão estes estilos.
Porém, logo tem outros dois estilos, que na verdade são os mesmos que os anteriores, que começam por duas barras. Firefox e Opera, que interpretam essas duas barras como comentários, não lerão os estilos. Internet Explorer que não tem em conta as duas barras como comentários, lerá os dois últimos estilos.
Por Miguel Angel Alvarez - Tradução de JML
Os Hacks de CSS são artimanhas para conseguir que uma mesma declaração de estilos CSS atue de maneira distinta em diferentes navegadores. Sob este conceito se englobam diversas técnicas, muitas vezes pouco ortodoxas, para lidar com as diferentes interpretações de CSS que têm os distintos navegadores.
Os hacks CSS surgem porque diferentes navegadores muitas vezes interpretam de forma distinta o mesmo estilo CSS. Então, os desenvolvedores e designers, que se vêem na necessidade de fazer páginas que se mostrem igual independentemente do navegador, têm que utilizar códigos e truques complexos para conseguir que a página se visualize da mesma forma em distintos navegadores.
A questão é que deveria haver uma só interpretação do padrão CSS, porém como cada navegador vai por sua conta, afinal cabe a nós resolver o problema de fazer com que tudo se enquadre. É algo que já estamos acostumados com HTML e Javascript, mas que também temos que aprender a lidar com CSS.
Os Hack CSS muitas vezes jogam com distintas interpretações a erros de sintaxe, cometidos de propósito no código CSS. Por isso, à princípio convém evitá-los ou pelo menos utilizá0lo com cuidado.
Hack CSS dos comentários de duas barras (//)
Neste artigo mostraremos um exemplo sobre como funcionam os Hack CSS, com um típico caso que utiliza os comentários formados por duas barras (//), que não são tratados como comentários em Internet Explorer.
Ou seja, como vimos em outras linguagens de programação, se uma linha de código tem duas barras ao começo significa que está comentada e não se tem em conta. Em CSS os comentários tem que ser feitos assim:
/* isto é um comentário */
Poré, Firefox também interpreta os comentários formados por //
// isto é um comentário
Internet Explorer simplesmente ignora as duas barras e trata a linha como se fosse um código normal.
Por exemplo, temos este código:
h1{
font-size: 12px;
color: #009900;
//font-size: 16px;
//color: #000099;
}
Aqui definimos dois estilos para a etiqueta H1.
Os dois primeiros estilos são font-size:12px e color:#009900. Todos os navegadores lerão estes estilos.
Porém, logo tem outros dois estilos, que na verdade são os mesmos que os anteriores, que começam por duas barras. Firefox e Opera, que interpretam essas duas barras como comentários, não lerão os estilos. Internet Explorer que não tem em conta as duas barras como comentários, lerá os dois últimos estilos.