La siguiente es una publicación invitada de Daniel Herken. Daniel es el autor del próximo libro The Cross Browser Handbook. Recientemente me envió un correo electrónico para compartir eso, así como para ofrecerme escribir una publicación de invitado. Estaba entusiasmado con Webshims Lib, una especie de polyfill de “todo”. La siguiente es la publicación de invitado, presentando esa biblioteca y su uso básico.
En esta publicación, hablaré sobre la biblioteca polyfill de funciones HTML5 y CSS3 llamada Webshims Lib y cómo usarla correctamente.
Polyfill?
En el desarrollo web, llamamos “polyfills” a los scripts que emulan partes de la especificación HTML5 o CSS3. Un polyfill puede ser casi cualquier cosa: una biblioteca de JavaScript que agrega soporte para selectores CSS3 a versiones antiguas de Internet Explorer (es decir, Selectivizr) o una solución de alta gama basada en Flash para habilitar el <audio> y <video> etiqueta todo el camino de regreso a IE 6 (es decir, html5media).
Presentando Webshims
Webshims Lib es uno de los polyfills más completos que existen. Está basado en jQuery y Modernizr. La inclusión de este único script habilitará muchas funciones en toda la gama de navegadores de escritorio.
Webshims habilita funciones HTML5 y CSS3 como etiquetas semánticas, lienzo, almacenamiento web, geolocalización, formularios y multimedia. Al leer esta gran lista, lo primero que puede venir a la mente es cuán grande debe ser esta biblioteca. Lo que significa un tamaño de descarga enorme y un tiempo de ejecución de script prolongado. Pero aquí está el truco, Webshims detectará automáticamente qué funciones admite el navegador de los usuarios y solo carga lo necesario para simular todo lo demás. De esta manera, no ralentizará a los usuarios que ya ejecutan un navegador moderno como Firefox o Chrome. Incluso puede reducir la cantidad de funciones para cargar si no lo necesita todo.
Cómo utilizar Webshims
Para usar la biblioteca webshims, debe incluir las dependencias jQuery y Modernizr junto con Webshims Lib.
<script src="https://css-tricks.com/how-to-use-the-webshims-polyfill/scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/modernizr-custom.js"></script>
<script src="scripts/webshim/polyfiller.js"></script>Ahora debe inicializar Webshims y, si es necesario, indicarle qué funciones desea utilizar.
<script>
// Polyfill all unsupported features
$.webshims.polyfill();
</script><script>
// Polyfill only form and canvas features
$.webshims.polyfill('forms canvas');
</script>¡Y eso es! Webshims detectará y rellenará automáticamente las funciones faltantes según el navegador del usuario. Si tiene curiosidad, la lista completa de funciones es:
- json-almacenamiento
- es5
- geolocalización
- lienzo
- formas
- formularios-ext
- elemento mediático
- pista
- detalles
Ejemplo
Hagamos un ejemplo usando el <video> etiqueta. Primero, creemos la página básica sin Webshims o cualquier otro polyfill.
<!DOCTYPE html>
<html>
<head>
<title>Video native</title>
</head>
<body>
<video width="480" height="360" controls="controls">
<source src="https://css-tricks.com/how-to-use-the-webshims-polyfill/Video.mp4" type="video/mp4">
<source src="Video.webm" type="video/webm">
</video>
</body>
</html>Los navegadores modernos mostrarán este video correctamente, pero Internet Explorer 6, 7 u 8 no.
Ahora cambiamos el ejemplo para incrustar Webshims Lib. Puede ver que no es necesario editar nada más.
<!DOCTYPE html>
<html>
<head>
<title>Video including polyfill</title>
<script src="https://css-tricks.com/how-to-use-the-webshims-polyfill/scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/modernizr-custom.js"></script>
<script src="scripts/webshim/polyfiller.js"></script>
<script>
$.webshims.polyfill('mediaelement');
</script>
</head>
<body>
<video width="480" height="360" controls="controls">
<source src="https://css-tricks.com/how-to-use-the-webshims-polyfill/Video.mp4" type="video/mp4">
<source src="Video.webm" type="video/webm">
</video>
</body>
</html>El navegador moderno mostrará su nativo <video> tag player pero ahora esta funcionalidad también está disponible en Internet Explorer 6+. Puedes probar la demostración aquí.
Conclusión
Como ha mostrado el ejemplo, es realmente sencillo utilizar Webshims Lib. No es necesario modificar su código y no ralentiza a los usuarios que utilizan un navegador moderno. Permite que todos disfruten de todas las funciones que ofrece su página. Dirígete a la página de inicio de Webshims para descargar, documentación y más demostraciones.