Mejora progresiva con CSS Grid

CSS Grid (Grid) ha estado fuera desde hace algún tiempo, con soporte completo en los principales navegadores modernos. Dejaré que otros se sumerjan en por qué es tan genial y qué nuevas posibilidades de diseño hace que sea tan fácil de explorar. Si ha estado buscando la mejor manera de admitir diseños web receptivos, todavía no he visto a nadie que no le guste Grid. Es simple de usar, pero extremadamente potente y flexible.

Pero, le oigo decir, muchos de nuestros usuarios no utilizan las versiones de navegador más actualizadas, o están en mercados donde Chrome / Firefox no tienen una participación mayoritaria. Y, realmente, ¿vale la pena volver a escribir todo nuestro código antiguo?

Sentí lo mismo, hasta escuchar una gran charla dada por Natalya Shelburne. Describió cómo comenzó a usar CSS Grid junto con Bootstrap, sin perder el soporte para navegadores antiguos, mejorando en lugar de eliminar CSS antiguo.

Rachel Andrew por Laura Kishimoto en ScotlandCSS

Es importante destacar que esto es sin usar ningún polyfills de JavaScript, sino con CSS puro. Como Rachel Andrew menciona:

Como ya sabemos, los navegadores que no admiten la red son navegadores más antiguos y más lentos o los navegadores que se encuentran con mayor frecuencia en dispositivos de menor potencia en los mercados emergentes. ¿Por qué forzarías un montón de JavaScript en esos dispositivos?

Natalya describe cómo se pueden utilizar las "consultas de características" para implementar Grid en los navegadores que sí lo admiten, sin perder la funcionalidad existente. MDN se refiere a esto como "mejora progresiva", indicando que:

Vale la pena señalar que no tiene que usar la cuadrícula de una manera todo o nada. Puede comenzar simplemente mejorando los elementos de su diseño con la cuadrícula, que de lo contrario podrían mostrarse utilizando un método anterior.

Usando cuadrícula

Entonces, ¿cómo hacemos esto?

En una publicación anterior, describí un enfoque simple para "mantener el pie de página donde pertenece". Esto evita los problemas que se ven cuando el contenido principal de una página es demasiado pequeño para empujar un pie de página al final de la página.

De

Esto brinda la oportunidad de mostrar cómo se puede usar una consulta de características para pasar a usar Grid.

Es importante tener en cuenta que este es un ejemplo de cómo podría pasar a usar Grid en una base de código existente, no por qué es una herramienta poderosa. Este ejemplo se usa porque es pequeño, por lo que es posible entender cómo sin distracciones encontradas en una base de código más grande.

Siendo realistas, Grid no proporciona grandes mejoras aquí. Deben discutirse los beneficios de usar una nueva herramienta, en lugar de simplemente implementarla porque es genial.

El ejemplo está abajo. Más explicación sobre el código está aquí.

index.html:


 
   
 

 
   
         
   
 

main.css:

# page-container {
  posición: relativa;
  altura mínima: 100vh;
}
# content-wrap {
  relleno inferior: 2.5rem; / * Altura del pie de página * /
}
#footer {
  posición: absoluta;
  abajo: 0;
  ancho: 100%;
  altura: 2.5rem; / * Altura del pie de página * /
}

Hay dos partes principales para agregar Grid:

  • Agregar las nuevas propiedades de cuadrícula necesarias
  • anulando cualquier propiedad que ya no sea necesaria.

main.css se puede extender para agregar:

@supports (display: grid) {
    # page-container {
        posición: estática; // anular
        pantalla: cuadrícula; // nuevo
        grid-template-rows: 1fr auto; // nuevo
        grilla-plantilla-columnas: 100%; // nuevo
    }
    
    # content-wrap {
        relleno inferior: 0; // anular
    }
    #footer {
        posición: estática; // anular
        altura: auto; // anular
    }
}

la posición se restablece a su valor predeterminado de estática, y el relleno y la altura se restablecen a valores que no interfieren con el nuevo diseño.

min-height: 100vh no está referenciado. Grid también lo utiliza, por lo que no necesita ser alterado.

Se agregan tres nuevas propiedades de cuadrícula relacionadas. El uso de una sola unidad de fracción 1fr asegura que el primer elemento secundario del contenedor de página (en este caso, el ajuste de contenido) llene todo el espacio restante que no ocupa la altura automática del pie de página del segundo elemento secundario.

¡Y eso es todo! Ahora los navegadores que admiten Grid utilizarán el código dentro de la consulta de características, mientras que siguen siendo compatibles con los navegadores que no lo hacen. Esto incluso permite que los componentes individuales agreguen Grid de uno en uno: un equipo puede ver cuán sencillo es el proceso sin una gran inversión de tiempo.

Esperemos que esto ilustre el enfoque incremental que se puede utilizar para usar Grid.

Usos más complejos.

El poder de lo que ofrece Grid se ve mejor en los ejemplos más complejos escritos por Natalya que inspiraron este artículo de actualización. Esto muestra el poder de lo que Grid puede ofrecer cuando se usa a mayor escala.

Consejos rápidos

El código de respaldo se puede probar sin acceso a un navegador o emulador anterior. Cambie temporalmente @ support (display: grid) a un valor inexistente, por ejemplo gridNO, por lo que se utiliza el código de reserva.

Firefox proporciona algunas herramientas excelentes que Chrome actualmente no ofrece. Estas son las "Configuraciones de visualización de cuadrícula" activadas dentro de la pestaña "Inspector". Esta configuración ayuda a ilustrar visualmente cómo se está ejecutando Grid, lo cual es ideal para diseños complejos.

Herramientas de desarrollo de Firefox bajo Inspector

Finalmente, me inspiró una declaración hecha por Rachel Andrew:

No debería verse igual en todos los navegadores, debería ser una buena experiencia en todos los navegadores.

El valor predeterminado de muchas empresas es luchar por una experiencia duplicada en cada navegador. ¿Pero vale la pena considerar que en navegadores más antiguos y lentos, un enfoque más simple podría ser una mejor experiencia?

Gracias por leer ¡Espero que esto te sirva de inspiración para intentar usar Grid no solo en proyectos nuevos, sino también junto con todo lo que puedas estar usando hoy!

Recursos

  • De Bootstrap a CSS Grid
  • Mantener el pie de página en la parte inferior con CSS-Grid
  • Una guía completa de cuadrícula
  • Diseño de cuadrícula CSS y mejora progresiva
  • Uso de CSS Grid: soporte de navegadores sin Grid

Aquí hay algunas otras cosas que he escrito recientemente:

  • Usando Pa11y CI y Drone como gatekeeper de pruebas de accesibilidad
  • Burlándose de solicitudes HTTP con Nock