HTML5, CSS3 y tecnologías relacionadas como el lienzo y los sockets web han traído características muy útiles que pueden ayudar a nuestros programas web a mejorar un nuevo nivel. Estas nuevas tecnologías nos permiten construir diversas páginas de formularios que pueden ejecutarse en tabletas y dispositivos móviles utilizando solo HTML, CSS y JavaScript. Aunque HTML5 proporciona muchas características nuevas, no es realista usar estas nuevas tecnologías si no consideramos la versión anterior del navegador. La antigua versión del navegador se ha utilizado durante muchos años, y aún debemos considerar los problemas de compatibilidad de estas versiones. El problema a resolver en este artículo es: cuando usamos la tecnología HTML5/CSS3, cómo lidiar mejor con el problema de los navegadores antiguos que no admiten las funciones HTML5/CSS3.
Aunque podemos escribir el código nosotros mismos para determinar si el navegador admite ciertas funciones HTML5/CSS3, el código no es muy simple. Por ejemplo: escribir código para determinar que el pago del navegador admite lienzos, nuestro código puede ser similar al siguiente:
<script> window.onload = function () {if (canvassupported ()) {alert ('Canvas admited'); }}; function canvassupported () {var canvas = document.createElement ('Canvas'); return (Canvas.getContext && Canvas.getContext ('2d')); } </script>Si desea determinar si el almacenamiento local es compatible, el código puede ser similar al siguiente, pero es fácil causar insectos bajo Firefox.
<script> window.onload = function () {if (localStoraGeUpported ()) {alert ('almacenamiento local admitido'); }}; function localstoraGeApported () {try {return ('localStorage' en Window && Window ['LocalStorage']! = NULL); } catch (e) {} return false; } </script>Los dos primeros ejemplos son verificar una función. Si hay muchas funciones HTML5/CSS3, tenemos que escribir múltiples copias de código para juzgar, pero afortunadamente, estos códigos no dependen del orden. Modernizr le permite implementar las funciones complejas anteriores con muy poco código. Echemos un vistazo a algunas características importantes de Modernizr:
Empiece con ModernizrLa primera vez que escuché Modernizr, pensé que significaba modernizado y podría agregar algunas nuevas características HTML5/CSS3 a los navegadores más antiguos. De hecho, Modernizr no está haciendo esto, nos ayuda a mejorar nuestras prácticas de desarrollo, utilizando un método muy funky para ayudar a detectar si el navegador admite alguna característica nueva e incluso cargue scripts de script adicionales. Si eres un desarrollador web, es un arma muy impresionante para ti.
Sitio oficial de Modernizr: http://modernizr.com, puede usar ambos tipos de scripts (versión de desarrollo y versión de producción personalizada). El sitio web proporciona una herramienta de demanda personalizada para generar solo las funciones de detección que necesita, en lugar de una versión grande y completa que puede detectar todo, lo que significa que puede minimizar sus scripts. La siguiente figura es la interfaz de la herramienta oficial de generación de sitios web. Puede ver que se pueden seleccionar muchas tecnologías HTML5/CSS3 y relacionadas.
Después de descargar su script personalizado, puede hacer referencia a él como un archivo JS normal, y luego puede usarlo.
<script src = scripts/modernizr.js type = text/javascript> </script>Elementos modernizr y html
Después de agregar la referencia de Modernizr, entra en vigencia de inmediato. Al ejecutar, 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. Las características compatibles mostrarán directamente el nombre de la función del día como clase (por ejemplo: lienzo, websockets). La clase que se muestra por las características no compatibles es el nombre sin propiedad (por ejemplo: No-Flexbox). El siguiente código es el efecto de ejecutar en Chrome:
<html class = JS FlexBox Canvas Canvastext WebGL No-Touch Geolocation PostMessage WebSqlDatabase indexeddb History History DragandDrop WebSockets RGBA HSLA múltiples Bonsterssize BorderImage BorderRadius Boxshadow TextShadow Opacidad CSSANIMACIONES CSSCOLUMNS csstransforms3d csstransitions fontface generado en audio audio localstorage sessionStorage WebWorkers ApplicationCache SVG INLINSVG SMIL SVGCLIPPATHS>
El siguiente código es el efecto de ejecutar en IE9:
<html class = JS No-Flexbox Canvas Canvas Canvas Canvastext No-webgl no touch geolocation postmessage no-websqlDatabase no indexeddb no history draganddrop No-websockets rgba hsla múltiplebgs en segundo plano no border borderradius bordius no-thadow no-websockets no-websanmsanmsanimsanimats de múltiples en segundo plano no-bordenio No-CSSCOLUMNS NO-CSSGRADIENTES SIN-CSSEFLECCIONES CSSTRANSFORMS NO-CSSTRANSFORMS3D NO-CSSTRANSITIONS FONTFACTE GENERADO CONTENTO AUDIO AUDIO LOCALSSTAJE SESIÓN SEGURACIÓN DE ALGACIÓN DE AUTORES NO APLICADOR
Usando Modernizr, puede ocurrir el siguiente código (agregue el nombre de No-JS a la clase):
<html class = no-js>
Puede visitar el sitio (http://html5boilerplate.com) para ver el contenido relacionado con la calderera HTML5, o (http://initializr.com) para ver el contenido relacionado con inicializr, agregar clase NO-JS al elemento HTML, que le dice al navegador si es compatible con JavaScript. Si no es compatible, se mostrará NO-JS. Si es compatible, se eliminará el NO-JS. Muy genial, ¿verdad?
Usar con funciones HTML5/CSS3Puede usar directamente el nombre de clase generado por Modernizr en el elemento <html> para definir los atributos correspondientes en su archivo CSS para admitir el navegador actual. Por ejemplo, el siguiente código puede mostrar Shadow en un navegador que admite Shadow Shadow y muestra bordes estándar en navegadores que no admiten:
.BoxShadow #myContainer {border: none; -webkit-box-shadow: #666 1px 1px 1px; -Moz-box-shadow: #666 1px 1px 1px;} .no-boxshadow #mycontainer {border: 2px sólido negro;}Porque si el navegador admite sombras de caja, Modernizr agregará la clase BoxShadow al elemento <html>, y puede administrarlo a la ID DIV correspondiente. Si no es compatible, Modernizr agregará la clase No-BoxShadow al elemento <html>, que muestra un borde estándar. De esta manera, podemos usar fácilmente las nuevas funciones CSS3 en los navegadores que admiten las funciones de CSS3, y continuar utilizando el método anterior en los navegadores que no las admiten.
Además de agregar la clase correspondiente al elemento <html>, Modernizr también proporciona un objeto JavaScript Modernizr global, que proporciona diferentes propiedades para indicar si se admite una nueva característica en el navegador actual. Por ejemplo, el siguiente código se puede usar para determinar si el navegador admite el lienzo y el almacenamiento local. Es muy beneficioso que múltiples desarrolladores se desarrollen y prueben bajo navegadores de versiones múltiples, y todos pueden unificar el código.
$ (documento) .Ready (function () {if (modernizr.canvas) {// agregar código de lienzo} if (modernizr.localStorage) {// Agregar código de almacenamiento local}});El objeto Modernizr global también se puede usar para detectar si la función CSS3 es compatible. El siguiente código se utiliza para probar si se admiten transformaciones de radios fronterizos y CSS:
$ (documento) .Ready (function () {if (modernizr.borderradius) {$ ('#myDiv'). addClass ('borderRadiusstyle');} if (modernizr.csstransforms) {$ ('#myDiv'). addClass ('transformsStyle');});Algunas otras características de CSS3 pueden detectar resultados, como opacidad, RGBA, sombra de texto, animaciones CSS, transiciones CSS, múltiples fondos, etc. La lista detectable HTML5/CSS3 completa se puede encontrar en http://www.modernizr.com/docs a continuación.
Cargando guiones de guiones con ModernizrEn algunos navegadores que no admiten nuevas características, Modernizr no solo proporciona el método anterior para indicarle, sino que también proporciona la función de carga para permitirle cargar algunos scripts de Shim/PolyFill para lograr soporte (para obtener información sobre Shim/PolyFill, visite: https://github.com/modernizr/modernizr/wiki/html5-cross-brows-brows-polyfills). Modernizr proporciona un cargador de script para determinar una función, y si no es compatible, se cargará el script correspondiente. También se puede encontrar un script separado en http://yepnopejs.com.
Puede usar la función Load () de Modernizr para cargar dinámicamente el script. El atributo de prueba de la función indica si es compatible. Si la prueba es compatible con éxito, se carga el script establecido por el atributo YEP. Si no es compatible, se cargará el script establecido por el atributo NOPO. Independientemente de si es compatible o no, se cargará el script establecido por ambos atributos. El código de ejemplo es el siguiente:
Modernizr.load ({test: modernizr.canvas, yep: 'html5canvasavailable.js', no: 'excanvas.js', ambos: 'mycustomscript.js'});En este ejemplo, Modernizr determinará si el navegador actual admite la función de lienzo. Si es compatible, cargará los dos scripts html5canvasavailable.js y mycustomscript.js. Si no es compatible, cargará el archivo de script excanvas.js (utilizado para versiones antes de IE9) para que el navegador admita la función de lienzo y luego cargue el script mycustomscript.js.
Debido a que Modernizr puede cargar scripts, también puede usar otros usos, por ejemplo, si el script de terceros que hace referencia (como Google y Microsoft que proporcionan servicios de CDN proporcionan jQuery Hosting) no puede cargar, puede cargar archivos alternativos. El siguiente código es un ejemplo de carga jQuery proporcionada por Modernizr:
Modernizr.load ([{Load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js', completo: function () {if (! Window.jquery) {Modernizr.load ('js/libs/jQuery-1.6.4.min.js');}}}},}, para cargar y // ejecutar si es necesario.Este código primero cargará el archivo jQuery de Google CDN. Si la descarga o la carga falla, se ejecutará la función completa. Primero, determine si existe el objeto Jqeury. Si no existe, Modernizr cargará el archivo JS nativo definido. Si incluso los archivos completos no se cargan con éxito, se cargará el archivo Needs-Jquery.js.
Resumir:Modernizr es definitivamente una herramienta necesaria si está utilizando el último HTML5/CSS3 para construir su programa. Utilizándolo, puede guardar mucho código y trabajo de prueba, e incluso puede implementar las nuevas características correspondientes cargando scripts para algunos navegadores que no admiten nuevas funciones.
Dirección original: http://weblogs.asp.net/dwahlin/archive/2011/11/16/detecting-html5-css3-fature-using-modernizr.aspx