Css hack para Internet Explorer IE 6, IE 7, IE 8, IE 9, IE 10 e IE 11

Juan Cascón Baños

hace 10 años

Categorías: Internet

Etiquetas: css

Los diseñadores y maquetadores web, sufren de cambios de estado cuando tiene que probar y hacer funcionar bien una página Web con Internet Explorer. Hoy por hoy una web se debe ver bien con Explorer 8 o superior. Por fín podemos descartar el Internet Explorer 7 por el poco trafico que genera que es inderior al 1%.

Como nota de humor os dejamos la infografía con los estados de ánimo al probar un diseño de una página Web. 🙂

Ahora vamso a grano. Hay varias formas de intentar hacer compatible nuestro diseño con las diferentes versiones del Microsoft Intenet Explorer y no morir en el intento. Os dejamos Css hack para Internet Explorer IE6, IE7, IE8, IE9 , IE 10 e IE 11 y que son compatibles con Firefox y Chrome. Unos pequeños trucos que te permitiran dejar cuadrado el diseño en todos los navegadores. ¿Quien no se ha pegado con un ancho o padding con un diseño en un navegador,

1. Detectando la versión de Internet Explorer en el head y cargado diferentes hojas de Estilos

Para detectar la versión que está utilizando nuestro visitante, de este navegador, debemos usar los llamados comentarios condicionales. Es una solución muy elegante para cargar diferentes hojas de estilos.

Los comentarios condicionales fueron creados por Microsoft para su navegador y sólo son soportados por éste. Como comienzan con <!– cualquier otro navegador asumirá que es un comentario y no ejecutará el código que hay dentro. Este hack es muy elegante para no sobrecargar nuestra hoja de esilos principa y mejorar un poco en WPO.

Este tipo de hack se sitúa entre las etiquetas <head> y </head>. Utilizándolo podremos detectar la versión del navegador y cargar el archivo CSS necesario.

<!–[if CONDICION]> Código HTML <![endif]–>
En la condición podremos utilizar cualquiera de las que siguen. Pudiendo sustituir X por las versiones de Internet Explorer disponibles hasta el momento (5,6, 7,8,9).

IE
Cualquier versión de Internet Explorer
lt IE X
Versiones inferiores a X
lte IE X
Versiones inferiores o iguales a X
IE X
Solo para la version X
gte IE X
Versiones superiores o iguales a X
gt IE X
Versiones superiores a X

A continuación mostramos un ejemplo del uso de este hack:

<!–[if IE]>
Para IE

<![endif]–>
<!– [if IE 6]>
Para IE 6

<![endif]–>
<!– [if IE 7]>
Para IE 7

<![endif]–>
<!– [if IE 8]>
Para IE 8

<![endif]–>
<!– [if IE 9]>
Para IE 9

<![endif]–>
<!– [if gte IE 7]>
Para is IE 7 o superior. La que suelo usar

<![endif]–>
<!– [if lt IE 9]>
Para IE menor al 9

<![endif]–>
<!– [if lte IE 7]>
Para IE menor o igual 7

<![endif]–>
<!– [if gt IE 6]>
Para IE mayor 6

<![endif]–>
<!– [if !IE]> –>
Para cuando no es IE 5-9
<!– <![endif]–>

Un ejemplo en la cabecera <head>

<!– [if IE]> <link href=»ieallversion.css» rel=»stylesheet» type=»text/css»> <![endif]–>
o
<!– [if gte IE 7]> <link href=»ie789.css» rel=»stylesheet» type=»text/css»> <![endif]–>

Como inconveniente es que debes mantener otro fichero más.

2. El hack del guión bajo, el asterisco y \9

Unos de los trucos para lso selectoros de estilos CSS más usado. El hack del guión bajo, el asterisco y \9 para el resto de los navegadores una propiedad con un guión bajo, u otro carácter alfanumérico delante es algo que no existe, y por tanto no la interpretan, pero Internet Explorer los asimila sin problemas. Esto es algo que podemos utilizar para definir propiedades en los estilos, destinadas sólo a este navegador.

#textbox{
color:red; /* Firefox y los demás */
_color:red; /* Internet Explorer 6 e inferiores */
}

Este hack o truco funciona para todas las versiones de Internet Explorer que existen hasta la fecha, pero es posible que deje de funcionar en las próximas.

Teniendo en cuenta que los navegadores sobrescriben las propiedades si éstas se definen más de una vez, dejando establecida la que se define última; mostramos un ejemplo donde se muestran estos dos hacks que hemos descrito anteriormente.

body {
background: white; /* Firefox y los demás */
*background: black; /* IE7 e IE6 */
_background: grey; /* Sólo IE6 */
}

En el ejemplo que mostramos anteriormente el color de fondo de la página se verá blanco para Firefox, negro para Internet Explorer 7 y gris para IE 6.

Los nuevos CSS hacks para toda las versiones de Internet Explorer IE 6, IE 7, IE 8, IE 9, IE 10 e IE 11 y que son compatibles con Firefox y Chrome.

Os dejemos una lista de hacks mejorando lo anteriro para cada versión de IE.
#hack{
color:red; /* All browsers */
color:red !important;/* All browsers but IE6 */
_color:red; /* Only works in IE6 */
*color:red; /* IE6, IE7 */
+color:red;/* Only works in IE7*/
*+color:red; /* Only works in IE7 */
color:red\9; /* IE6, IE7, IE8, IE9 */
color:red\0; /* IE8, IE9 */
color:red\9\0;/*Only works in IE9*/
}

4. Truco o Hack para Internet Explorer 10 (IE10).

. ie10 #hack{
color:red; /* Only works in IE10 */}
La razon de que funcione en el IE10 es que la clase class=”ie10″ se pone en el tag

5. El truco mejor para los selectores de CSS para Internet Explorer 10 y 11 con el filtro-ms-high-contrast:none y *::-

@media all and (-ms-high-contrast:none)
{
.clasecolor { color: green } /* IE10 */
*::-ms-backdrop, .clasecolor { color: red } /* IE11 */
}

Espero que os sirva esta pequeña guía con 5 trucos, cuando te vuelvas loco a cuadrar u diseño con IE6, IE7, IE8, IE9 , IE 10 e IE 11 mediante los hacks de CSS.

. Leer artículo completo en Frikipandi Css hack para Internet Explorer IE 6, IE 7, IE 8, IE 9, IE 10 e IE 11.

Entradas recientes para Css hack para Internet Explorer IE 6, IE 7, IE 8, IE 9, IE 10 e IE 11