Con el rápido desarrollo de HTML5 y CSS3, se han aplicado más y más etiquetas semánticas y características geniales para el desarrollo de aplicaciones web. Los principales fabricantes de navegadores han comenzado a admitir estas nuevas características, y los desarrolladores web también están interesados en probar estas nuevas características para desarrollar aplicaciones más coloridas e interesantes. Sin embargo, los problemas de compatibilidad de la versión causados por el soporte desigual de estas nuevas características (especialmente el IE que induce el dolor de cabeza) siempre son una pesadilla que persiste en la mente de los desarrolladores. Los hábitos de uso tradicionales nos dificultan abandonar las versiones antiguas de los navegadores, y los desarrolladores solo pueden elegir pruebas manuales aburridas, pruebas y luego probar.
Para resolver este problema, Modernizr surgió. Su nombre suena un poco como Modernize, y de hecho, el nombre se originó a partir del propósito de hacer que la experiencia de desarrollo sea más moderna, pero no es un intento de modernizar el antiguo navegador, es decir, es compatible con estas nuevas características (aunque puede hacer que el navegador admita ciertas nuevas características que no se admiten al agregar scripts de cuadrícula/polyfill, como estará cubierto más adelante).
Modernizr es una biblioteca JS de código abierto que detecta el soporte de los navegadores para las características HTML5 y CSS3. El famoso sitio web de compatibilidad del navegador HTML5/CSS3 FindMebyip se basa en este marco. Podemos usarlo para detectar si el navegador admite algunas características nuevas, e incluso cargar guiones, además, para satisfacer sus necesidades para cargar dinámicamente diferentes archivos JS de acuerdo con diferentes situaciones para reducir las descargas y mejorar el rendimiento.
Modernizr proporciona dos versiones: desarrollo y producción. La versión de desarrollo incluye la detección de todas las nuevas características HTML5 y CSS3, adecuadas para el aprendizaje y las pruebas. Para los principiantes que recién comienzan a usar Modernizr, Bella recomienda que use esta versión. Una vez que esté familiarizado con el principio de funcionamiento de Modernizr, puede usar la versión personalizada de la producción. Puede descargar solo tantas funciones que necesita detectar para reducir en gran medida la cantidad de descargas, lo que puede mejorar ligeramente el rendimiento de su programa hasta cierto punto. Puede descargar estas dos versiones en http://modernizr.com/download/, haga clic en el enlace de la versión de desarrollo en la página para descargar la versión de desarrollo, o ha visto la siguiente página de visualización de funciones
Puede verificar cualquier función HTML5 o CSS3 que desee probar, pero de manera predeterminada, la categoría adicional se seleccionará de la siguiente manera:
A) HTML5 SHIV V3.6: Agrega un script-Html5 Shim Outly Fuerza a IE6-8 a diseñar e imprimir correctamente elementos HTML5. Si planea usar nuevas etiquetas semánticas HTML5, como <WEADER>, <ToToTer>, <Al Nav>, <Section>, <Artículo>, etc., entonces debe seleccionar esta opción.
b) Modernizr.load (yepnope.js): agrega un cargador de script opcional que no está incluido en la versión de desarrollo. Aumenta 3 kb de descargas, por lo que si no lo necesita, puede dejar de elegirlo.
c) Agregar clases CSS: agrega la clase Modernizr a la etiqueta de inicio. Si desea detectar soporte para las funciones de CSS3, debe seleccionar esta opción.
El método de usar Modernizr es muy simple. Después de descargar la versión de desarrollo, solo necesita introducir el archivo de la biblioteca JS en la página, como:
1 | < script type = text/javascript src = > js/modernizr.js script ></ |
Después de agregar la referencia de Modernizr, cuando se ejecuta el programa JS, agregará un lote de nombres de clase CSS al elemento HTML. Estos nombres de clase marcan que las características de soporte y las características no admiten en el navegador actual. Si lo admite, se mostrará el nombre de la función correspondiente. Si no lo admite, se mostrará el nombre sin características. Por ejemplo, si el navegador detectado admite la boxshadow de propiedad CSS3, Modernizr agregará la clase BoxShadow a la etiqueta, de lo contrario, se agregará la clase No-BoxShadow. La siguiente figura muestra el soporte de nuevas características HTML5 y CSS3 en Chrome 23.0.1271.64.
Luego, solo necesita definir la información de estilo correspondiente en su hoja de estilo CSS, puede definirla como a continuación:
1 | .boxshadow #MyContainer { |
2 | border : none ; |
3 | -webkit-box-shadow: #666 1px 1px 1px ; |
4 | -moz-box-shadow: #666 1px 1px 1px ; |
5 | } |
6 | .no-boxshadow #MyContainer { |
7 | border : 2px black solid ; |
8 | } |
Dado que el navegador ignora la función CSS3 no compatible, si la versión actual del navegador no admite la propiedad BoxShadow, ignorará la clase BoxShadow y, en su lugar, se referirá a los estilos definidos en la clase No-BoxShadow, guardando la lógica problemática de detectar el nombre del navegador en el programa JS.
Por supuesto, cuando su escenario de aplicación requiere que determine si una nueva característica es compatible con el programa y proporciona una lógica de procesamiento diferente, también puede usar Modernizr para emitir juicios fácilmente. En este momento, debe usar un objeto global llamado Modernizr creado por Modernizr. El contenido es una lista de resultados booleanos dados para cada característica detectada. Si el navegador admite la propiedad BoxShadow, entonces el valor de Modernizr.boxshadow es verdadero, de lo contrario es falso. Por lo tanto, después de introducir el archivo de la biblioteca, también puede usar este método para detectar el soporte del navegador para esta función. Este objeto JS también contiene información más detallada para ciertas funciones. Por ejemplo, Modernizr.video.h264 le dirá si el navegador admite este códec especial, y Modernizr.inputTypes.Search le dirá si el navegador actual admite el nuevo tipo de entrada de búsqueda.
Además, si Modernizr no contiene las características que necesita detectar, puede llamar a la función AddTest encapsulada de Modernizr para probar. Para diferentes características de HTML5 y CSS3, podemos encontrar muchas de las funciones AddTest ya escritas en GitHub (por alguna razón, Modernizr está bloqueado, y el proyecto ahora está alojado en GitHub). Echemos un vistazo a un ejemplo simple. Si desea probar si el navegador admite GetUsermedia API (API en la nueva tecnología WebRTC), puede escribir la siguiente función AddTest para probar:
1 | Modernizr.addTest( 'getusermedia' , !!Modernizr.prefixed( 'getUserMedia' , navigator)); |
Creo que después de una breve introducción, ya ha experimentado la comodidad que Modernizr puede aportar al desarrollo. Después de comprender las funciones de Modernizr y cómo usar Modernizr, también puede aprender muchos conocimientos nuevos al observar su código fuente y familiarizarse con sus principios de implementación. Aunque Bella es una novata a este respecto, todavía comparte algo de experiencia con usted en leer el código fuente.
Bella mencionó el objeto global Modernizr anteriormente. ¿Cómo se crea en Modernizr? Veamos el siguiente código fuente:
1 | window.Modernizr = ( function ( window, document, undefined) { |
2 | var ...; |
3 | Modernizr = {}; |
4 | ... |
5 | return Modernizr; |
6 | })( this , this .document); |
Esta parte del código utiliza una función asincrónica para generar un espacio de nombres (aunque no hay un espacio de nombres real en JS), y la función devuelve un objeto Modernizr, que se asigna a Window.Mordernizr, para que otros programas JS puedan usar directamente los objetos de Window.Modernizr o Modernizr. El parámetro aprobado cuando se llama la función se refiere al entorno de contexto de la ejecución de la función, es decir, el objeto global de la ventana.
¿Cómo prueba Modernizr el nivel de soporte para nuevas características de CSS3? Resulta que Modernizr creará primero un objeto DOM y luego usará los atributos de estilo bajo este objeto para probar si admite las nuevas funciones CSS3. El código es el siguiente:
1 | var mod = 'modernizr' , |
2 | modElem = document.createElement(mod), |
3 | mStyle = modElem.style; |
Para el navegador, ya sea que pueda reconocer nuestra etiqueta HTML recién creada o no, podemos diseñarlo, para que podamos diseñar la etiqueta recién creada aquí. Supongamos que queremos probar si el navegador admite HSLA para definir colores en CSS, primero podemos escribir un estilo con el atributo HSLA aplicado para colocarlo debajo de la etiqueta, y luego verificar si el valor de estilo contiene cadenas HSLA. Si el navegador no lo admite, no habrá cadenas HSLA (porque la acción de poner el estilo con el atributo HSLA aplicado a la etiqueta Modernizr no entrará en vigencia). Podemos escribir el siguiente código:
1 | tests[ 'hsla' ] = function () { |
2 | setCss('background-color:hsla(120,40%,100%,.5) '); |
3 | return contains(mStyle.backgroundColor, 'rgba' ) || |
4 | contains(mStyle.backgroundColor, 'hsla' ); |
5 | }; |
Aquí, dado que algunos navegadores convertirán la notación de HSLA a RGBA, también verificamos si existe la cadena RGBA.
Para los atributos CSS con el prefijo de proveedores, necesitamos dar diferentes tratamientos. Volviendo a la propiedad de Boxshadow, Modernizr probará si existen Boxshadow, WebKitBoxShadow, MozboxShadow, OBOXShadow, MsboxShadow o KhtmlboxShadow Propiedades debajo de la variable MStyle creada anteriormente. Si es así, significa que el navegador admite esta propiedad. Aquí usamos principalmente dos funciones encapsuladas de Modernizr, una es TestProp () y la otra es TestAllProps (). Modernizr.testProp (STR) devuelve si se puede reconocer una propiedad de estilo determinado, mientras que ModernizR.TestallProps (STR) devuelve si se puede reconocer una propiedad de estilo determinada o si se puede reconocer alguna propiedad de estilo con un prefijo de proveedores.
Para obtener más conocimiento del código fuente, se lo presentaré después de que Bella tiene una investigación más profunda en el futuro. Bella cree que si está familiarizado con los principios y el uso de Modernizr, definitivamente lo ayudará a mejorar la eficiencia del desarrollo.
Finalmente, Bella resume brevemente algunos materiales para que todos aprendan de Modernizr:
1. Sitio web oficial de Modernizr: http://modernizr.com/docs/ puede aprender conocimiento de Modernizr, código fuente y descargar Modernizr de él.
2. URL de suite de prueba Modernizr: http://modernizr.github.com/modernizr/test/index.html Puede consultar el estado de soporte de las características HTML5 y CSS3 de cada navegador anterior. El método de consulta:
Haga clic en Mostrar las pruebas de Ref desde Caniuse y Modernizr en la parte inferior de esta página, y luego haga clic en cualquiera de los enlaces de la tabla para las funciones probadas de HTML5 o CSS3 para ver el soporte de cada navegador.
3. Información relacionada con el script de Shim/PolyFill: https://github.com/modernizr/modernizr/wiki/html5-cross-browser-polyfills
4. Descargue direcciones de varias funciones AddTest que detectan nuevas características HTML5 y CSS3:
https://github.com/modernizr/modernizr/tree/master/feature-detects
Este artículo es del blog Tencent Wuhan. Indique la fuente al reimprimir