Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

@supports

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 , cuya propiedad-valor iguala, combinada con conjunciones arbitrarias, disyunciones y sus negaciones. Dicha condición se llama condición de apoyos (supports condition).

@supports otorga la habilidad de ejecutar una consulta de característica (feature query).

La regla @supports puede ser usada no sólo en el nivel más alto de una CSS, sino también dentro de cualquier CSS conditional-group at-rule y a la que puede accederse via el modelo de interfase CSS CSSSupportsRule.

Sintaxis

Una condición de apoyos (supports condition) consiste en una o varias declaraciones combinadas por diferentes operadores lógicos. Los operadores precedentes pueden sobre-escribirse usando paréntesis.

Sintaxis de una declaración

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

( transform-origin: 5% 5% )

devuelve "true" si la transform-origin implementa una sintaxis considerando 5% 5% como válida.

Una declaración CSS está siempre encerrada 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 "true" si transform-origin no implementa una sintaxis considerando 10em 10em 10em como válida.

Como cualquier operador, el operador not puede ser aplicado a  una declaración de cualquier complejidad. 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 operdaores, como andor, sí se requieren paréntesis

El operador  "and"

Desde 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"

Desde 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 para el apoyo 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 para el apoyo de una propiedad CSS determinada o una versión prefijada

@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 para el apoyo de una propiedad CSS no determinada

@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
The definition of '@supports' in that specification.
Candidate Recommendation Initial definition.

Compatibilidad con navegadores

Caract. Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 28.0 (Yes) 22 (22) [1] Not supported 12.1 9
Caract Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support Not supported ? 22.0 (22) [1] Not supported 12.1 9 28.0

[1] Gecko 17 a Gecko 21 suportaron esta característica sólo si el usuario la habilitaba configurando el valor layout.css.supports-rule.enabledtrue.

Ver también

Etiquetas y colaboradores del documento

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