gacor: Usa @supports para mejorar CSS de forma progresiva

@supports comprueba si un navegador reconoce una declaración CSS. Úsalo para añadir una mejora sobre una base que siga siendo útil aunque el navegador no admita la función más reciente.

.card {
  display: block;
}

@supports (display: grid) {
  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

Detección de funciones, no nombres de navegador

• Pruebe la propiedad exacta y valore las necesidades de mejora.
• Mantenga el respaldo significativo en lugar de ocultar contenido importante.
• Usar y/o/no combinar controles cuando una característica depende de más de una declaración.

Recuerde que el soporte de sintaxis no lo es todo

Una verificación de soporte exitosa le indica que el navegador analiza una declaración; no prueba que todos los detalles funcionen perfectamente o que la función sea adecuada para la página. Pruebe la interacción real y mantenga una alternativa sensata.

Utilice consultas de funciones para realizar mejoras, no como sustituto de comprobar la compatibilidad del navegador o probar un diseño real.