La regla @supports en Css: estilos condicionados al soporte del navegador

La regla @supports en Css: estilos condicionados al soporte del navegador

Por Kseso ✎ 0

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.

  1. @media queries: discrimina en función del media type.
  2. @document: Los estilos dependen de la dirección URL del documento.
  3. @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).

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 Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap