Não me interpretem mal, o IE não oferece suporte a seletores avançados CSS3, incluindo o IE8 mais recente (consulte "Suporte do navegador para seletores CSS" para obter detalhes), mas os seletores CSS são realmente muito úteis. a eficiência torna mais fácil para nós criar páginas de alta manutenção.
No entanto, o suporte do IE para seletores CSS avançados, especialmente seletores CSS3, nos impediu de promover a aplicação de seletores CSS. No entanto, embora não possamos controlar a quota de mercado dos navegadores, podemos melhorar o nosso trabalho através de algumas tecnologias. Também podemos usar outras tecnologias para permitir que o IE suporte seletores CSS3 disfarçados.
Keith Clark, um engenheiro de desenvolvimento web do Reino Unido, desenvolveu uma solução JavaScript para permitir que o IE suporte seletores CSS3. Este script oferece suporte a várias versões do IE5 ao IE8.
uso
Você só precisa baixar o script DOMAssistant de Robert Nyman e ie-css3.js e importá-los na tag head da sua página, assim:
<cabeça>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</head>
Seletores suportados
n-ésimo filho
enésimo último filho
enésimo tipo
enésimo último do tipo
primeiro filho
último filho
filho único
primeiro do tipo
último do tipo
somente do tipo
vazio
Algumas limitações do ie-css3
As folhas de estilo devem ser introduzidas através da tag <link>. Folhas de estilo em nível de página ou folhas de estilo embutidas não terão efeito. mas
Você pode usar @import em arquivos de estilo externos para importar outros arquivos de estilo;
O arquivo da folha de estilo deve ser colocado sob o mesmo nome de domínio da página;
Arquivos de estilo usando o caminho file:// não funcionarão devido a problemas de segurança do navegador;
O seletor :not() ainda não é suportado;
Este método não é dinâmico. Alterar o DOM após a aplicação do estilo será inválido.
Como funciona?
ie-css3.js baixa cada arquivo de estilo da página e analisa seus pseudosseletores CSS3. Se um seletor for encontrado, ele será substituído pela classe CSS de mesmo nome. Por exemplo: div:nth-child(2) se tornará div._iecss-nth-child-2. O DOMAssistant de Robert Nyman é então usado para encontrar o nó DOM que corresponde ao seletor CSS3 do elemento e, em seguida, adiciona a classe CSS correspondente a ele.
Eventualmente, a folha de estilo do elemento será substituída pela nova versão e então o estilo correspondente será adicionado ao elemento correspondente usando seletores CSS3.
Evite o interpretador CSS do IE
De acordo com o W3C, um navegador deve ignorar as regras CSS que não reconhece. Isso cria um problema - precisamos usar seletores CSS3 no arquivo da folha de estilo, mas o IE irá descartá-los.
Para evitar esse problema, cada arquivo de estilo é baixado via XMLHttpRequest. Isso permite que o script ignore o interpretador CSS integrado do navegador e seja capaz de ler o arquivo CSS bruto.
Visite a página inicial do projeto
Baixe ie-css3.js
Baixar DOMAssistant
alternativa
Obviamente esta não é uma solução perfeita para sites Ajax, é basicamente inutilizável, porque alterar o DOM após a aplicação da folha de estilo gerada não será eficaz. Mas, na verdade, podemos personalizar um ie-css3 nós mesmos. Simplesmente não é tão inteligente quanto este.