@supports

Resumen

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 (en-US).

Sintaxis

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.

Sintaxis de una declaraci贸n

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 "

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) )

Nota: no hay necesidad de encerrar el operador not entre par茅ntesis cuando se encuentra en el nivel superior. Para combinarlo con otros operadores, como andor, s铆 se requieren par茅ntesis

El operador  "and"

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))

El operador "or"

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  )))

Nota: cuando se usan andor, el par茅ntesis debe ser usado para definir el orden en el cual aplican. Si no, la condici贸n es inv谩lida provocando que se ignore todo el "at-rule" .

Sintaxis formal

@supports <supports-condition> {
  <group-rule-body>
}

where
<supports-condition> = not <supports-in-parens> | (en-US) <supports-in-parens> [ (en-US) and <supports-in-parens> ] (en-US)* (en-US) | (en-US) <supports-in-parens> [ (en-US) or <supports-in-parens> ] (en-US)* (en-US)

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

where
<supports-feature> = <supports-decl> | (en-US) <supports-selector-fn>
<general-enclosed> = [ (en-US) <function-token> <any-value> ) ] (en-US) | (en-US) ( <ident> (en-US) <any-value> )

where
<supports-decl> = ( <declaration> )
<supports-selector-fn> = selector( <complex-selector> )

where
<complex-selector> = <compound-selector> [ (en-US) <combinator>? (en-US) <compound-selector> ] (en-US)* (en-US)

where
<compound-selector> = [ (en-US) <type-selector>? (en-US) <subclass-selector>* (en-US) [ (en-US) <pseudo-element-selector> <pseudo-class-selector>* (en-US) ] (en-US)* (en-US) ] (en-US)! (en-US)
<combinator> = '>' | (en-US) '+ (en-US)' | (en-US) '~' | (en-US) [ (en-US) '|| (en-US)' ] (en-US)

where
<type-selector> = <wq-name> | (en-US) <ns-prefix>? (en-US) '* (en-US)'
<subclass-selector> = <id-selector> | (en-US) <class-selector> | (en-US) <attribute-selector> | (en-US) <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | (en-US) ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? (en-US) <ident-token>
<ns-prefix> = [ (en-US) <ident-token> | (en-US) '* (en-US)' ] (en-US)? (en-US) | (en-US)
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[ (en-US)' <wq-name> '] (en-US)' | (en-US) '[ (en-US)' <wq-name> <attr-matcher> [ (en-US) <string-token> | (en-US) <ident-token> ] (en-US) <attr-modifier>? (en-US) '] (en-US)'

where
<attr-matcher> = [ (en-US) '~' | (en-US) | (en-US) | (en-US) '^' | (en-US) '$' | (en-US) '* (en-US)' ] (en-US)? (en-US) '='
<attr-modifier> = i | (en-US) s

Ejemplos

Prueba "soporta" de una propiedad CSS determinada

@supports (animation-name: test) {/* specific CSS applied when animations are supported unprefixed */
    @keyframes { /* @supports being a CSS conditional group at-rule, it can includes other relevant at-rules */}
}

Prueba "soporta" de una propiedad CSS determinada o de una versi贸n con prefijo

@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {/* specific CSS applied when 3D transforms, eventually prefixed, are supported */
}

Prueba "soporta" para propiedades customizadas

@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){/* specific CSS applied to simulate text-align-last:justify */
}

Especificaciones

Especificaci贸n Estado Comentario
CSS Conditional Rules Module Level 3
La definici贸n de '@supports' en esta especificaci贸n.
Candidate Recommendation Initial definition.

Compatibilidad con navegadores

BCD tables only load in the browser

Ver tambi茅n