Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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.

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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo 28Edge Soporte completo 12Firefox Soporte completo 22
Soporte completo 22
Sin soporte 17 — ?
Deshabilitado
Deshabilitado From version 17: this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 12.1Safari Soporte completo 9WebView Android Soporte completo SiChrome Android Soporte completo 28Edge Mobile Soporte completo SiFirefox Android Soporte completo 22
Soporte completo 22
Sin soporte 17 — ?
Deshabilitado
Deshabilitado From version 17: this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 12.1Safari iOS Soporte completo 9Samsung Internet Android Soporte completo Si
selector()
Experimental
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 64
Deshabilitado
Soporte completo 64
Deshabilitado
Deshabilitado From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile Sin soporte NoFirefox Android Soporte completo 64
Deshabilitado
Soporte completo 64
Deshabilitado
Deshabilitado From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: SJW, angelf, MilkSnake
Última actualización por: SJW,