Usando seletores CSS3 avançados no IE

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
• único-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 apresenta um problema - precisamos aproveitar os seletores CSS3 no arquivo de folha de estilo, mas o IE os descarta.

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.