monitojoomla

Tip - Hacer que IE siga los estándares

Martes, 13 Julio 2010 | Escrito por Jhon Marreros Guzman

Detalles Tip - Nivel : Intermedio, Formato : texto y video.
Las versiones antiguas de IE no soportan los estándares css, esto se puede aliviar en parte a través del uso de librerías como las que nos proporciona el proyecto ie7-js, el cual se encuentra alojado en google.

En el siguiente video se muestra el uso de la librería ie9.js (parte del proyecto ie7-js) a través de un ejemplo práctico

1- Código html de ejemplo

A continuación se muestra el código html base, el código es un formulario simple de registro con controles de labels y cajas de texto. Tener en cuenta que la librería busca imágenes con terminación "trans.png" para ser mostradas correctamente con transparencia en ie6

<div id="contenedor">
 
 
 <div id="cabecera">
 <img src="/imagenes/mailbox-trans.png" width="128" height="128" />
 <span>Formulario de contacto - Ejemplo uso IE7.JS</span>
 </div>
 <!--cabecera-->
 
 <div id="cuerpo">
 <form>
 <label for="nombre">Nombre : </label>
 <input type="text" id="nombre" alt="nombres" name="nombre" value="" />
 <br/>
 <br/>
 
 <label for="apellidos">Apellidos : </label>
 <input type="text" id="apellido" alt="nombres" name="nombres" value="" />
 <br/>
 <br/>
 
 <label for="email">E-mail : </label>
 <input type="text" id="email" name="email" value="" />
 <br/>
 <br/>
 
 <label for="mensaje">Mensaje: </label>
 <textarea id="mensaje"></textarea>                    
 <br/>
 <br/>
 
 <input type="radio" name="optsexo" value="h" checked="checked"> <span>Hombre</span>                     
 <br/>
 <input type="radio" name="optsexo" value="m"> <span>Mujer</span> 
 <br/>
 <br/>
 
 <input  type="submit" id="enviar" value="Enviar" />                     

 </form>

 </div>
 <!--cuerpo-->
 
 <div id="pie">
 Lorem ipsum dolor sit amet, consect...
 </div>

2- Código CSS 2 no soportado por IE<8

Se incluye selectores especiales en atributos, el tercer selector para los check de los radiobuttons no es soportado en IE8 de manera nativa

input[type=text]:focus{
 background: yellow;
}

input[alt=nombres]:focus{
 background: blue;
}

input:checked + span{
 background: yellow;
}

textarea:focus{
 background: yellow;
}

#pie:hover{
 color: black;
}

3- Agregando la referencia al archivo ie9.js

Para este ejemplo utilizaremos el archivo i9.js con el cual logramos que todas las versiones de IE soporten el código anteriormente mostrado y además que las imágenes png se muestren correctamente en ie6. En la parte superior de nuestro archivo agregamos la siguiente referencia.

<!--[if lt IE 9]>
 <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

4- Conclusión

Al hacer uso de esta librería hacemos que IE se comporte como lo esperado en cuanto a estándares se refiere (para ver librerías que corrigen bugs de ie, dentro del mismo proyecto visitar este link). Esta librería nos brinda una gran facilidad y nos evita preocuparnos por como se verá en IE, y tu, ¿Conoces alguna otra librería para trabajar con IE?

• Descargar archivos fuente
• Demo en linea

Comparte este post