CSS Moderno 2025 Inteligente

@supports Query Feature Detection Nativa

@supports permite detectar si un navegador soporta una característica CSS antes de aplicar estilos. Es progressive enhancement puro: ofreces la mejor experiencia posible según las capacidades del navegador, con fallbacks elegantes para todos.

🔍
Feature Detection Detecta capacidades CSS
🎯
Progressive Enhancement Mejor experiencia posible
🛡️
Fallbacks Elegantes Funciona en todos lados

Capacidades de tu Navegador Detectadas en tiempo real con @supports

🔲

CSS Grid

Sistema de layout bidimensional para crear interfaces complejas

Verificando...
✨

Backdrop Filter

Efectos de blur y filtros en elementos detrás (glassmorphism)

Verificando...
🎨

color-mix()

Mezclar colores directamente en CSS sin preprocesadores

Verificando...
📦

Container Queries

Responsive design basado en el contenedor padre

Verificando...
🎯

Selector :has()

Seleccionar elementos padre basándose en sus hijos

Verificando...
⚡

Subgrid

Grids anidados que heredan las columnas del padre

Verificando...

Galería Progresiva El mismo HTML, diferente resultado según soporte

Esta galería se adapta automáticamente: Si tu navegador soporta características modernas (Grid, backdrop-filter, color-mix), verás el diseño avanzado. Si no, verás un fallback elegante usando Flexbox y técnicas tradicionales.

🏔️

Montañas del Norte

Paisaje montañoso con vistas espectaculares

Paisaje 2025
🌆

Ciudad Nocturna

Luces urbanas en la noche moderna

Urbano 2025
🌊

Costa del Pacífico

Olas cristalinas y arena blanca

Naturaleza 2025
🎨

Arte Digital

Composición abstracta moderna

Abstracto 2025
🌲

Bosque Misterioso

Naturaleza salvaje y enigmática

Paisaje 2025
🏙️

Arquitectura Futura

Rascacielos y diseño vanguardista

Urbano 2025

Características Adaptativas

🔲
CSS Grid Layout masonry automático
✨
Backdrop Filter Overlay con efecto blur
🎨
Color Mix Colores dinámicos en hover

Ejemplos de @supports Código real del demo

1. Detección Básica de Feature

CSS 
/* Fallback por defecto (flexbox) */
.progressive-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Si el navegador SOPORTA Grid */
@supports (display: grid) {
  .progressive-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
  }
}

2. Glassmorphism con Fallback

CSS 
/* Overlay normal (fallback) */
.gallery-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* Si SOPORTA backdrop-filter */
@supports (backdrop-filter: blur(10px)) {
  .gallery-overlay {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px) saturate(180%);
  }
}

3. Colores Dinámicos

CSS 
/* Color estático (fallback) */
.meta-tag {
  background: #2448A6;
}

/* Si SOPORTA color-mix */
@supports (background: color-mix(in srgb, red, blue)) {
  .meta-tag:hover {
    background: color-mix(in srgb, var(--primary-color) 70%, var(--secondary-color) 30%);
  }
}

4. Múltiples Condiciones

CSS 
/* Si SOPORTA Grid Y Backdrop Filter */
@supports (display: grid) and (backdrop-filter: blur(10px)) {
  .progressive-gallery {
    /* Layout moderno completo */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
  .gallery-overlay {
    backdrop-filter: blur(10px);
  }
}

/* Si NO SOPORTA Grid */
@supports not (display: grid) {
  .progressive-gallery {
    display: flex;
    flex-wrap: wrap;
  }
}

5. Detectar Selectores

CSS 
/* Si SOPORTA el selector :has() */
@supports selector(:has(*)) {
  .gallery-item:has(.gallery-overlay:hover) {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  }
}

/* Si NO SOPORTA :has() */
@supports not selector(:has(*)) {
  .gallery-overlay:hover + .gallery-content {
    /* Fallback sin :has() */
  }
}

¿Cuándo Usar @supports? Casos de uso prácticos

🚀

Características Nuevas

Usa lo último de CSS con confianza. Container Queries, :has(), color-mix() con fallbacks automáticos.

🎨

Efectos Visuales

Glassmorphism, filtros avanzados, blend modes. Si no se soporta, alternativas elegantes.

📱

Layouts Modernos

Grid avanzado, subgrid, aspect-ratio. Flexbox como fallback para navegadores antiguos.

🛡️

Progressive Enhancement

Todos obtienen una experiencia funcional. Los navegadores modernos obtienen la mejor versión.

Soporte de @supports Ironía: muy bien soportado

🌐
Chrome 28+ ✅ (2013)
🦊
Firefox 22+ ✅ (2013)
🧭
Safari 9+ ✅ (2015)
🔷
Edge 12+ ✅ (2015)

📊 Soporte global: 97%+ de navegadores. Puedes usar @supports con confianza. Para el 3% restante, simplemente no se aplicarán las reglas dentro del @supports.