La regla @supports

Crear reglas condicionales y fallbacks en CSS


Existe una regla CSS denominada @supports que permite establecer fragmentos de código CSS condicionales, aplicando estilos CSS sólo cuando se cumplen ciertas condiciones y restricciones. Esto puede ser muy útil para aplicar unos estilos si el navegador soporta una característica, o aplicar un estilo diferente como fallback si no lo hace.

FormatoDescripción
@supports (condición)Aplica los estilos si se cumple la condición.
@supports not (condición)Aplica los estilos si no se cumple la condición.
@supports (condición1) and (condición2)Aplica los estilos si se cumplen las diferentes condiciones.
@supports (condición1) or (condición2)Aplica los estilos si se cumple una de las dos condiciones.
@supports selector(selector)Aplica los estilos si soporta el selector indicado.
@supports font-tech(tech)Aplica los estilos si soporta una tecnología de tipografías.
@supports font-format(format)Aplica los estilos si soporta un formato de tipografías.

Un ejemplo de la regla @supports podría ser la siguiente:

@supports (display: grid) {
  .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Observa que en este ejemplo, se definen unos estilos para la clase .content que el navegador sólo aplicará en el caso de que tenga soporte para la propiedad display con el valor grid, es decir, que tenga soporte de Grid CSS. Podemos hacer esto mismo con cualquier otra propiedad CSS, y utilizar la regla @supports para crear códigos condicionales.

Reglas compuestas

Sin embargo, podemos crear también reglas compuestas un poco más complejas. Por ejemplo, combinemos una regla de negación con una normal:

@supports not (display: grid) and (display: flex) {
  .content {
    display: flex;
    justify-content: center;
  }
}

En este ejemplo creamos una clase .content con contenido estructurado con flexbox, siempre en el caso de que el navegador no soporte Grid CSS pero si soporte Flex. Observa que hemos combinado tanto el not que afecta sólo a la primera condición, como el and que afecta a ambas y exige que se cumplan ambas.

Si quisieramos crear una doble condición con ambas negadas, deberíamos hacer similar a este ejemplo:

@supports (not (display: flex)) and (not (display: grid)) {
  .box {
    display: inline-block;
  }
}

Esto podría ser interesante, pero recuerda no utilizarlo con propiedades muy antiguas. La regla @supports fue implementada en navegadores alrededor del año 2019-2020, por lo que utilizarla para excluir navegadores muy antiguos no funcionará porque tampoco tendrán la regla @supports implementada.

Reglas con fallbacks

En lugar de establecer reglas negadas compuestas, es mejor utilizar un enfoque donde establezcas unos estilos generales, que se sobreescriben si el navegador tiene implementadas nuevas características, como explicaremos a continuación.

En el siguiente ejemplo verás un primer bloque de código fuera de reglas, que se aplicará en cualquier navegador, moderno o antiguo. Sin embargo, a continuación tenemos dos reglas @supports que se ejecutarán en navegadores más actuales:

.content {
  display: inline-block;
}

@supports (display: grid) {
  .content {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
  }
}

@supports not (display: grid) and (display: flex) {
  .content {
    display: flex;
    justify-content: center;
  }
}

En el caso de tratarse de un navegador que implemente Grid CSS, establecerá los estilos indicados en el primer bloque con la regla @supports. Luego, la siguiente regla @supports se ejecutará sólo en el caso de que el navegador no soporte Grid CSS pero si Flexbox.

La función selector()

Mediante la función selector() podemos comprobar si un cierto selector esta soportado en el navegador. Observa este ejemplo, donde comprobamos si existen los diferentes selectores:

.box {
  background: red;
}

@supports selector(h1 > h2) {
  .h1h2 { background: green; }
}

@supports selector(:has(.some)) {
  .has { background: green; }
}

@supports selector(:inventado) {
  .inventado { background: green; }
}
<div class="box h1h2"><code>h1 > h2</code> soportado</div>
<div class="box has"><code>:has()</code> soportado</div>
<div class="box inventado"><code>:inventado()</code> soportado</div>

La función font-tech()

Mediante la función font-tech() podemos indicar si se soportan diferentes tecnologías relacionadas con las tipografías. A continuación, tienes una lista de las tecnologías que puedes indicar en la función font-tech():

CaracterísticasDescripción
features-opentypeTablas OpenType GSUBy GPOS
features-aatTablas TrueType morx y kerx
features-graphiteTablas Graphite Silf, Glat, Gloc, Feat y Sill
color-COLRv0 / color-COLRv1Glifos multicolor (tabla COLR)
color-SVGTablas multicolor SVG
color-sbix / color-CBDTTablas de bitmaps
variationsVariaciones TrueType/OpenType
palettesPaletas de color font-palette
incrementalCargador de fuentes incrementales

La función font-format()

Mediante la función font-format() podemos detectar si el navegador soporta un formato de tipografía concreto. La lista de formatos disponibles sería la siguiente:

FormatoDescripción
collectionColección OpenType: .otc o .ttc
embedded-opentypeEmbedded OpenType: .eot
opentypeOpenType .ttf o .otf
svgFuente SVG (obsoleto) .svg
truetypeFuente TrueType .ttf
woffWeb Open Font Format .woff
woff2Web Open Font Format v2 .woff2

Tienes más información sobre formatos de tipografías en el post La regla @font-face.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev