css - only - if ie
¿Cómo escribir un hack de CSS para IE 11? (8)
Esta pregunta ya tiene una respuesta aquí:
¿Cómo puedo piratear o escribir css solo para IE 11? Tengo un sitio web que se ve mal en IE 11. Solo busco aquí y allá, pero aún no encontré ninguna solución.
¿Hay algún selector css?
A la luz del hilo evolutivo, he actualizado el siguiente:
IE 6
* html .ie6 {property:value;}
o
.ie6 { _property:value;}
IE 7
*+html .ie7 {property:value;}
o
*:first-child+html .ie7 {property:value;}
IE 6 y 7
@media screen/9 {
.ie67 {property:value;}
}
o
.ie67 { *property:value;}
o
.ie67 { #property:value;}
IE 6, 7 y 8
@media /0screen/,screen/9 {
.ie678 {property:value;}
}
IE 8
html>/**/body .ie8 {property:value;}
o
@media /0screen {
.ie8 {property:value;}
}
IE 8 solo modo estándar
.ie8 { property /*/**/: value/9 }
IE 8,9 y 10
@media screen/0 {
.ie8910 {property:value;}
}
Solo IE 9
@media screen and (min-width:0/0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
IE 9 y superior
@media screen and (min-width:0/0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
IE 9 y 10
@media screen and (min-width:0/0) {
.ie910{property:value/9;} /* backslash-9 removes ie11+ & old Safari 4 */
}
Solo IE 10
_:-ms-lang(x), .ie10 { property:value/9; }
IE 10 y superior
_:-ms-lang(x), .ie10up { property:value; }
o
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
IE 11 (y superior ...)
_:-ms-fullscreen, :root .ie11up { property:value; }
Alternativas de Javascript
Modernizr
Modernizr se ejecuta rápidamente en la carga de la página para detectar características; luego crea un objeto JavaScript con los resultados y agrega clases al elemento html
Selección de agente de usuario
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'':'''');
Agrega (por ejemplo) el elemento de abajo a html :
data-useragent=''Mozilla/5.0 (compatible; MSIE 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''
Permitir selectores de CSS muy orientados, por ejemplo:
html[data-useragent*=''Chrome/13.0''] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Nota
Si es posible, identifique y solucione cualquier problema sin cortes. Admite mejora progresiva y degradación elegante . Sin embargo, este es un escenario de "mundo ideal" que no siempre se puede obtener, por lo tanto, lo anterior debería ayudar a proporcionar algunas buenas opciones.
Atribución / lectura esencial
Aquí hay una solución de dos pasos aquí es un truco para IE10 y 11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
porque IE10 e IE11 admiten -ms-high-cotrast puede aprovechar esta ventaja para apuntar a estos dos navegadores
y si quiere excluir el IE10 de esto, debe crear un código específico de IE10 ya que sigue el truco de agente de usuario, debe agregar este Javascript
var doc = document.documentElement;
doc.setAttribute(''data-useragent'', navigator.userAgent);
y esta etiqueta HTML
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
y ahora puedes escribir tu código CSS como este
html[data-useragent*=''MSIE 10.0''] h1 {
color: blue;
}
Para obtener más información, consulte estos sitios web, wil tutorail , Chris Tutorial
Y si quiere apuntar a IE11 y más tarde, esto es lo que he encontrado:
_:-ms-fullscreen, :root .selector {}
Aquí hay un gran recurso para obtener más información: browserhacks.com
Así que al final encontré mi propia solución a este problema.
Después de buscar en la documentación de Microsoft , logré encontrar un nuevo estilo de IE11 solo msTextCombineHorizontal
En mi prueba, compruebo los estilos IE10 y si son una coincidencia positiva, entonces busco el estilo IE11. Si lo encuentro, entonces es IE11 +, si no lo hago, entonces es IE10.
Ejemplo de código: Detectar IE10 e IE11 mediante CSS Capability Testing (JSFiddle)
Actualizaré el ejemplo de código con más estilos cuando los descubra.
NOTA: Es casi seguro que esto identificará IE12 e IE13 como "IE11", ya que esos estilos probablemente continuarán. Agregaré más pruebas a medida que aparezcan nuevas versiones, y espero que pueda confiar nuevamente en Modernizr.
Estoy usando esta prueba para el comportamiento alternativo. El comportamiento alternativo es un estilo menos glamoroso, no tiene una funcionalidad reducida.
He estado escribiendo esto y contribuyéndolos a BrowserHacks.com desde el otoño de 2013; este que escribí es muy simple y solo es compatible con IE 11.
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
y por supuesto, el div ...
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
Así que el texto aparece en azul con Internet Explorer 11. Diviértete con él.
-
Más IE y otros scripts de navegador CSS en mi sitio de prueba en vivo aquí:
ACTUALIZADO: http://browserstrangeness.bitbucket.io/css_hacks.html
ESPEJO: http://browserstrangeness.github.io/css_hacks.html
(Si también está buscando MS Edge CSS Hacks, eso es a dónde ir).
Me pareció útil
<?php if (strpos($_SERVER[''HTTP_USER_AGENT''], ''Trident/7.0; rv:11.0'') !== false) { ?>
<script>
$(function(){
$(''html'').addClass(''ie11'');
});
</script>
<?php } ?>
Agregue esto debajo de su documento <head>
Puede usar el siguiente código dentro de la etiqueta de estilo:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
A continuación hay un ejemplo que funcionó para mí:
<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>
Tenga en cuenta que dado que (#nav li) y (#nav a) están fuera de la pantalla @media ..., son estilos generales.
Puede usar js y agregar una clase en html para mantener el estándar de comentarios condicionales :
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";
}
O use un lib como bowser:
O modernizr para la detección de características:
Use una combinación de reglas CSS específicas de 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>
Los filtros como este funcionan debido a lo siguiente:
Cuando un agente de usuario no puede analizar el selector (es decir, no es CSS válido 2.1), también debe ignorar el selector y el siguiente bloque de declaración (si corresponde).
<!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>
Referencias