Tecnología y Coaching para Emprendedores

Lo que está por venir: La directiva @supports de CSS

css

Este artículo pretende ser una introducción a una de las nuevas características de CSS que están por venir en un futuro muy cercano. Esta característica es la directiva @supports, y será el próximo método de detectar las características del navegador.

Éste es un ejemplo básico de su uso. En este caso comprobaríamos si la nueva versión de flexbox es soportado en el navegador. En ese caso, aplicaríamos los estilos necesarios:

@supports (display: flex) or 
          (display: -webkit-flex) or 
          (display: -moz-flex) or 
          (display: -o-flex) or 
          (display: -ms-flex) {
    /* Reglas específicas para navegadores que soportan flexbox */
}

Tal y como está en la especificación, es posible usar las palabras claves and, or y not (que ya son autodescriptivas):

@supports not (box-shadow: 0 0 0 black) {
    /*Reglas css para navegadores que no soportan box-shadow sin prefijo*/
}
@supports not (background-image: linear-gradient(#000, #fff)){
    /*Reglas para navegadores que no soportan gradientes sin prefijo*/
}
@supports (animation-name: cualquiera) and 
          (perspective: 1px) {
    /*Reglas para navegadores que soportan animaciones y la propiedad perspective (ambas sin prefijo)*/
)

Pero hay más

Además de la directiva CSS (que ya es interesante de por sí), también viene con una API de Javascript (parece que se llamará window.supportsCSS, pero el nombre está siendo discutido todavía, por lo que por ahora no será implementada), y funcionará de forma parecida a como lo hace actualmente window.matchMedia. Es decir, devolviendo true o false si la expresión es válida:

var soportaGradientes = window.supportsCSS('background-image: linear-gradient(#222, #000)');

Soporte

Actualmente esta directiva sólo estará soportada por Firefox 17, y en Opera están trabajando en ello, por lo que todavía no es recomendable usarla en un proyecto, pero dentro de poco no será necesario usar Modernizr. Si te ha gustado el artículo, deja un comentario.