El futuro y la propiedad @supports

Así como hace más de dos años, se mostraba el uso de una propiedad de CSS3 llamada @media que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará y hoy se va generalizado a partir de la intención de muchos desarrolladores de tener diseños adaptables; esta otra, llamada @supports, es probable que pronto se convierta en una de esas cosas imprescindibles.

Por ahora, su uso práctico es limitado o nulo ya que sólo está soportado por Opera 12 y Firefox 17 e incluso en este último, sólo funciona si se coloca en TRUE el valor layout.css.supports-rule.enable en la configuración del navegador (about:config) pero, se espera que pronto sea algo corriente y Chrome dice que lo implementará a partir de la versión 24.

¿Para qué serviría esto? Para algo que el CSS aun es incapaz de manejar, detectar el navegador que se está utilizando de tal forma de poder condicionar el uso de determinadas reglas o propiedades.

La sintaxis sería.

@supports una_condición {
  /* y aquí las reglas de estilo si la condición se cumple */
}

Por ejemplo, supongamos que quiero que una etiqueta tenga una animación que use @keyframes sólo si estas son soportadas y, caso contrario que no se vean:

#mi_animacion {display:none;} /* por defecto no lo muestro */
@supports (animation-name: un_ejemplo) {
  /* y sólo se verá si el navegador soporta animaciones */
  @keyframes un_ejemplo  {
    from {background-color:#000;border: 0px solid #444;} 
    to {background-color:#F00;border: 15px solid #FF0;}
  }
  #mi_animacion {
    display:block;}
    animation: un_ejemplo 1s infinite alternate;
  }
}

En ese caso, sólo hay una condición pero puede haber varias y combinarse con OR y AND:

@supports (animation-name: un_ejemplo) or (-webkit-animation-name: un_ejemplo) {
  /* las reglas se aplicarían en cualquiera de los dos casos */
}

@supports (animation-name: un_ejemplo) and (box-shadow: 1px 1px 5px #FFF) {
  /* las reglas se aplicarían si ambas propiedades son reconocidas por el navegador */
}

O incluso, puede usarse el NOT para hacer lo contrario:

@supports not (display: flexbox) {
  /* estas reglas se aplicarían si la propeidad no es reconocida por el navegador */
}

Si bien la condición debe tener un valor, este puede ser cualquiera y no es necesario que se utilice en las reglas de la condición así que, por ejemplo, esto sería válido (inútil pero válido):

@supports (background: red) {
  body {background: white;}
}

Sí, ya sé, no tiene utilidad pero ... el tiempo pasa volando.