Seguramente os habreis encontrado más de una vez (y más de dos para que negarlo) en esta situación, teneis un diseño maquetado y listo, se ve perfecto en todos los navegadores actuales, pero al probarlo en Internet Explorer, desastre, cosas que se mueven de sitio, no hay bordes redondeados, ni sombras, muchos selectores CSS3  no funcionan…

Para ahorraros muchos dolores de cabeza aquí os dejo unas cuantas librerias que os pueden ser de gran utilidad:

1. Selectivizr (www.selectivizr.com)

Esta libreria funciona junto a jQuery, MooTools o Prototype entre otras y como su nombre indica añade a Internet Explorer todos los selectores que no tiene, ahorrándonos así, mucho trabajo. En su página podréis encontrar una lista más específica de estos.
Para hacerla funcionar nos basta con añadirla en el <head> de nuestra página web junto a la libreria que decidamos (Por ejemplo jQuery)

<script type="text/javascript" src="[Libreria JS]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[Css en el caso de que el navegador tenga desactivado el javascript]" /></noscript>
<![endif]-->

2. PIE  (www.css3pie.com)

PIE permite a Internet Explorer emular los efectos CSS3 que no soporta por defecto, como los bordes redondeados o el box-shadow o la opción de definir más de un fondo en un mismo elemento.

Para poder utilizarlo simplemente tenemos que descargarnos los archivos y llamarlos en nuestro CSS de la siguiente forma:

.elementoRedoneado {
border-radius:5px;
behavior: url(pie/PIE.htc);
}

Es importante tener en cuenta que la url hacia el archivo PIE.htc es relativa al archivo html, no al css. También hay que tener en cuenta que PIE genera elementos sobre los ya existentes para aplicar los efectos lo que puede dar problemas con los “position relative y absolute”, para solucionarlo hay que añadir un parámetro de z-index a la capa en concreto.

3. IE7-JS (code.google.com/p/ie7-js/)

Esta es otra libreria js, arregla un gran número de errores de html y css y intenta hacer de Internet Explorer un navegador que cumple los estándares web. También arregla los problemas con las transparencias de png en Internet Explorer 6 y 5

Para su uso solo es necesario añadirla (Podemos hacerlo desde Google Code mismo)  al <head> de nuestro proyecto dentro de un condicional para que solo se cargue si se trata de Internet Explorer.

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

4. Extra! Prefix free (leaverou.github.com/prefixfree/)

Esta no es una libreria pensada para solucionar errores de Internet Explorer, pero para los que utilizáis css3 asiduamente seguro que os interesa. Prefix free permite que en nuestro css solo tengamos que poner la propiedad css3 sin sufijo de navegador, que el se encargará de añadir la necesaria según el navegador del usuario.

Para poner un ejemplo, cuando queremos hacer una capa con bordes redondeados y asegurarnos que se vea correctamente en cualquier navegador hacemos lo siguiente:

.elementoRedoneado {
border-radius:5px;
-moz-border-radius:5px; /* Firefox */
-webkit-border-radius:5px; /* Chrome y Safari */
}

Con Prefix free solo nos hará falta:

.elementoRedoneado {
border-radius:5px;
}

Para utilizarla basta con añadir la librería en elde nuestro proyecto

Pensad que aunque muchas de estas librerías nos van a ahorrar grandes dolores de cabeza siempre o casi siempre tendremos que crear un css específico para Internet Explorer

Y de momento esto es todo, espero vuestras sugerencias para descubrir nuevas librerías y utilidades 🙂

Deja un comentario