{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Progressive Enhancement con @supports

Aprende a detectar el soporte de funciones nuevas en el navegador para aplicar estilos avanzados solo donde funcionen, garantizando una web resiliente.

En el desarrollo profesional, no podemos permitirnos el lujo de esperar 5 años a que todos los usuarios actualicen sus navegadores para usar una propiedad nueva. Pero tampoco podemos entregar una web que no se lea en navegadores antiguos.

La regla `@supports` (conocida como *Feature Queries*) es el 'if' del navegador. Te permite preguntar: '¿Entiendes esta propiedad?'. Si la respuesta es sí, aplicas el diseño moderno; si es no, el navegador simplemente ignora ese bloque y mantiene el estilo base.

En esta lección dominaremos la estrategia de **Mejora Progresiva (Progressive Enhancement)**: construir una base funcional sólida y añadir capas de 'lujo visual' solo para quienes pueden disfrutarlas.

  • Preguntando por capacidades, no por versiones.
  • A diferencia de las antiguas técnicas de 'detección de navegador' (User Agent sniffing), `@supports` detecta capacidades reales. La sintaxis es directa: `@supports (propiedad: valor) { ... }`.
  • Puedes usar operadores lógicos para consultas complejas:
  • - `and`: Ambos deben ser ciertos.
  • - `or`: Al menos uno debe ser cierto.

Sintaxis y Lógica

Preguntando por capacidades, no por versiones.

A diferencia de las antiguas técnicas de 'detección de navegador' (User Agent sniffing), `@supports` detecta capacidades reales. La sintaxis es directa: `@supports (propiedad: valor) { ... }`.

Puedes usar operadores lógicos para consultas complejas:

- `and`: Ambos deben ser ciertos.

- `or`: Al menos uno debe ser cierto.

La estrategia de la cebolla

Capas de experiencia de usuario.

1. **Capa Base**: CSS plano, accesible y legible (layout en bloque o Flexbox básico).

2. **Capa Moderna**: Usamos `@supports` para introducir Grid, Subgrid o efectos de scroll-driven.

3. **Capa Experimental**: Para propiedades que solo funcionan en versiones beta o navegadores específicos.

Este enfoque garantiza que el sitio web NUNCA esté roto, solo será 'menos bonito' en navegadores obsoletos.

Detectando Selectores

@supports selector(...)

Una adición reciente muy potente es la capacidad de detectar si el navegador entiende un selector específico (como `:has()` o `::view-transition`).

Sintaxis: `@supports selector(:has(p))`.

Esto es vital porque muchas veces el problema no es la propiedad CSS, sino el selector avanzado que estamos intentando usar para aplicarla.

CSS
58

Progressive Enhancement con @supports

Aprende a detectar el soporte de funciones nuevas en el navegador para aplicar estilos avanzados solo donde funcionen, garantizando una web resiliente.

Test de Desarrollo Web (CulTest)

Código del tema: display: grid; gap: 1rem;

📘 Teoría

Sintaxis y Lógica

Preguntando por capacidades, no por versiones.

A diferencia de las antiguas técnicas de 'detección de navegador' (User Agent sniffing), `@supports` detecta capacidades reales. La sintaxis es directa: `@supports (propiedad: valor) { ... }`.

Puedes usar operadores lógicos para consultas complejas:

- `and`: Ambos deben ser ciertos.

- `or`: Al menos uno debe ser cierto.

- `not`: Invierte la consulta (útil para navegadores que NO soportan algo).

Ejemplo: `@supports (display: grid) and (not (display: subgrid))` nos permite aplicar un grid normal solo si el subgrid no está disponible.

La estrategia de la cebolla

Capas de experiencia de usuario.

1

1. **Capa Base**: CSS plano, accesible y legible (layout en bloque o Flexbox básico).

2

2. **Capa Moderna**: Usamos `@supports` para introducir Grid, Subgrid o efectos de scroll-driven.

3

3. **Capa Experimental**: Para propiedades que solo funcionan en versiones beta o navegadores específicos.

4

Este enfoque garantiza que el sitio web NUNCA esté roto, solo será 'menos bonito' en navegadores obsoletos.

Detectando Selectores

@supports selector(...)

1

Una adición reciente muy potente es la capacidad de detectar si el navegador entiende un selector específico (como `:has()` o `::view-transition`).

2

Sintaxis: `@supports selector(:has(p))`.

3

Esto es vital porque muchas veces el problema no es la propiedad CSS, sino el selector avanzado que estamos intentando usar para aplicarla.

🧭 Visuales clave

Mejora progresiva con supports

Permite activar features modernas sin romper navegadores con menos soporte.

Flujo de decision de supports con rama de soporte y fallback.

🧪 Aprende probando

Ejemplo Demo: Layout Resiliente Este ejemplo define un layout de tarjetas con Flexbox por defecto (seguro) y lo mejora a Grid moderno si el navegador lo soporta.
⌄
Ejemplo Demo interactiva: masonry con grid-lanes y fallback Comprueba cómo un layout experimental puede apoyarse en `@supports` para activar `grid-lanes` solo cuando existe soporte, manteniendo una versión usable con `columns`.
⌄
Ejemplo Reto: Detección de Subgrid Aplica un color de fondo verde al contenedor si el navegador soporta 'subgrid', y rojo si no lo soporta (usando 'not').
⌄

🧰 Recursos

Enlaces útiles

MDN - @supports (Feature Queries) Resilient Web Design - Jeremy Keith MDN CSS MDN Layout Cookbook
Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS
Recursos del curso 78
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets
‹
Lección 57
CSS Nesting: El fin de la repetición
Lección 59
Compatibilidad CSS: soporte, prefijos y estrategia
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .