@supports

La regla "CSS @supports"asocia un conjunto de declaraciones anidadas en un bloque CSS (que está delimitado por corchetes) con una condición consistente en probar declaraciones de CSS (es decir, pares propiedad-valor, así como conjunciones, disjunciones o negaciones abritrarias sobre ellas). A esas condiciones se le llama condición "soporta" (supports condition).

@supports otorga la habilidad de realizar consultas que comprueben si ciertas funcionalidades están disponibles (feature query).

La regla @supports puede ser usada tanto en el nivel superior de una hoja de estilos, como dentro de cualquier regla de grupo condicional y se puede acceder a ella a través del modelo de objetos de CSS CSSSupportsRule.

Una condición "soporta" (supports condition) consiste en una o varias declaraciones combinadas por diferentes operadores lógicos. La precedencia de los operadores puede ser definida usando paréntesis.

La expresión más simple es una declaración CSS, es decir el nombre de una propiedad CSS seguida por un valor, separada por dos puntos. La siguiente expresión

( transform-origin: 5% 5% )

devuelve "cierto" si la transform-origin implementa una sintaxis que reconoce 5% 5% como válida.

Una declaración CSS está siempre rodeada entre paréntesis.

El operador not puede preceder cualquier expresión para crear una nueva, resultando en la negación de la expresión original. La siguiente expresión

not ( transform-origin: 10em 10em 10em )

devuelve "cierto" si transform-origin no reconoceo 10em 10em 10em como una sintaxis válida.

Como cualquier operador, el operador not puede ser aplicado a una declaración de complejidad arbitraria. Los siguientes ejemplos son todas expresiones válidas:

not ( not ( transform-origin: 2px ) )
(display: flexbox) and ( not (display: inline-grid) )

Partiendo de dos expresiones, el operador and crea una nueva expresión consistente en la conjunción de dos originales; la expresión resultante es verdadera si sólo ambas expresiones originales lo son. En este ejemplo, la expresión completa resuelve a true si y sólo si, las dos expresiones son simultáneamente veraderas:

(display: table-cell) and (display: list-item)

Varias conjunciones pueden ser yuxtapuestas sin la necesidad de agregar paréntesis:

(display: table-cell) and (display: list-item) and (display:run-in)

es equivalente a:

(display: table-cell) and ((display: list-item) and (display:run-in))

Partiendo de dos expresiones, el operador or crea una nueva expresión consistente en la disyunción de dos originales; la expresión resultante es verdadera si una o ambas expresiones originales lo son. En este ejemplo, la expresión completa resuelve a true si al menos una de las dos expresiones es veradera:

( transform-style: preserve ) or ( -moz-transform-style: preserve )

Varias disyunciones pueden ser yuxtapuestas sin la necesidad de agregar paréntesis:

( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )

es equivalente a:

( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))

@supports = 
  @supports <supports-condition> { <rule-list> }  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<supports-feature> = 
  <supports-decl>  

<supports-decl> = 
  ( <declaration> )  

• La clase CSSOM CSSSupportsRule, y el método CSS.supports que permite chequear via JavaScript.