Cómo añadir fallbacks a las nuevas propiedades de CSS
Imagina que quieres usar algunas de las propiedades más nuevas de CSS porque te hacen la vida increíblemente más fácil (por ejemplo CSS Grid), pero el sitio en el que estás trabajando debe ser compatible con navegadores que aún no tienen el soporte. ¿Dejo de usar esas propiedades hasta que tengan el soporte completo? ¿Hay alguna manera de usarlas sin romper mi sitio en los navegadores un poco más antiguos?
¡Claro que hay manera! Y en este artículo te cuento cómo :)
¿Qué son los fallbacks?
Un fallback es un valor predeterminado que puede establecerse en tus estilos por si no existe soporte para el valor o propiedad que realmente quieres usar. Existen básicamente dos tipos de fallbaks:
- Colocando propiedades por defecto (aparte de las nuevas)
- Colocando feature queries (o mejor conocido como @supports )
Te explicaré cómo funciona cada uno de ellos siguiendo un ejemplo de un caso real.
Mi layout responsivo
Este un layout muy parecido al que me tocó hacer para una sección de Beek. El layout tiene que verse más o menos de la siguiente manera:
Todos los miembros del equipo donde trabajo debemos maquetar siempre pensando en Mobile First, es decir, colocar primero los estilos de mobile para luego adaptar poco a poco el diseño a desktop.
Entonces el primer paso es añadir los estilos necesarios para mobile. Si te das cuenta, en este caso podríamos seguir con el flow normal de las cajas y solamente añadir un margen entre ellas, pero quiero aprovechar las propiedades de CSS Grid que me ahorran poner márgenes añadiendo espacios entre cajas con el grid-gap y que me ayudarán a colocar las cajas donde deben ir en tamaño desktop con las template-areas.
El markup para este layout quedaría de la siguiente manera:
y los estilos para mobile así:
Aquí estoy creando un template-area y le estoy indicando a cada caja cuál debe ser el área en la que debe meterse.
Después, procedemos a añadirle los estilos para desktop. En este momento, solamente tengo que definir el tamaño de las columnas y las filas, además de actualizar el template-area para que se ajuste al diseño que queremos en desktop (con el aside del lado izquierdo).
Veamos cómo queda el demo completo:
¡Muy bien! con unas pocas líneas de código ya maquetamos un layout responsivo.
Antes de añadir los fallbacks…
Vamos a hacer testing de nuestro pequeño layout en un navegador que no soporte CSS Grid, por ejemplo Chrome 53.
Como puedes observar, está ignorando totalmente los estilos relacionados con CSS Grid.
En este punto, vas a tener que evaluar varias cosas: ¿cómo debería visualizarse nuestro sitio en este navegador? ¿es indispensable que se vea exactamente igual o puedo dejarlo lo más parecido posible?
Para estas preguntas no existe una respuesta correcta como tal, todo depende del equipo y los objetivos que tenga el layout que quieras maquetar, sin embargo tienes que priorizar que tu sitio sea 100% usable. Por ejemplo, no puedes dejar que un botón importante se quede perdido porque se rompió todo. Pero sí podrías quitar algunos elementos decorativos con tal de que no se pierda la usabilidad ;). Recuerda que puedes hacer tus productos siguiendo el progressive enhacement. (Si te interesa más de este tema, puedes leer esto)
Volviendo a nuestro ejemplo, vamos a añadir un fallback para que se vea lo más parecido posible al diseño que se nos pidió al principio.
Primer tipo de fallback: Propiedades por defecto
La primer manera de añadir un fallback es colocando propiedades que sí pueda interpretar el navegador antes de las propiedades nuevas. De esta manera, las propiedades que coloques primero son las que se quedarán por defecto y el navegador ignorará las que no pueda interpretar.
Navegando por CanIUse, me di cuenta de que Chrome 53 sí tiene soporte para Flexbox :D entonces, procederemos a añadir nuestros fallbacks con las propiedades de Flexbox, que de hecho me parece lo más adecuado porque las cajas cambian de lugar en el diseño. Así que vamos a ello:
Imagina que ahora estás maquetando desde cero. Como no existe grid-gap en este momento, vamos a tener que usar ahora sí los márgenes en mobile.
Usé el selector :not(:last-child) para seleccionar a todos los hijos excepto al último, y colocarles un margin-bottom. ¡Ojo! Para colocar mi fallback puse el mismo selector de clase dos veces: el de arriba lo tomarán los navegadores que sí soporten flexbox e ignorarán todo lo que esté en el segundo. Para navegadores que sí soporten Grid, sólo va a sustituir las propiedades que estén arriba por las que aparezcan abajo (las de Grid).
Bien, ahora vamos con los estilos de desktop:
Aquí lo que hice fue añadir los estilos de Flexbox. Pero veamos en el demo cómo se ve todo junto, recuerda que estamos añadiendo todo esto junto con las propiedades de Grid.
¿Y qué es lo que está pasando? Hay una noticia buena y dos malas :(
La buena es que ya funciona correctamente en nuestro navegador antiguo, porque está tomando las propiedades de Flexbox:
Y las dos noticias malas son para los navegadores que sí soportan Grid:
1. Si ves el sitio en modo mobile, aparece un espacio debajo de cada cajita de 32px, uno del margen de 16px que acabamos de colocar y otro del grid-gap que teníamos previamente
2. En desktop, la cajita de Content no tiene el 100% del ancho porque está heredando las propiedades que colocamos antes para el fallback de Flexbox, y se ve así:
Entonces, ¿qué procede ahora?
Es hora de usar el segundo fallback que mencioné hace rato: los feature queries.
Segundo tipo de fallback: Feature queries
Este tipo de querie funciona como un if en nuestro CSS. Es muy parecido a los media queries, sólo que éste se encarga de verificar si una propiedad en específico es soportada o no por el navegador.
Entonces, volviendo a nuestro ejemplo, vamos a colocar un feature querie en nuestro código para arreglar los dos problemas que tenemos:
Lo que ocurre aquí es que estoy revisando si el navegador soporta la propiedad display: grid. Si lo soporta, aplicará los estilos que están ahí dentro, va a quitar los márgenes en mobile y redefine el ancho de la cajita “content”.
Es así como se ve en el demo finalmente:
¡Y listo! Ya cuentas con todo lo necesario para lanzar a producción tu layout con la seguridad de que no se romperá en versiones más viejas de los navegadores.
Lo que te comparto en este artículo fue un ejemplo sencillo con el que aprendí a usar los fallbacks y me pareció interesante compartirlo. Puedes combinar los fallbacks que necesites adaptándolos a las necesidades de tu proyecto. Igual puedes jugar con los feature queries para muchas otras propiedades, no sólamente para las de grid. Aquí te dejo el link de la documentación para que le eches un vistazo. ¡Ah! y no olvides revisar también la compatibilidad de los feature queries, en caso de que no sea compatible tendrás que tomar otras medidas para que no se rompa tu sitio web.
¿Porqué no mejor uso sólo Flexbox?
Es una opción totalmente válida si el soporte que necesitas es en su mayoría para navegadores más antiguos. No nos compliquemos. Igual tomando el ejemplo de este artículo, es válido hacer un layout tan sencillo solamente con Flexbox, pero si tienes el tiempo y la oportunidad de practicar las nuevas propiedades que vayan saliendo es válido que uses lo que gustes con responsabilidad. De cualquier manera, hay muchísimas cosas más complejas que pueden llegar a hacerse con CSS Grid que hacen que que valga la pena sentarse a definir un diseño para navegadores más nuevos y definir uno más sencillo para navegadores más antiguos. Todo es cuestión de cada persona y de cada proyecto.
Espero que te haya sido útil este artículo. Si eres Frontend developer, te apasiona aprender y sueñas con aplicar tus conocimientos en un producto que usan miles de personas escríbenos a jobs@beek.io, estamos en búsqueda de gente con talento :)
Aquí te dejo otro link por si quieres stalkear un poco más sobre nuestra cultura de trabajo: https://jobs.beek.io/
