La regla @supports en Css: estilos condicionados al soporte del navegador 3.9.12
La regla @supports en Css: estilos condicionados al soporte del navegador
El documento "CSS Conditional Rules Module Level 3" define las particularidades de las reglas @ de css que permiten declarar y aplicar los pares propiedad:valor supeditadas al cumplimiento de unas condiciones marcadas.
En este momento son tres las reglas condicionales en desarrollo: @media queries, @document y @supports.
- @media queries: discrimina en función del media type.
- @document: Los estilos dependen de la dirección URL del documento.
- @supports: En función del soporte que da el agente de usuario a una declaración css (propiedad: valor).
La regla @supports en Css
La regla @supports de css verifica si el agente de usuario (~navegador) soporta un par 'propiedad: valor' para aplicar unos estilos, y si no lo hace otros.
Sintaxis de @supports
Un ejemplo básico de la sintaxis de @supports en Css:
@supports (display: flexbox) {
article {
display: flexbox;
}
}
@supports not ( display: flexbox ) {
article {
display: block;
}
}
La sintaxis de @supports es algo más compleja que el resto de reglas @ de css. Admite los operadores de negación, conjunción y disyutivos: not | and | or, una combinación múltiple de estos operadores y los paréntesis que engloban a las condiciones son críticos: si no se utilizan bien la regla se anula:
REGLA INVÁLIDA:
falta el paréntesis:
@supports display: flexbox {
// ...
}
REGLA VÁLIDA:
@supports (display: flexbox) {
// ...
}
REGLA INVÁLIDA:
falta el paréntesis:
@supports (transition-property: color) or
(animation-name: foo) and
(transform: rotate(10deg)) {
// ...
}
REGLA VÁLIDA:
Cualquiera de las dos siguiente:
@supports ((transition-property: color) or
(animation-name: foo)) and
(transform: rotate(10deg)) {
// ...
}
@supports (transition-property: color) or
((animation-name: foo) and
(transform: rotate(10deg))) {
// ...
}
Soporte a @supports
Debido al estado de desarrollo de este documento, ningún navegador lo implementa en el momento de escribir este artículo (Septiembre de 2.012).
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso