El estado real del soporte en 2026

Las consultas de estilo llevan tres años y medio funcionando en Chrome y casi dos en Safari, pero Firefox no las tuvo hasta mayo de 2026. Eso las convierte, a fecha de esta lección, en una función de Baseline recién disponible: existe en los cuatro motores actuales y no está en el parque instalado. Esta lección no tiene ninguna técnica nueva; tiene las fechas exactas, lo que sigue sin implementarse en ningún sitio, y la única estrategia de degradación que funciona, que es más sencilla de lo que parece.

Las fechas

Con la llegada de Firefox 151, las consultas de estilo sobre custom properties pasaron a ser Baseline newly available. Firefox 151 trajo además el soporte de varias condiciones combinadas en @container y la propiedad conditions en CSSContainerRule, que sustituye a containerName y containerQuery, ahora obsoletas.

“Recién disponible” significa una cosa muy concreta y conviene no maquillarla: está en la última versión de todos los navegadores, y no está en las versiones anteriores. En agosto de 2026 han pasado menos de tres meses desde el lanzamiento de Firefox 151. Todo usuario de Firefox que no haya actualizado, todo Safari anterior al 18, todo navegador integrado en una aplicación que arrastre un WebView antiguo y toda instalación empresarial con actualizaciones congeladas no tienen esta función.

La conclusión práctica no es “no lo uses”. Es: úsalo solo para mejoras, nunca para nada cuya ausencia rompa la interfaz o esconda información.

Lo que no está implementado en ningún sitio

Tres partes de la especificación circulan por artículos y demos y no funcionan en ningún navegador en 2026.

Consultar propiedades estándar. @container style(font-style: italic) está en el nivel 3 de CSS Containment desde el principio y no lo ha implementado nadie. Los ejemplos de la especificación y de los artículos de 2022 que lo usan siguen ahí, y confunden a mucha gente.

Comparaciones de rango. @container style(--nivel > 3) requeriría que la propiedad estuviera registrada con un tipo numérico y que el motor supiera compararla. No está implementado.

Detección con @supports. No existe forma de preguntar en CSS si el navegador entiende style(). @supports comprueba pares de propiedad y valor, y opcionalmente selectores con selector(); no comprueba at-rules ni sus preludios. Hay una propuesta de at-rule() en la especificación de @supports que no ha implementado ningún motor.

La estrategia de degradación

La buena noticia es que la degradación es automática y no necesita ninguna detección, porque un navegador que no entiende el preludio de una at-rule descarta la regla entera, incluido su contenido. No aplica nada a medias.

Eso convierte la estrategia en una sola disciplina: escribe el estado por defecto fuera de la consulta y usa la consulta solo para modificarlo.

/* estado base: valido y completo por si mismo */
.aviso {
  --tono: neutro;
  border: 1px solid currentColor;
  color: inherit;
  background: transparent;
}

/* mejora: solo se aplica donde style() se entiende */
@container style(--tono: peligro) {
  .aviso { background: color-mix(in oklch, currentColor 8%, transparent); }
  .aviso__icono { color: oklch(0.62 0.22 25); }
}

En un navegador sin soporte, el aviso crítico se ve igual que el neutro. Es una pérdida de matiz, no de información, y esa es exactamente la línea que separa una mejora legítima de un uso irresponsable.

Si el cambio de estilo transmite información que el usuario necesita —un estado de error, un dato de disponibilidad, una advertencia— no puede depender solo de una consulta de estilo. Ahí la solución correcta hoy sigue siendo un atributo en el marcado, que además tiene la ventaja de estar disponible para la accesibilidad:

<div class="aviso" data-tono="peligro" role="alert">…</div>

.aviso[data-tono="peligro"] { border-color: oklch(0.62 0.22 25); }

Si necesitas detección de verdad

Existe una comprobación fiable, pero es en JavaScript y consiste en pedirle al motor que parsee la regla y ver si la conserva:

function soportaStyleQueries() {
  const hoja = new CSSStyleSheet();
  try {
    hoja.insertRule('@container style(--x: 1) { .z { color: red } }');
  } catch {
    return false;
  }
  return hoja.cssRules.length === 1;
}

document.documentElement.classList.toggle('sq', soportaStyleQueries());

Un navegador sin soporte lanza una excepción o descarta la regla, y en los dos casos la función devuelve false. Con eso puedes añadir una clase en la raíz y escribir un camino alternativo. Merece la pena solo si tienes un caso donde la degradación natural no es aceptable; en el resto, añadir JavaScript para esto es pagar más de lo que vale.