CSS

Compatibilidad CSS: soporte, prefijos y estrategia

Aprende a diseñar CSS robusto con @supports, fallbacks reales y herramientas de prefijos para mantener compatibilidad sin renunciar a features modernas.

¿Cuánto sabes de CSS?

📘 Teoría

Claves teóricas

Resumen rápido para recordar lo importante.

@supports (feature queries)

Permite aplicar estilos solo si el navegador entiende una propiedad concreta. Es el 'if' nativo de CSS.

Prefijos de navegador

Úsalos con herramientas (Autoprefixer). Evita escribirlos a mano salvo casos muy puntuales.

Mejora progresiva

Empieza con estilos base funcionales y añade mejoras para navegadores modernos sin romper lo anterior.

Compatibilidad real

Consulta Can I Use, Browserslist y métricas de tu audiencia para decidir qué soportar.

Reglas de soporte con @supports

@supports evalúa si el navegador entiende una propiedad y un valor concretos antes de aplicar un bloque de reglas.

Puedes combinar condiciones con and, or y not para crear rutas de compatibilidad claras y fáciles de mantener.

Úsalo en mejoras progresivas (subgrid, backdrop-filter, container queries) para que el layout base siga funcionando aunque la mejora no esté disponible.

Forma básica: @supports (display: grid) { ... }
Negación: @supports not (display: grid) { ... }
Condición múltiple: @supports (display: grid) and (gap: 1rem) { ... }

Ejemplo con fallback

.layout { display: flex; gap: 12px; }

@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

Prefijos y herramientas

Los prefijos (-webkit-, -moz-, -ms-) siguen apareciendo en casos concretos, sobre todo en propiedades con historial de soporte irregular.

En proyectos reales conviene delegarlos a Autoprefixer + Browserslist, así mantienes el CSS legible y evitas errores manuales.

Recuerda que una declaración no soportada se ignora, por eso el orden y los fallbacks importan en bloques críticos.

Autoprefixer: añade prefijos automáticamente.
Browserslist: define el rango de navegadores objetivo.
No uses prefijos a mano salvo casos específicos en Safari iOS.

Ejemplo con prefijo

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

Mejora progresiva en acción

Empieza siempre por una versión base funcional (por ejemplo, Flexbox para una rejilla simple).

Después activa mejoras con @supports: Grid avanzado, subgrid o efectos visuales modernos.

Si el navegador no soporta la mejora, conservará la base y la interfaz seguirá siendo usable y estable.

Flex base + Grid moderno

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@supports (display: grid) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }
}