05/11/2014

Modernizr: conociendo el navegador de nuestros usuarios

Modernizr: conociendo el navegador de nuestros usuarios

No muchos años atrás, la enorme mayoría de los usuarios navegaba por la Web desde una computadora con un monitor de resolución predecible (800×600 o 1024×768) utilizando alguna versión de Internet Explorer. Pero con el tiempo se fueron sumando nuevos navegadores, sistemas operativos, resoluciones, modalidades de interacción y tecnologías de pantalla que eliminaron la idea de una plataforma estándar. Hoy existen muchas formas de navegar por la Web, y la adaptabilidad a múltiples entornos debe ser una meta en cualquier proyecto de desarrollo.

Para ayudarnos a comprender esa diversidad existe Modernizr, una biblioteca de JavaScript que detecta qué características de HTML5 y CSS3 (dos estándares todavía en desarrollo) son soportadas por el browser del usuario.

Si un browser no soporta un elemento de HTML5 o una propiedad de CSS3, Modernizr no hará nada para que el browser los muestre correctamente a pesar de eso. Pero sí puede detectar que esa característica no es soportada para que hagamos algo al respecto. Si queremos que nuestro sitio se pueda navegar en las mismas condiciones desde cualquier browser, podemos lograrlo con reglas CSS específicas para esas plataformas o eligiendo un polyfill de la larga lista que nos ofrecen los propios creadores de Modernizr. Cabe destacar que html5shiv, un conocido polyfill de HTML5, puede descargarse junto con Modernizr.

Son varias las ventajas que trae Modernizr:

  • Es muy simple de usar.
  • Ahorra tiempo, ya que nos evita el trabajo de crear plantillas particulares para cada navegador.
  • Apunta a garantizar compatibilidad con browsers antiguos no escribiendo código desactualizado sino, por el contrario, avanzando hacia los nuevos estándares del W3C.
  • En el sitio oficial podemos descargar una versión de Modernizr que contenga solo las características que necesitemos, reduciendo el peso del archivo y, en consecuencia, mejorando la velocidad de carga de nuestro sitio web.

Cada plataforma soporta un determinado conjunto de características y siempre de una forma particular. Al crear reglas orientadas a un navegador en especial, seguramente estemos descuidando algún otro. Por eso, orientarse a características es más conveniente. Y este es, precisamente, el enfoque de Modernizr.

Enlaces externos

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce