2

Cómo utilizar CSS Grid y que tu diseño se siga viendo bien en navegadores más antiguos

Beatriz
beaps
32919

CSS Grid es increíble!! 😍 Parece que no hay límites en cuanto al diseño y que con pocas líneas de código se pueden lograr grandes cosas. Pero hay navegadores más antiguos que aún no lo soportan (por ejemplo, Internet Explorer).

Entonces me pregunté, ¿no voy a poder utilizar esta poderosa herramienta porque existe el riesgo de que otros navegadores no la soporten y que el diseño se vea mal?

Así que investigué un poco y descubrí otra herramienta de CSS que nos ayudará a utilizar CSS Grid: ⚡️FEATURE QUERIES ⚡️

¿Qué es Feature Queries?

La regla @supports, también conocida como Feature Queries (consulta de característica), pregunta al navegador si una determinada propiedad/valor CSS es soportada, y utiliza la respuesta para decidir si aplicar o no un bloque de CSS.

@supports (display: grid) { ... }

Si el navegador soporta display: grid, todo el estilo dentro de las llaves será aplicado. De otro modo todo ese estilo se omitirá.

  • Buenas prácticas para utilizar esta herramienta:
// código de respaldo para navegadores antiguos@supports (display: grid) {
    // código para nuevos navegadores// incluyendo overrides de código anterior, si es necesario
}
  1. Escribes el código que funcionaría en todos los navegadores.

  2. Pones el código que sólo funcionaría en los navegadores que soportan CSS Grid.

Crearíamos diseños sencillos porque el “antiguo” CSS sigue funcionando (como los floats) y luego lo sobreescribiríamos con el CSS más nuevo.

Por último, me gustaría compartirles estas frases de Rachel Andrew (experta invitada al grupo de trabajo CSS):

  • “Nunca debería ser cómo hacemos que esto se vea igual en todos los navegadores, debería ser cómo obtenemos una buena experiencia en todos los navegadores.”

  • “No se preocupen por hacer que la experiencia de las personas parezca la misma sino por hacerla igual de buena.”


Referencias y enlaces interesantes:

La mayor parte de la información es de este artículo de Jen Simmons (Diseñadora y Developer Advocate en Mozilla):
inglés → https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
español → https://www.mozilla-hispano.org/uso-de-feature-queries-en-css/

En este vídeo ella explica Feature Queries. Además en su canal tiene más vídeos interesantes sobre CSS Grid 😃
https://www.youtube.com/watch?v=T8uxmUQZsck

Charla de Rachel Andrew sobre CSS Grid y al final habla de la regla Feature Queries
https://www.youtube.com/watch?v=xL9GAiDPboE
Una web de ella dónde tiene ejemplos de CSS Grid y tutoriales
https://gridbyexample.com/

https://developer.mozilla.org/es/docs/Web/CSS/@supports

Escribe tu comentario
+ 2
2
11196Puntos

Este articulo me ha salvado la vida, muchas gracias

2
2255Puntos

Gracias , Increible tu Articulo.
Estaba en ese dilema pero ya me queda mucho mas claro!

2
32919Puntos
3 años

Me alegra que te haya servido de ayuda! 😄