Marketing

Cómo Modernizr puede ayudarlo a implementar CSS de reemplazo

Como diseñadores web, a menudo se nos anima a utilizar las mejores y más recientes funciones que CSS tiene para ofrecer. Y hay muchas razones de peso para hacerlo. Técnicas como CSS Grid y Flexbox hacen que trabajar con diseños comunes sea rápido, mientras que las animaciones CSS agregan movimiento e interactividad. Esto es sólo la punta del iceberg.

Sin embargo, implementar estas funciones a veces puede costar la compatibilidad del navegador. Para los sitios que todavía tienen un número significativo de usuarios con navegadores más antiguos o para funciones muy nuevas, existe el riesgo de dejar fuera a algunas personas.

Hablando filosóficamente, algunos diseñadores están de acuerdo con esto, y eso está bien. Pero implementar sustitutos para estas funciones puede ser más fácil de lo que cree. Estas medidas a prueba de fallas ofrecen un facsímil razonable de un diseño o elemento de diseño en particular y son compatibles con los navegadores web heredados.

Hoy, le mostraremos cómo utilizar la biblioteca de detección de recursos de Modernizr para este propósito. ¡Aquí vamos nosotros!

Caja de herramientas del diseñador web

Descargas ilimitadas: más de 1.000.000 de plantillas web, temas, complementos, recursos de diseño y más.

¿Qué es Modernizr?

Modernizr es una de esas herramientas útiles en las que los diseñadores web han confiado durante años. Es una biblioteca que se puede personalizar para “detectar” (de hecho, está realizando pruebas) recursos específicos a medida que se carga una página web. A partir de ahí, agrega clases CSS a <HTML> elemento, lo que permite a los diseñadores orientar su código en función de lo que encuentre la biblioteca.

En nuestro caso, lo usaremos para detectar CSS Flexbox. Sin embargo, también puede buscar recursos relacionados con HTML y JavaScript. Por ejemplo, puede usarlo para determinar si un navegador es compatible con HTML5. De lo contrario, el script HTML5 shiv disponible se puede utilizar para introducirlo en el código, por así decirlo.

Lo que es realmente bueno es que puede personalizar Modernizr para que se adapte a las necesidades de su proyecto. La interfaz de usuario de su sitio web le permitirá elegir y elegir solo los elementos que desea detectar. Después de realizar sus selecciones, haga clic en el botón “Crear” para generar un paquete descargable personalizado.

Nuestra construccion

Para nuestros propósitos (y para mantener las cosas simples), estamos construyendo nuestro paquete Modernizr para detectar Flexbox. También elegiremos minificar el código es agregar clases de CSS además.

El sitio web de Modernizr.

Paso 1: configuración de la demostración

Para demostrar cómo funciona todo, necesitará algunos archivos, ambos disponibles en GitHub:

  • flexgrid.css – Este es nuestro sencillo sistema de cuadrícula CSS Flexbox. Notará que tiene clases para diferentes alineaciones y anchos de columna. Además, hay un conjunto especial de .no-flexbox clases que usan CSS de la vieja escuela también. Esto nos ayudará a crear un estilo de diseño similar en navegadores heredados.
  • modernizr-custom.js – El script mencionado detectará si CSS Flexbox es compatible con el navegador actual.

A continuación, queremos crear un nuevo documento HTML que llame a los dos archivos anteriores en el <head> área. Además, el documento necesitará un ejemplo de un diseño CSS de Flexbox y algo de contenido.

Puede utilizar el archivo de demostración a continuación para experimentar. Contiene un diseño simple de 3 columnas, junto con algunas pequeñas mejoras visuales (más sobre eso pronto).

Paso 2: Vista previa del documento HTML en un navegador moderno

Ahora es el momento de ver cómo se ve nuestra demostración en un navegador. Para empezar, usemos un navegador moderno que admita Flexbox.

Un diseño CSS de 3 columnas.

Al menos nosotros sospechar que es compatible con Flexbox. ¿Como podemos estar seguros? Para eso está Modernizr.

En nuestro caso, querremos ver la fuente de nuestra página de demostración, específicamente la <HTML> elemento. Si hay una clase de flexbox agregado al elemento, sabemos que nuestro navegador admite la función. Continúe y vea el código fuente de la página en su navegador; esperaremos.

LEER  Como Empezar un Canal de YouTube para una Tienda Online 🔴 Directo #hermobenito

Donde esta la clase?

Si intentó ver el código fuente completo de la página, es posible que haya notado que el <HTML> elemento no contiene una clase. No se preocupe, esto es normal.

Eso es porque la clase se agrega en tiempo de ejecución, después Modernizr prueba el recurso seleccionado. Por lo tanto, no aparecerá en el código fuente completo.

Utilice las herramientas de desarrollo de su navegador

En su lugar, abra las herramientas de desarrollo de su navegador (acceda al F12 en el teclado). Esto proporcionará una vista precisa de la <HTML> elemento.

Aquí, estamos usando la última versión de Firefox Developer Edition. Según Modernizr, es compatible con CSS Flexbox. ¡Hurra!

Herramientas de desarrollo de Firefox que muestran compatibilidad con CSS Flexbox.

Paso 3: prueba CSS Fallback en un navegador heredado

Todo se ve muy bien en nuestro navegador moderno. Pero, ¿qué pasa con el software heredado?

Nuestros estilos están definidos para usar CSS flotantes en navegadores que no son compatibles con Flexbox. Este respaldo debería permitirnos crear un diseño con múltiples columnas, incluso en configuraciones antiguas.

Según Puedo usar, Flexbox tiene soporte parcial desde Internet Explorer 10, Firefox 2, Chrome 4 y Safari 3.1. Han pasado muchos años desde que estos navegadores se empezaron a utilizar ampliamente. Sin embargo, IE en particular sigue colgando aquí y allá.

Modernizr se puede configurar para probar el soporte parcial, pero se vuelve confuso. Esto lleva a escribir más fallbacks de CSS que tienen en cuenta varias situaciones diferentes. No es muy eficiente. Por lo tanto, buscamos soporte de todo o nada en nuestras pruebas.

Echemos un vistazo a nuestra demostración en IE 10 (a través de un servicio de prueba de navegador) y veamos qué sucede.

Un diseño CSS de 3 columnas, con la tercera columna enviada a una nueva fila.

No demasiado maltratado. Nuestra tercera columna se empuja a la siguiente fila, que se puede ajustar. Pero, ¿qué pasa con el soporte de Flexbox?

Un vistazo rápido a las herramientas para desarrolladores de IE muestra que nuestro <HTML> elemento muestra una clase de no-flexbox. Esto significa que Flexbox es No soportado aquí, y se está utilizando CSS sustituto.

Las herramientas de desarrollo de Internet Explorer no son compatibles con CSS Flexbox.

Corregir el diseño de flotantes CSS

Nuestros flotadores CSS de reemplazo no cooperarán con las mejoras visuales que hemos realizado. La tercera columna se empuja a una segunda fila, que no se ve muy bien.

Eso es porque flota para agregar relleno y bordes para el ancho de columna que definimos anteriormente en la hoja de estilo. Flexbox, por otro lado, puede ajustarse a estos elementos sin aumentar el ancho total de la columna. De ahí la diferencia de resultados.

Hay algunas cosas diferentes que podemos hacer para corregir la situación. Podemos recortar el ancho de las columnas o incluso disminuir el margen entre las columnas. Intentaremos cortar el ancho de la columna de 30.66% por 28.66%.

Comparación: diseño CSS Flexbox (arriba) y CSS float fallback (abajo).

¡Funcionó! Nuestras columnas ahora se muestran alegre y razonablemente similares a las versiones de Flexbox. Dejando de lado algunas diferencias de espacio, esto se puede usar al menos en un navegador antiguo. Podríamos entrar y hacer más cambios para acercarnos aún más al original.

Detecte las funciones del navegador y ajústelas en consecuencia

Aunque nuestra demostración se centró en detectar CSS Flexbox, Modernizr puede hacer mucho más. Puede buscar otras características comunes como HTML Canvas, soporte SVG, CSS Grid y una gran cantidad de otra información útil.

La idea es que, una vez que sepa de lo que es capaz el navegador de un usuario, pueda ajustar su código para seguir su ejemplo. Esto hace que la adopción de especificaciones CSS más recientes, por ejemplo, sea un proceso mucho menos preocupante.

Es posible que no necesite utilizar sustitutos en todos los casos. Pero es bueno saber que implementarlos es fácil de hacer, con la ayuda de Modernizr.

Author

Moisés Cabrera

Encantado de emprender, el Internet es como pez en el rio para mi y quiero aportar valor a este mundo digital. Si crees que es de interés estos artículos no dudes en comentar.

¿Te gusta nuestro contenido?Recibe noticias y estrategias digitales a tu correo.

No pierda la oportunidad de recibir también descuentos de nuestros servicios.