Home Tutoriais Desenvolvimento Hack CSS para Internet Explorer: hífen de separação


Vamos explicar um dos hacks CSS mais utilizados para identificar e especificar estilos específicos para o navegador Internet Explorer, baseado em utilizar o caráter hífen de separação “_” ao principio do nome de um atributo CSS.

Este hack nos permite especificar estilos que só serão interpretados para Internet Explorer, com a particularidade que as especificações de CSS 2.1 o contemplam como válido sintaticamente.

Primeiro, teria que comentar o que são os Hacks CSS, porém é algo que já vimos em artigos anteriores de CriarWeb.com, portanto o melhor seria recomendar a leitura do texto Hacks CSS

O hack que vamos apresentar utiliza o hífen de separação antes de um atributo, que ficaria da seguinte maneira:

_font-size: 8pt;

À princípio, nenhum atributo de CSS começa por um hífen de separação, logo, a maioria dos navegadores simplesmente o ignorará. Entretanto, Internet Explorer sim que detecta este atributo e o tem em conta, aplicando o estilo que estiver definindo. Com esta premissa, podemos preparar um código CSS que seja interpretado de maneira distinta por Explorer e outros navegadores, da seguinte maneira:

body{
background-color: #00ff00;
_background-color: #ff0000;
}

Ao ler este código CSS todos os navegadores entenderão o primeiro atributo, pelo qual colocarão em cor verde o fundo da página (background-color: #00ff00;).

O segundo atributo, que começa por um hífen de separação, não será interpretado por nenhum navegador. Ainda será considerado como um erro CSS, pelo qual não o terão em conta e seguirão mostrando o fundo de cor verde.

Porém, Internet Explorer terá um comportamento distinto, já que reconhece qualquer atributo que comece por um hífen de separação (simplesmente ignorará o hífen). Neste caso, Explorer entenderá pelo segundo atributo que se está sobrescrevendo o atributo background-color e atribuirá a cor de fundo especificado como vermelho (_background-color: #ff0000;).

Sendo assim, com este hack podemos ter, com uma mesma folha de estilos, duas páginas que mostrem estilos distintos em Explorer e em outros navegadores, visto que o hífen de separação se pode utilizar para qualquer atributo CSS.

Fonte: http://www.criarweb.com/artigos/hack-css-para-internet-explorer.html

   

Leave a Reply

This blog is kept spam free by WP-SpamFree.