soy Kseso y esto EsCSS

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

avatar del Editor del blog

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