HTML5 Polyfills, un ejemplo de uso

Siguiendo con el tema de las compatibilidades HTML5 le toca el turno a los Polyfills, estos sirven para dar funcionalidades HTML5 a navegadores que no las soportan.

Para que accedas a estos Pollyfills debes entrar al siguiente enlace:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

En esta pagina encontrarás una colección de librerías y scripts para dotar de cierta compatibilidad html5. Un ejemplo sería el del estilo border-radius el cual no es soportado por las versiones 6 al 9 de Internet Explorer. Un ejemplo sencillo consiste en crear una caja con bordes redondeados para la cual nuestra regla css es la siguiente:

div

{

height: 130px;

width: 930px;

border: 1px solid #ccc;

-o-border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

No olvides usar los prefijos (-o-, -moz-, -webkit-) para los navegadores opera, firefox, safari y chrome no actualizados. Ahora si cargas esto en esos navegadores verás un rectángulo con borde color gris de un pixel y sus cuatro bordes redondeados. Ahora en un Internet Explorer version 6-9 verás un rectángulo con borde color gris de un pixel y sin bordes redondeados.

Para resolver esto entramos al sitio de HTML5 polyfills (el enlace lo encuentras arriba) y lo que yo hago es usar el buscador del navegador para localizar el polyfills que me ayude a dar soporte a lo que necesito, en este caso buscamos border-radius. Esto nos manda a CSS3 PIE y al pulsar el enlace nos carga una pagina muy completa donde nos muestra un demo del funcionamiento, documentación y ejemplos de uso, lo que nos facilita la implantación en nuestro sitio. Te darás cuenta al entrar en dicho sitio, que CSS3 PIE además de border-radius habilita box-shadow y linear-gradient.

Lo primero que hay que hacer es descargar el paquete que contiene el archivo PIE.htc este archivo debes subirlo a una carpeta dentro del directorio raiz de tu sitio, para este ejemplo se usará el directorio css que es el mismo donde estará la hoja de estilos. En las reglas de estilo donde definimos el border-radius agrega la regla:

behavior: url(PIE.htc);

Entonces las reglas de estilos quedarán de la siguiente manera:

div

{

height: 130px;

width: 930px;

border: 1px solid #ccc;

-o-border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

behavior: url(PIE.htc);

}

Así, con estos sencillos pasos podrás dar mayor compatibilidad a tu sitio.

¿Cuales son las reglas CSS3 que más utilizas?


¿ Te Gusto ? Comenta y compartelo!