¡Alerta de truco tonto!
No todos los navegadores son compatibles con todas las funciones. Digamos que desea escribir una alternativa para los navegadores que no admiten CSS Grid. No es muy común en estos días, pero es solo para ilustrar un punto.
Podrías escribir el CSS de apoyo en un @supports bloques:
@supports (display: grid) {
.blocks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
gap: 1rem;
}
}Luego, para probar el respaldo, cambia rápidamente @supports (display: grid) a algo sin sentido, como agregar una “x” para que sea @supports (display: gridx). Eso es un cambio rápido:
El ejemplo anterior no tiene muy buenas alternativas, ¿verdad? Tal vez intentaría escribir algo similar en flexbox, ya que tal vez todavía haya un pequeño grupo de navegadores que admitan flexbox y no grid. Lo más probable es que solo escriba una alternativa que haga que las cosas se vean bastante bien como una columna.
Si estoy bastante seguro de que el navegador admite @supports consultas (oh, la ironía), podría escribirlo así:
@supports (display: grid) {
/* grid stuff */
}
@supports not (display: grid) {
/* at least space them out a bit */
.block { margin: 10px }
}Esa es una suposición que será cada vez más segura y, sinceramente, probablemente ya estemos allí (si ha dejado de admitir IE).
Esto me hace querer eso @when sintaxis aún más, porque entonces podríamos escribir:
@when supports(display: grid) {
} @else {
}…que se siente tan fresco y tan limpio.