Como saben, hay mucho más para crear sitios web receptivos que ancho. Necesita sensores que le den retroalimentación para ajustar los sitios según otros factores.
La mejor manera de mejorar nuestros comentarios desde el sensor de su usuario o navegador es mediante el uso de una biblioteca de JavaScript llamada Modernizr. En este artículo, explicaré por qué, cuando se supera el ancho, Modernizr es una herramienta tan valiosa.
En el desarrollo del front-end, los desarrolladores solían ajustar un sitio para ajustarse a las restricciones del motor de diseño utilizado por un navegador en particular. En 2003, solo había tres navegadores: Netscape, Internet Explorer y Opera. Firefox, Safari y el primer navegador móvil, Opera Mini, fueron lanzados en 2005. Chrome no fue lanzado hasta 2008.
Actualmente hay cinco navegadores principales, cada uno con su propia versión móvil. En ese conjunto de navegadores, también hay versiones anteriores que los usuarios no han actualizado. De la misma manera que la creación de múltiples diseños para múltiples tamaños de pantalla con el tiempo se convierte en un juego de suma cero, también lo hace la construcción de varios frontales para múltiples navegadores.
Estamos usando un diseño web receptivo para acomodar navegadores móviles nuevos y de vanguardia. Pero, si bien se adaptan navegadores nuevos, es importante no hacerlo a expensas de los navegadores más antiguos.
Históricamente, la optimización ha surgido como producto de la creación de un sitio para los navegadores más populares y, a continuación, de ajustes para garantizar que el sitio tenga el mismo aspecto en un conjunto de navegadores populares. Los diseños deberían acomodar las capacidades de todos los navegadores.
La mejora progresiva es una estrategia para hacer frente a la falla de los navegadores para admitir funciones modernas. Existe la tentación de crear las características más actualizadas, pero, en una red receptiva, el diseño de un sitio es contextual al marco en el que se está viendo. El diseño web receptivo se ha vuelto popular porque resuelve el contexto cambiante más obvio: el tamaño del marco, pero el contexto de un navegador es mucho más profundo que su tamaño de ventana gráfica.
SVG es una gran solución para pantallas de alta resolución, pero ¿qué pasa con su compatibilidad en navegadores más antiguos? No es compatible con IE 8 o versiones anteriores, por lo que debe crear una alternativa si admite ese navegador. Podrías identificar el navegador y ofrecer estilos alternativos a ese navegador, pero luego tendrías que publicar esos mismos estilos alternativos para cada navegador que no admita SVG.
¿No sería más fácil si pudieras escribir un estilo que se usaría contra cada navegador que no soportara SVG? De esta forma, no tendría que estar al día con los informes de errores de los usuarios de versiones anteriores. Podrías simplemente establecer el repliegue una vez y olvidarlo.
Tradicionalmente, la detección de características se ha logrado mediante la detección del agente de usuario del navegador. Esto se hace a través de JavaScript, utilizando el objeto navegador. El navegador se remonta a los días de Netscape y solía ser la mejor herramienta para desarrolladores en la compatibilidad entre navegadores.
Si tiene Chrome y ha habilitado DevTools, abra el inspector web de su navegador haciendo clic derecho en una página y seleccionando Inspeccionar elemento. Luego, haga clic en Console y, después de la intercalación, escriba "navigator.userAgent" y presione Enter. Esto devolverá el agente de usuario de su navegador actual, que es una cadena de texto utilizada para identificar el navegador en uso. Chrome devuelve lo siguiente:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35En muchos sentidos, el objeto navegador es uno de los mejores sensores que tenemos disponibles para informar a nuestro sistema sobre lo que nuestro usuario es capaz de hacer; sin embargo, no es muy amigable para el futuro. Basa los actuadores de su sitio en una gran cantidad de suposiciones sobre lo que el navegador hace y no es compatible. Tampoco es confiable porque los usuarios pueden configurarlo para acceder a sitios que el navegador podría no ser compatibles.
Modernizr es una biblioteca de JavaScript utilizada para detectar funciones en el navegador. Se carga en el encabezado de su página y se ejecuta durante una carga de página. Agregarlo a su sitio es tan simple como agregar cualquier otra biblioteca de JavaScript, como jQuery, pero, una vez agregado, Modernizer le brinda una cantidad increíble de control al procesar su página y garantizar que cada usuario reciba una experiencia de calidad.
Una vez cargado, Modernizr ejecuta una serie de comprobaciones en el navegador del usuario para determinar qué características admite el navegador y crea un objeto JavaScript que puede usar para probar. Modernizr no crea soporte para estas características; simplemente le brinda una manera de proporcionar soporte de respaldo para funciones modernas. Por ejemplo, en el caso de SVG, Modernizr nos permite proporcionar una imagen alternativa para los navegadores que carecen de soporte SVG.
Modernizr también aplica un conjunto de clases a la etiqueta HTML, dándole la capacidad de modificar el CSS de la página utilizando las clases de CSS correspondientes. Estas clases de CSS le permiten usar sistemas CSS para crear actuadores que ajustarán sus páginas para permitir las mejoras progresivas disponibles para una página.
A diferencia del uso del agente de usuario, Modernizr detecta características directamente al ejecutar una serie de pruebas de JavaScript que devuelven valores booleanos (verdaderos o falsos). Esto dicta las clases que están configuradas en la etiqueta html y le da la capacidad de usar JavaScript para detectar si una característica está disponible.
Instalar Modernizr es tan simple como vincular la biblioteca de JavaScript en el encabezado de su página, pero cuando el proceso de instalación se complica es crear la versión que necesita. Modernizr está disponible para su descarga en dos versiones, la versión de desarrollo y la versión de producción.
La versión de desarrollo es un archivo completo sin comprimir de 42 KB. Esta versión es excelente si usted está bien versado en JavaScript y quiere hacer algunos ajustes a las pruebas que realiza. Debido a que no está comprimido, es fácil de leer y aumentar, pero es mejor dejarlo a los desarrolladores con un conocimiento sólido de JavaScript.
Para aquellos de ustedes que quizás no sean completamente expertos en JavaScript, o quieran crear rápidamente una versión personalizada de Modernizr, aquí es donde entra en juego la versión de producción de la biblioteca. La herramienta de creación de versión de producción en el sitio le brinda la capacidad de crear una versión con solo las pruebas que necesita.
Esto es útil cuando sabes que solo necesitas un cierto conjunto de pruebas. Por ejemplo, es posible que su sitio no aproveche las sombras de cuadros de CSS, pero puede necesitar admitir degradados de CSS. Usando la herramienta de compilación, puede incluir las pruebas que necesita y excluir las que no necesita, manteniendo el código fuente recortado y el tiempo de carga total de su usuario.
Para nuestro ejemplo, estaré trabajando en la versión de desarrollo. Descubrí que cuando estoy creando un sitio, es mejor trabajar con la versión completa y luego, una vez que sepa qué funciones usará en su sitio, recorte la versión.
Hagamos una detección simple de características con Modernizr. Comenzaremos con un sitio de muestra sin procesar.
Usemos esta pequeña prueba para detectar si nuestro navegador es capaz o no de soportar SVG. En aras de la simplicidad, simplemente agregaremos dos etiquetas span a la página para detectar soporte.
Huzzah! You have SVG support.BOO! You don't have SVG support.Si prueba esto en un navegador que admita SVG, verá el mensaje "¡Hurra! Tienes soporte para SVG. "Mientras que si tienes un navegador que no admite SVG, encontrarás el" BOO! No tiene soporte para SVG. "Mensaje.
Este ejemplo es bastante rudimentario, pero muestra la idea central de usar Modernizr para solucionar problemas de navegador cruzado. Si estuviéramos haciendo la misma corrección usando el antiguo método de agente de usuario, tendríamos que tener una hoja de estilo para cada navegador que no sea compatible con SVG y cambiar nuestro CSS para cada uno. (Para cualquier persona interesada, los únicos buscadores principales que carecen de soporte SVG son Internet Explorer 7 y versiones anteriores).
Al agregar la clase svg / no-svg al html en la página, su CSS ahora tiene un selector que puede usarse para anular las reglas de CSS existentes. Como está en la etiqueta principal, puede usarse para anular otras clases en la página.
Entonces, en este caso, se muestran las dos etiquetas span: none ;. Si no hay soporte SVG, la pantalla: declaración en línea en la etiqueta span con la clase .no anula la visualización: oculta gracias a la regla no-svg en la etiqueta html.
Probemos un ejemplo más útil de la misma idea. Es posible que deseemos tener una imagen de fondo SVG en la página, que recae en un archivo PNG si el navegador no es compatible con SVG. Por defecto usaremos la imagen PNG. De esta forma, el SVG no se sirve a menos que sea necesario y se convierta en una mejora progresiva.
Ahora tenemos un impresionante cráneo SVG que se verá increíble y nítido para los usuarios con pantallas de alta resolución, y aún se verá bien para los usuarios con navegadores más antiguos.
Hay una gran cantidad de información para aprender sobre Modernizr. Le mostramos cómo hace el trabajo de la capacidad de varios navegadores sin tener que recordar o mantener una lista en ejecución de qué navegadores son compatibles con SVG.
Funciona excepcionalmente como un sistema con el que servir a sus actuadores de usuario para crear sitios web rápidos y altamente funcionales.
¿Usas Modernizr en tus proyectos? ¿Qué otros métodos ha usado para servir contenido receptivo? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de líneas divergentes a través de Shutterstock.