Home Tutoriais Desenvolvimento Hacks CSS


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.

Portanto, o resultado final será que:

  • Todos os navegadores mostrarão os H1 com tamanho de fonte 12px e cor verde.
  • Internet Explorer mostrará os H1 com tamanho de 16px e cor azul, dado que não tem em conta as duas barras como se fossem comentários.

Teríamos que vê-lo com Internet Explorer e com outros navegadores para comprovar que mudam os estilos com os que se mostra o cabeçalho H1.

Conclusão sobre os Hacks CSS

O certo é que os Hacks CSS estão aí e muitas pessoas os utilizam habitualmente. Há vários tipos de Hacks, com técnicas mais ou menos conflituosas ou ortodoxas. Não devemos abusar deles, porém em algumas ocasiões não resta outra solução que utilizá-los para que uma página se veja da mesma maneira nos navegadores mais comuns.

Vimos também um tipo de Hack CSS que serve para ocultar certos estilos em Firefox ou outros navegadores e que só funcione em Internet Explorer.

Fonte: http://www.criarweb.com/artigos/hacks-css.html

   

Leave a Reply

This blog is kept spam free by WP-SpamFree.