Ultimas Entradas

martes, 4 de septiembre de 2012

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.

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 regla 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, no hay soporte de momento por los navegadores.