Como escrever um hack CSS para o IE 11? [duplicado]
8 answers
Usar uma combinação de regras CSS específicas da Microsoft para filtrar IE11:
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
Filtros como este funcionam devido ao seguinte:
Quando um agente de Utilizador não pode processar o selector (isto é, não é válido o CSS 2.1), deve ignorar o selector e o seguinte bloco de declaração (se existir) também.
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
Referências
À luz da evolução do fio, actualizei o seguinte:
IE 6
* html .foo {property:value;}
Ou
.foo { _property:value;}
IE 7
*+html .foo {property:value;}
Ou
*:first-child+html .foo {property:value;}
IE 6 e 7
@media screen\9 {
.foo {property:value;}
}
Ou
.foo { *property:value;}
Ou
.foo { #property:value;}
IE 6, 7 e 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 8
html>/**/body .foo {property:value;}
Ou
@media \0screen {
.foo {property:value;}
}
IE 8 apenas modo padrão
.foo { property /*\**/: value\9 }
IE 8,9 e 10
@media screen\0 {
.foo {property:value;}
}
IE 9 apenas
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
IE 9 e superior
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
IE 9 e 10
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
IE 10 apenas
_:-ms-lang(x), .foo { property:value\9; }
IE 10 e superior
_:-ms-lang(x), .foo { property:value; }
Ou
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
..foo{property:value;}
}
IE 11 (e acima..)
_:-ms-fullscreen, :root .foo { property:value; }
Alternativas Javascript
Modernizr
O Modernizr corre rapidamente na carga da página para detectar as funcionalidades; depois cria um objecto JavaScript com os resultados, e adiciona classes ao elemento html
Agente do utilizador selecção
Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Adiciona (por exemplo) o elemento abaixo a html
:
data-useragent='Mozilla/5.0 (compatible; M.foo 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
Permitindo selectores de CSS muito direccionados, por exemplo:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Nota de rodapé
Se possível, identificar e resolver qualquer problema ou problemas sem hacks. Suporte aprimoramento progressivo e degradação graciosa. No entanto, este é um cenário de "mundo ideal" que nem sempre é possível obter, como tal-o acima deve ajudar a fornecer algum bom Opcao.
Atribuição / Leitura Essencial
- Jeff Clayton | Browserhacks.com
- Keith Clarke
- Paul Irish
- Web Devout
- A Chave Inglesa
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Porque os suportes IE10 e IE11-ms-alto-cotrasts você pode aproveitar esta vantagem para atingir estes dois navegadores
E se quiser excluir o IE10 disto, tem de criar um código específico do IE10, como segue está a usar o truque do agente de utilizador, tem de adicionar este Javascript
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
E esta marca de HTML
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
E agora podes escrever o teu código CSS assim.
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
Para mais informações consultar este sítio Web, wil tutorail, Tutorial do Chris
E se quiser atingir a IE11 e mais tarde, eis o que encontrei:
_:-ms-fullscreen, :root .selector {}
Aqui está um grande recurso para obter mais informações: browserhacks.com
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
E, claro, o div...
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
Então o texto aparece em azul com o internet explorer 11. Diverte-te com isso.
-
Mais IE e outros hacks de navegação CSS no meu site de testes ao vivo aqui:
Actualizado: http://browserstrangeness.bitbucket.io/css_hacks.html
Espelho: http://browserstrangeness.github.io/css_hacks.html
(Se você também está procurando por Hacks MS Edge CSS, é para onde ir.)
Pode usar o seguinte código dentro da marca de estilo:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Abaixo está um exemplo que funcionou para mim:
<style type="text/css">
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
#flashvideo {
width:320px;
height:240;
margin:-240px 0 0 350px;
float:left;
}
#googleMap {
width:320px;
height:240;
margin:-515px 0 0 350px;
float:left;
border-color:#000000;
}
}
#nav li {
list-style:none;
width:240px;
height:25px;
}
#nav a {
display:block;
text-indent:-5000px;
height:25px;
width:240px;
}
</style>
Por favor, note que desde (#nav li) e (#nav A) estão fora do ecrã @media ..., são estilos gerais.
Pode usar o js e adicionar uma classe no html para manter o padrão dos comentários condicionais :
var ua = navigator.userAgent,
doc = document.documentElement;
if ((ua.match(/MSIE 10.0/i))) {
doc.className = doc.className + " ie10";
} else if((ua.match(/rv:11.0/i))){
doc.className = doc.className + " ie11";
}
Ou usar uma lib como o bowser:
Ou modernizr para detecção de características:
Depois de procurar por documentação da Microsoft consegui encontrar um novo estilo único IE11msTextCombineHorizontal
Exemplo de código: detectar IE10 e IE11 por testes de capacidade CSS (JSFiddle)
Eu actualizarei o exemplo de código com mais estilos quando os descubro.
Nota: isto quase certamente identificará IE12 e IE13 como "IE11", pois esses estilos provavelmente seguirão adiante. Vou adicionar mais testes à medida que novas versões se desenrolam, e espero ser capaz de confiar novamente em Modernizr. Estou a usar este teste para comportamento de recuo. O comportamento de retrocesso é apenas menos glamouroso estilo, ele não tem funcionalidade reduzida.Achei isto útil
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
Adicione isto no seu <head>
Documento