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
}
-
Escribes el código que funcionaría en todos los navegadores.
-
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/
Curso de CSS Grid Layout 2017
