Condicionales para Internet explorer dentro de hojas de estilo

WHK · 24 Enero 2012, 20:31 PM

Estaba buscando si existian algunas condicionales similares al <!--[IF IE]> pero dentro de las hojas de estilo y encontré muchas pero todos son hacks, no pude encontrar nada que lo haga "a la buena".

Algunos de los que encontré son estos y ya los he probado y funcionan super bién, el problema es que no pasan los validadores como W3C.

Ojala les sirvan.

http://www.maestrosdelweb.com/editorial/hacks-en-css-que-te-evitaran-dolores-de-cabeza-en-internet-explorer/

En los comentarios también salen otras formas.

Saludos.

Estos 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 tipo de condicional se sitúa entre las etiquetas <head> y </head>. Utilizándolo podremos detectar la versión del navegador y cargar el archivo CSS necesario.

Código [Seleccionar]

<!--[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,5.5,6 o 7).

Código [Seleccionar]

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 condicional:

Código [Seleccionar]

<!-- (...) -->
<head>
	<title>Título</title>
	<link href="all_browsers.css" rel="stylesheet" type="text/css">
	<!--[if IE]> <link href="ie_any_version.css" rel="stylesheet" type="text/css"> <![endif]-->
	<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
	<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent_versions.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
	<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>
<!-- (...) -->

El hack del guión bajo

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 las asimila sin problemas. Esto es algo que podemos utilizar para definir propiedades en los estilos, destinadas sólo a este navegador.

Código [Seleccionar]

#textbox{
  width: 450px;		/* Firefox y los demás */
  _width:400px;		/* Internet Explorer 6 e inferiores */
}

Este hack 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.

Código [Seleccionar]

body {
background: #FFFFFF 		 	/* Firefox y los demás */
*background: #000000 			/* IE7 e inferiores */
_background: #CCCCCC; 			/* 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.
El uso de !important

Este operador es utilizado en los archivos CSS para que los navegadores respeten la importancia de la propiedad que lo contenga y evite que se sobrescriba con otras que se definan posteriormente.

Internet Explorer 6 y las versiones anteriores no interpretan este operador; problema que fue solucionado en la versión 7 de este navegador.

Código [Seleccionar]

p {
/*
 Navegadores superiores a IE 6 respetarán la
 importancia inmediatamente */
background: green !important; 
/* IE 6 y anteriores aplicará este estilo
 aunque esté marcado la anterior como importante */
background: red; 
}

En el ejemplo anterior el fondo de la página se mostrará rojo para IE 6, mientras que para Internet Explorer 7 y el resto de los navegadores se verá verde.
Sin hacks en nuestros CSS

El desarrollador Dean Edwards pone a disposición de todos, bajo licencia GNU LGPL, la librería javascript IE7, para hacer que Internet Explorer (Navegadores Microsoft IE) se comporten como un navegador que sigue los estándares. Además hace que los PNG transparentes funcionen correctamente en las versiones 5 y 6 del navegador y soluciona diversos problemas relacionados a la interpretación del CSS.

Para utilizar esta librería debemos descargarla de Google Code y seguidamente agregar estas líneas entre las etiquetas :

Código [Seleccionar]

<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->

Con este código cargamos el script chequeando que el navegador sea Internet Explorer, utilizando para esto el condicional del que hablábamos al inicio.

para que podamos tener los hacks sin perder de vista los estandares, podemos utilizar los siguientes hacks:

Código [Seleccionar]

.class {
... /*Estilos para FF*/
}
*:first-child+html .class {
... /*Estilos para IE7*/
}

*html .class {
... /*Estilos para IE6*/
}

Primero se pondrian los estilos para FF y/o los verdaderos browsers clase A, luego se puede utilizar el segundo estilo que funciona exclusivamente para IE7, incluso si necesita una estructura de arbol para los estilos, lo unico que se debe poner es *:first-child+html y en seguida la estructura y eso reconoce y valida para IE7, de igual forma con *html que es exclusivo para IE6.

flacc · 26 Enero 2012, 06:31 AM

nunca se me había ocurido buscar sobre eso, muy útil la info, se agradece...saludos

Test Foro de elhacker.net SMF 2.1

Condicionales para Internet explorer dentro de hojas de estilo

WHK

flacc