Los navegadores tradicionales no se reemplazan por completo en este momento, lo que dificulta la incrustación de las últimas funciones CSS3 o HTML5 en su sitio web. Modernizr surgió para resolver este problema. Como una biblioteca JavaScript de código abierto, Modernizr detecta el soporte del navegador para las características CSS3 o HTML5. Modernizr no está tratando de agregar características que no son compatibles con navegadores más antiguos, pero le permite modificar el diseño de la página mediante la creación de configuraciones de estilo opcionales. También puede simular características que no son compatibles con los navegadores más antiguos cargando scripts personalizados.
Modernizr es simple de usar, pero no omnipotente. El uso exitoso de Modernizr depende en gran medida de sus habilidades CSS y JavaScript. Esta guía le permite aprender cómo establecer estilos opcionales para navegadores que no admitan múltiples columnas o proyecciones. Además, puede aprender cómo hacer que los navegadores más antiguos validen formularios que usen las últimas propiedades requeridas HTML5 y cómo cargar selectivamente archivos de script en función de la funcionalidad del navegador.
Modernizr es una biblioteca JavaScript utilizada para detectar el soporte de funcionalidad del navegador. Actualmente, al verificar el procesamiento del navegador de una serie de pruebas, Modernizr puede detectar 18 funciones CSS3 y más de 40 funciones sobre HTML5. Es más confiable que las formas tradicionales de detectar nombres de navegador (olfateo del navegador). El tiempo de ejecución de un conjunto completo de pruebas toma solo unas pocas microsegundos. Además, el sitio web de Modernizr utiliza scripts personalizados para detectar solo elementos de interés, logrando así la optimización de eficiencia.
Al usar Modernizr para detectar el soporte CSS3, no necesita tener ningún conocimiento de JavaScript. Solo necesita insertar un archivo en la página web, y luego agregará un conjunto de clases a la etiqueta <html> de la página de acuerdo con la funcionalidad del navegador. Los nombres de las clases correspondientes han cumplido con los requisitos de estandarización y son fáciles de entender. Por ejemplo, si el navegador admite la propiedad de la bandeja de caja, debe agregar la clase de boxshadow correspondiente; De lo contrario, agregue una clase sin boxshadow. Todo lo que tiene que hacer es crear una tabla de estilo que use estas clases para proporcionar el estilo apropiado para el navegador correspondiente.
Modernizr facilita la implementación de soluciones de JavaScript, conocidas como polyfills: simula características y tecnologías relacionadas con HTML5 como la geolocalización. Sin embargo, debe tener una comprensión básica de JavaScript para usar estas características y tecnologías. El término polyfill proviene de una marca británica de arcilla que llena las grietas (es decir, el material de llenado conocido por los estadounidenses). Aquí, el polyfill se usa para completar las funciones del navegador. A veces Modernizr realiza esta tarea sin problemas. Pero esencialmente, este es solo un trabajo de parche, por lo que no puede confiar en él para producir exactamente el mismo resultado logrado por un navegador vulnerable.
Al igual que otras bibliotecas de JavaScript, Modernizr proporciona versiones de desarrollo y producción. La única diferencia en comparación con la mayoría de las bibliotecas es que los espacios y los comentarios se han eliminado de la versión de producción, lo que reduce el tamaño de las descargas. Modernizr adopta un enfoque diferente. La versión de desarrollo se puede llamar fregadero en una cocina en cierto sentido, contiene casi todo. La versión de producción solo contiene los elementos que elija, lo que puede reducir significativamente las descargas. En muchos casos, la versión de producción se puede reducir a una vigésima del tamaño de la versión de desarrollo.
Al probar con Modernizr, le recomiendo que descargue la versión de desarrollo. Una vez que haya dominado cómo funciona y sus capacidades, puede descargar una versión de producción personalizada para la implementación en su sitio web.
El archivo de muestra para este tutorial contiene la versión Development 2.0.6 de Modernizr, pero le sugiero que lo reemplace con la última versión actualizada del sitio Modernizr.
Nota: Si hace clic en el enlace de descarga en el menú de navegación principal por error, verá una gran cantidad de casillas de verificación, pidiéndole que seleccione la herramienta que desea. Esto está configurado para la versión personalizada de la producción. Haga clic en el enlace a la versión de desarrollo en la parte superior del panel, o haga clic en el botón Atrás en su navegador para volver a la página de inicio y seleccione el botón de desarrollo que se muestra en la Figura 1.
Como se mencionó anteriormente, Modernizr no intenta agregar nuevas características a los navegadores más antiguos, pero le permite compensar las características que faltan en su estilo. Para mostrar cómo funciona esto, el archivo de ejemplo contiene una página llamada css_support_begin.html. Si carga esta página en un nuevo navegador, debería parecerse a la Figura 2.
Figura 2. Firefox 5 muestra la página en formato multicolumno y agrega sombras a la imagen El estilo de esta página es usar column-count y box-shadow de CSS3 para mostrar texto en formato múltiple y agregar sombras a la imagen. Las versiones más antiguas de los navegadores no admiten ninguna de estas propiedades, por lo que la misma página en Internet Explorer (es decir) 7 se parece a la Figura 3.
En IE9, la misma página muestra la sombra de la imagen, pero el texto es el mismo que el diseño que se muestra en la Figura 3.
Lo que toma al tratar de compensar las características faltantes depende de los requisitos de su esquema de diseño. Implicará mucho trabajo tratar de hacer que la página se vea exactamente igual en todos los navegadores, pero puede hacer algunas mejoras simples, como rodear el texto alrededor de la imagen, ajustar los márgenes izquierdos de la imagen al texto y agregar límites vagos en los bordes inferiores y derecho de la imagen para que se sienta como una más tridimensional.
Modernizr usa JavaScript para detectar la funcionalidad admitida por el navegador, pero en lugar de usar JavaScript para cargar dinámicamente diferentes hojas de estilo, utiliza técnicas muy simples para agregar clases a la etiqueta <HTML> de la página. Luego, como diseñador, depende de usted decidir usar la carcasa CSS para proporcionar el estilo apropiado para los elementos objetivo. Por ejemplo, si la página admite la propiedad box-shadow , Modernizr agregará boxshadow . Si no es compatible, se agrega con la clase no-boxshadow como sustituto.
Dado que los navegadores ignoran las propiedades de CSS que no pueden reconocer, puede usar box-shadow con confianza de acuerdo con sus reglas de estilo básico, sin embargo, debe agregar un selector descendiente separado para navegadores más antiguos en el siguiente formato:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ } Solo los navegadores que no admiten box-shadow tendrán clase no-boxshadow , por lo que otros navegadores no aplicarán esta regla de estilo.
Agregamos Modernizr a la página de muestra y verifique las clases que agrega a la etiqueta <html>.
<!DOCTYPE HTML> <html> <!DOCTYPE HTML> <html class=no-js>Modernizr se basa en JavaScript habilitado en el navegador. Cuando está habilitado, esta clase se elimina dinámicamente. Sin embargo, en casos raros, JavaScript todavía está presente en HTML Makup cuando no está habilitado, lo que le permite crear reglas de estilo especiales para dichos visitantes si es necesario.
</style> <script src=js/modernizr.js></script> </head> Nota: Si usa el panel Insertar o el menú Insertar, DreamWeaver agregará type=text/javascript a la etiqueta inicial <script>. Esto ya no se requiere en HTML5, pero mantenerlo no causará ningún daño.
Nota: Si su versión de DreamWeaver no tiene código en vivo (o está utilizando un editor HTML diferente), puede verificar el código generado utilizando herramientas de desarrollo proporcionadas por la mayoría de los navegadores nuevos o Firebug proporcionados por los navegadores Firefox.
Como se muestra en la Figura 4, la clase no-js ha sido reemplazada por js , que indica que JavaScript ha sido habilitado.
La Tabla 1 enumera los nombres de clase utilizados por Modernizr para indicar soporte para CSS3. Si una función no lo admite, el nombre de la clase correspondiente tiene prefijo no- .
Tabla 1. Funciones CSS3 detectadas por Modernizr
Características de CSS | Clase Modernizr (propiedades) |
@font-face | fontface |
::before y ::after los pseudoementos | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
Animaciones de CSS | cssanimations |
Transformaciones 2D CSS | csstransforms |
Transformaciones 3D CSS | csstransforms3d |
Transiciones CSS | csstransitions |
Diseño de caja flexible | flexbox |
Gradiente | cssgradients |
hsla() | hsla |
Diseño de múltiples columnas | csscolumns |
múltiples fondos | multiplebgs |
opacity | opacity |
reflexión | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
No importa dónde se pruebe un atributo CSS específico, el nombre de la clase y el nombre de la propiedad son los mismos, sin embargo, esto requiere la eliminación de cualquier guión o paréntesis. Otras clases llevan el nombre del módulo CSS3 al que se refieren.
Consulte la Tabla 1, puede ver que Modernizr usa boxshadow y csscolumns para mostrar soporte para las propiedades box-shadow y el diseño de la columna múltiple, respectivamente. Por lo tanto, puede usar las clases no-boxshadow y no-csscolumns para crear reglas de estilo especiales para los navegadores que no admiten estas características.
Para garantizar que la directiva sea simple, demostraré un ejemplo de declaraciones de CSS solamente. Puede escribirlos directamente en la vista de código o usar el nuevo cuadro de diálogo Regla CSS.
.no-boxshadow img . #8A8A8A ). Las reglas de estilo resultantes deberían verse así:.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }Esto no es tan atractivo como las sombras translúcidas, pero a pesar de esto, todavía permite que la imagen sobresalga ligeramente desde el fondo.
.no-csscolumns img . .no-csscolumns img { margin: 3px 8px 3px 0; float: left; } .columns img . Las dos reglas tienen la misma particularidad, por lo que si se invierten, el margen izquierdo de 10 píxeles de .columns img puede sobrescribir la nueva regla que acaba de crear. Puede cambiar el nombre de .no-csscolumns img a .no-csscolumns .columns img para darle una mayor especificidad, pero es mejor asegurarse de que cuanto más simple sea el selector, mejor. (Por cierto, si no está seguro de cuál es la particularidad , consulte el artículo de Adrian Senior, comprensión de la especificidad. Se ha publicado durante mucho tiempo, pero es valioso). En este simple ejemplo, creé estilos especiales para versiones anteriores de navegadores usando solo la clase prefijada con no- . Sin embargo, por su capacidad, no tiene ningún sentido usar ambas clases (con o sin prefijos) para crear diferentes estilos para su navegador. Por ejemplo:
.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }A veces, este enfoque es razonable, por ejemplo, si desea crear un diseño completamente diferente para cada nivel de soporte. Pero si se trata solo de proporcionar estilos seleccionables para navegadores más antiguos, no olvide que el navegador ignora las propiedades que no reconocen. Si usa la clase Modernizr para todos los estilos, su página no estará completamente establecida en un navegador con discapacidad de JavaScript.
Modernizr agrega el nombre de clase para la etiqueta inicial <html> para jugar un doble propósito. Cuando las páginas se están cargando, también son los nombres de las propiedades de JavaScript creadas por el objeto Modernizr. La Tabla 1 enumera los nombres de clases y atributos relacionados con CSS. La Tabla 2 enumera las clases y atributos restantes relacionados con HTML5 y tecnologías relacionadas, como las ubicaciones geográficas.
Tabla 2. Características relacionadas con HTML5 detectadas por Modernizr
Características relacionadas con HTML5 | Clase Modernizr (propiedades) |
Caché de la aplicación | applicationcache |
Audio | audio. type (ogg, mp3, wav, m4a) |
Lienzo | canvas |
Texto de lona | canvastext |
Arrastrar y soltar | draganddrop |
Formulario de atributos de entrada | input. attributeName |
Elementos de entrada de formulario | inputtypes. elementName |
Geolocalización | geolocation |
evento hashchange | hashchange |
Gestión de la historia | history |
Indexeddb | indexeddb |
SVG en línea | inlinesvg |
Almacenamiento local | localstorage |
Mensajería | postmessage |
Almacenamiento de sesión | sessionstorage |
Smil | smil |
SVG | svg |
Rutas de clip svg | svgclippaths |
Touch eventos | touch |
Video | video. type (ogg, webm, h264) |
Webgl | webgl |
Enchufes web | websockets |
Base de datos SQL web | websqldatabase |
Trabajadores web | webworkers |
En la mayoría de los casos, todos los atributos enumerados en la Tabla 1 y la Tabla 2 devuelven true o false . Por lo tanto, puede probar el almacenamiento local usando JavaScript como se muestra a continuación:
if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported } Sin embargo, en términos de audio y video , el valor de retorno es una cadena que indica que el navegador puede manejar un cierto tipo de nivel de confianza. Según la especificación HTML5, una cadena vacía significa que el tipo no es compatible. Si este tipo es compatible, el valor de retorno es quizás o probablemente. Por ejemplo:
if (Modernizr.video.h264 == ) { // h264 is not supported } HTML5 agrega muchas propiedades de formulario nuevas, como autofocus , que coloca automáticamente el cursor en un campo especificado cuando la página se carga por primera vez. Se required otra propiedad útil, que evitará que los navegadores compatibles con HTML5 envíen formularios si se deja en blanco un campo requerido (ver Figura 6).
Esto es genial, pero te dejará con una pregunta: ¿qué debes hacer con versiones más antiguas de tu navegador?
Una solución es ignorarlos y dejarlos a la función de verificación del lado del servidor para las verificaciones finales. Si el navegador no reconoce el atributo required , otra forma fácil de usar de manejar esta situación es crear un pequeño script para verificar los campos requeridos. Las siguientes instrucciones muestran cómo realizar las operaciones correspondientes con la ayuda de Modernizr.
</style> <script src=js/modernizr.js></script> </head> <script> separado y cree un controlador de eventos tan pronto como se cargue la página para facilitar la ejecución del código:<script src=js/modernizr.js></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head autofocus y las propiedades required . La forma de lidiar con autofocus es simple:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it } Esta condición prueba Modernizr.input.autofocus , si autofocus no es compatible, el valor devuelto es false . Sin embargo, el operador lógico no (una marca de exclamación) puede revertir el significado, por lo que si autofocus no es compatible, el resultado de la evaluación de esta condición es true , y inputs[0].focus() coloca el cursor en el primer campo de entrada.
required no es compatible, ahora agregue código para facilitar la verificación de los campos requeridos. El código completo del controlador de eventos es el siguiente:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } } El nuevo código produce una función que al enviar el formulario puede iterar a través de todos los elementos de entrada para encontrar campos con los atributos required . Cuando encuentra un campo, elimina el comienzo y finaliza los espacios en blanco del valor, y si el resultado es una cadena vacía, agrega el resultado a required . Después de que se hayan verificado todos los campos, si se incluyen algunos elementos en la matriz, el navegador muestra una advertencia relacionada con el nombre del campo que falta y evita que se envíe el formulario.
Nota: Safari 5.1 informó incorrectamente que admite required , por lo que presenta el formulario sin validar los campos requeridos. Este es un defecto de Safari, pero en Modernizr no existe.
Cuando está listo para implementar su sitio web, se recomienda crear una versión de producto personalizada de Modernizr que contenga solo aquellos elementos que realmente necesita. Esto puede reducir el tamaño de la biblioteca Modernizr de 44KB a 2KB de acuerdo con la funcionalidad que seleccionó. El rango de las opciones actuales se muestra en la Figura 8.
Figura 8. La página de descarga de Modernizr le permite seleccionar solo las características que necesitaLas opciones se pueden agrupar fácilmente en las siguientes categorías: CSS3, HTML5, MISC (eleláneo) y extra. Haga clic en el botón de alternar junto a los primeros tres títulos para seleccionar o descartar todas las casillas de verificación en la categoría de selección.
Por defecto, la categoría adicional seleccionará las siguientes tres entradas:
Si selecciona cualquier opción en la categoría CSS3, también se seleccionarán las opciones en la siguiente categoría adicional:
Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes()No anule la selección de estas opciones. Hacerlo cancelará automáticamente cualquier opción que haya seleccionado en la categoría CSS3.
MQ PolyFill (Responder.js) en la categoría adicional ha agregado un script que permite consultas de medios en IE 6-8 obtener soporte limitado. Cuando selecciona esta opción, selecciona automáticamente consultas de medios y Modernizr.testyles (). Para obtener más información sobre las consultas de los medios PolyFill (Respuesta.js), visite https://github.com/scottjehl/der.
Solo los usuarios avanzados estarán interesados en otras opciones en la categoría adicional. Para obtener más detalles sobre lo que son y cómo usarlos, consulte la sección de extensibilidad de la documentación de Modernizr.
La siguiente descripción describe cómo crear una versión de producto personalizada de Modernizr para el archivo de muestra. Esta versión personalizada es necesaria para ejercicios posteriores, que mostrarán cómo cargar archivos JavaScript externos usando Modernizr.load() .
Al crear una versión de producción personalizada de Modernizr, la opción que contiene Modernizr.load() debe seleccionarse de forma predeterminada. Modernizr.load() es un alias para yepnope() , que es un cargador de guiones independiente desarrollado sincrónicamente con Modernizr. Para ilustrar cómo usarlo, doy un ejemplo simple. He movido el script correspondiente de requirir.html a check_required.js e hice tres cambios menores para facilitar la eliminación de las pruebas Modernizr y asignarla a una variable llamada init . El guión revisado se ve así:
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; }; Una gran ventaja de Modernizr.load() es que puede cargar scripts condicionalmente en función de los resultados de las capacidades de prueba del navegador, por eso se llamaba yepnope() al principio. Puede cargar scripts externos de manera asincrónica, en otras palabras, puede cargar scripts externos después de que el navegador haya cargado el modelo de objetos de documentos (DOM), por lo que puede ayudar a mejorar el rendimiento de su sitio web.
La sintaxis básica de Modernizr.load() es pasar un objeto con los siguientes atributos:
test : la propiedad Modernizr que desea detectar. yep : Si la prueba es exitosa, la ubicación del script que desea cargar. Use una matriz de múltiples script. nope : si la prueba falla, la ubicación del script que desea cargar. Use una matriz de múltiples script. complete : una función que se ejecuta tan pronto como se carga un script externo (opcional). Tanto yep como nope son opcionales, siempre que proporcione uno de ellos.
Para cargar y ejecutar scripts en check_required.js, debe agregar el siguiente bloque <script> después de que se haya adjunto a la página (el código se encuentra en requirir_load.html):
<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script> Esto es exactamente lo mismo que antes, pero puede reducir la carga de descarga de navegadores que ya admiten required .
Para probar múltiples condiciones, puede pasar un conjunto de objetos a Modernizr.load() . Para obtener más detalles, consulte el tutorial Modernizr.load () sobre la documentación de Modernizr.
Modernizr es una herramienta poderosa y útil, pero eso no significa que deba usarla. No se requieren todos los casos para usar Modernizr para proporcionar múltiples estilos al navegador. Si su enfoque principal es Internet Explorer, considere usar comentarios condicionales de IE. También puede usar la pila CSS para sobrescribir algunos estilos. Por ejemplo, use el color hexadecimal primero y luego anularlo con rgba() o hsla() . Las versiones anteriores de los navegadores usarán el primer valor e ignorarán el segundo valor.
Modernizr realmente se convierte en realidad cuando se combina con polyfills y otros JavaScript. Pero recuerde, generalmente es fácil crear sus propias pruebas que sean adecuadas para características de soporte. Por ejemplo, el siguiente es todo el código que prueba si un navegador admite required (el código se encuentra en requirir_nomodernizr.html):
var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }Este tutorial ha cubierto todas las características principales de Modernizr. Para obtener más información sobre estas características, consulte la documentación oficial correspondiente, que se encuentra en http://www.modernizr.com/docs/. Además, puede encontrar los siguientes recursos útiles:
yepnope() , que se ha fusionado en Modernizr.load() en Modernizr. + +