Modernizr es una biblioteca de JavaScript que detecta las funciones disponibles en el navegador de un usuario . Esto permite que las páginas web eviten funciones no compatibles al informar al usuario que su navegador no es compatible o al cargar un polyfill . Modernizr tiene como objetivo proporcionar detección de características de una manera consistente y fácil de usar que desaliente el uso de rastreo de navegador propenso a fallas . [5]
Autor (es) original (es) | Faruk Ateş |
---|---|
Desarrollador (es) | Faruk Ateş, Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera y colaboradores |
Versión inicial | 1 de julio de 2009 [1] |
Lanzamiento estable | 3.11.3 / 28 de septiembre de 2020 [2] |
Repositorio | |
Escrito en | JavaScript |
Tipo | Biblioteca de JavaScript |
Licencia | MIT ; se doble licencia MIT- BSD del 14 de junio, 2010 [3] 15 de septiembre de 2012 [4] |
Sitio web | modernizr |
Descripción general
Muchas funciones de HTML5 y CSS 3 ya están implementadas en al menos un navegador principal . [6] Modernizr determina si el navegador del usuario ha implementado una función determinada. [7] [8] [9] [10] Esto permite a los desarrolladores aprovechar las nuevas funciones que admiten los navegadores y, sin embargo, crear alternativas para los navegadores que carecen de soporte. Tanto en 2010 como en 2011, Modernizr ganó el premio .net a la aplicación de código abierto del año, y en 2011 uno de sus desarrolladores principales, Paul Irish , ganó el premio al desarrollador del año. [11]
Función
Modernizr utiliza la detección de funciones, en lugar de verificar la propiedad del navegador, para discernir lo que un navegador puede y no puede hacer. Considera que la detección de características es más confiable, ya que es posible que el mismo motor de renderizado no admita necesariamente las mismas cosas en dos navegadores diferentes que usen ese motor. Además, algunos usuarios cambian su cadena de agente de usuario para desplazarse por sitios web que bloquean funciones para navegadores con configuraciones específicas de agente de usuario, a pesar de que sus navegadores tienen las capacidades necesarias.
Modernizr ofrece pruebas para más de 250 funciones, luego crea un objeto JavaScript (llamado "Modernizr") que contiene los resultados de estas pruebas como propiedades booleanas . También agrega clases al elemento HTML en función de las características que son y no son compatibles de forma nativa.
Para realizar pruebas de detección de características, Modernizr a menudo crea un elemento, establece una instrucción de estilo específica en ese elemento e inmediatamente intenta recuperar esa configuración. Los navegadores web que comprenden la instrucción devolverán algo sensato; los navegadores que no lo entienden devolverán nada o "indefinido". Modernizr utiliza el resultado para evaluar si esa función es compatible con el navegador web. [ cita requerida ]
Muchas pruebas en la documentación vienen con una pequeña muestra de código para ilustrar cómo se puede usar una prueba específica en el flujo de trabajo de desarrollo web .
Corriendo
Cuando se ejecuta, crea un objeto global llamado Modernizr que contiene un conjunto de propiedades booleanas para cada característica que puede detectar. Por ejemplo, si un navegador admite la API de lienzo, la propiedad Modernizr.canvas será verdadera. Si el navegador no es compatible con la API de lienzo, la propiedad Modernizr.canvas será falsa:
if ( Modernizr . canvas ) { // ¡Dibujemos algunas formas ...! } else { // No hay soporte de lienzo nativo disponible :( }
Limitaciones
La biblioteca es simplemente un método de detección de características y, como tal, no agrega la funcionalidad que falta a los navegadores más antiguos . [12]
Ejemplos de
Ejemplo de JavaScript de Modernizr
< html class = "no-js" lang = "en" > < head > < title > Modernizr - Ejemplo de JavaScript title > head > < body > < p id = "result" > Modernizr no se ejecutará si JavaScript no está habilitado. p > body > < script src = "ruta / a / modernizr.js" > script > < script > elem = documento . getElementById ( 'resultado' ); if ( Modernizr . websockets ) { elem . innerHTML = 'Su navegador es compatible con WebSockets.' ; } else { elem . innerHTML = 'Su navegador no es compatible con WebSockets.' ; } script > html >
Ejemplo de CSS
< html class = "no-js" lang = "en" > < head > < title > Modernizr - Ejemplo de CSS title > < style > . wsno , . wsyes , . js . no-js { display : none ; } / * Modernizr agregará una de las siguientes clases al elemento HTML en función de si WebSockets es compatible o no con el navegador del usuario. * / . no-websockets . wsno , . websockets . wsyes { pantalla : bloque ; } style > head > < body > < p class = "wsno" > Su navegador no es compatible con WebSockets. p > < p class = "wsyes" > Su navegador es compatible con WebSockets. p > < p class = "no-js" > Modernizr no se ejecutará si JavaScript no está habilitado. p > body > < script src = "ruta / a / modernizr.js" > script > html >
Ver también
Referencias
- ^ Faruk Ateş (1 de julio de 2009). "Orgullosamente anunciando Modernizr" .
- ^ "Estrenos · Modernizr / Modernizr" . Consultado el 28 de septiembre de 2020 . CS1 maint: parámetro desalentado ( enlace )
- ^ "Modernizr 1.5: nuevas funciones, pruebas unitarias añadidas" . Modernizr. 14 de junio de 2010 . Consultado el 30 de julio de 2013 . CS1 maint: parámetro desalentado ( enlace )
- ^ "Elimina la licencia BSD y mejora el archivo Léame" . GitHub . 15 de septiembre de 2012 . Consultado el 30 de julio de 2013 . CS1 maint: parámetro desalentado ( enlace )
- ^ "Qué es Modernizr" . Consultado el 25 de diciembre de 2019 . CS1 maint: parámetro desalentado ( enlace )
- ^ "Hoja de trucos CSS3 para principiantes" .
- ^ Faruk Ateş (22 de junio de 2010). "Aprovechando HTML5 y CSS3 con Modernizr" .
- ^ Gil Fink (10 de enero de 2011). "Detección de funciones HTML5 mediante Modernizr" .
- ^ Daniel Sellergren (febrero de 2011). "Uso de Modernizr para determinar la compatibilidad con HTML5 CSS3" . Archivado desde el original el 22 de agosto de 2013. CS1 maint: parámetro desalentado ( enlace )
- ^ David Powers. "Uso de Modernizr para detectar compatibilidad con navegadores HTML5 y CSS3" .
- ^ Premios .net 2011: # 7. Aplicación de código abierto del año: Modernizr 2.0, # 16. Desarrollador del año: Paul Irish
- ^ "Elementos HTML 5 en IE" . Consultado el 14 de junio de 2012 . CS1 maint: parámetro desalentado ( enlace )
enlaces externos
- Página web oficial