[CSS] Como escrever CSS só para o Internet Explorer 10

Publicado: 06/05/2013 em ASP.NET, C#, IIS, Internet, Microsoft, Programação, Sistemas Operacionais, Softwares, Tecnologia, Truques & Dicas
Tags:, , ,

E enquanto os nossos problemas continuam…

Todo Front-end que se preze conhece os comentários condicionais que detecta as versões do Internet Explorer, isso acontece no IE6, IE7, IE8, IE9 e acaba sendo muito simples escrever um CSS especifico para todas as versões visto que o IE tem vários problemas de compatibilidade. Bom, o problema é que o Internet Explorer 10 não tem suporte a esses comentários condicionais, eu sei você esta afim de dar um chute na bunda do Bill Gates mas vamos manter a calma, pra começo de conversa o Internet Explorer 10 vai ter um bom suporte pra um monte de features do HTML5, será maravilhosamente fantástico comparado com o IE9, mas comparado a um Chrome e Firefox, continuará sendo um lixo, e pode ser que você vá precisar escrever CSS só para ele então, chega de papo e vamos ao que interessa.

1º – Media Queries -ms-high-contrast

O Internet Explorer 10 tem uma Media que só ele tem, ai fica fácil escrever CSS só pro Internet Explorer 10 e sem depender de JavaScript pra isso, o snippet fica assim:

1
2
3
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
   /* CSS especifico para o IE10 aqui */
}

E isso funciona perfeitamente, sem bugs, sem brechas.

2º – Testar o -ms-high-contrast por JavaScript

Uma segunda abordagem pra aproveitar essa feature das Media Queries do Internet Explorer 10, é testar por JavaScript e colocar uma classe na tag HTML, o snippet fica assim:

1
2
3
if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
    document.documentElement.className += "ie10";
}

No CSS você continua fazendo da mesma forma, assim:

1
2
3
.ie10 seletor {
    /* CSS Especifico para o IE10 aqui */
}

Assim você tem um final feliz sempre =D

Conclusão

Acredito que o Internet Explorer 10 será bom o suficiente pra que não precisemos usar essas magias negras, mas se precisarmos vamos usar né? O problema é que não sei se isso vai sempre funciona, e não sei se o Internet Explorer 10 vai ter uma atualização surpresa removendo esse Hack, enfim. Quando sair a versão final do IE10 ai poderemos julgar definitivamente, por hora isso resolve nossos problemas.

Eu sei que existem outros tipos de Hacks pra identificar o IE10, mas este foi método mais eficiente, curto e grosso que eu identifiquei, não vou perder o meu tempo escrevendo algo que não será útil pra você =D Haaa antes que eu me esqueça, este hacks eu encontrei aqui.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s