28

2

Supports es el Modernizr de CSS3

Todas las funcionalidades relacionadas con el diseño que actualmente se hacen con JavaScript se están empezando a adoptar en CSS de una forma más simple e intuitiva.
Hace unos días hablé de cuando usar y cuando no Modernizr y mencioné la regla @supports, que tiene como fin aplicar estilos CSS si se cumplen ciertas condiciones (como que se admita transformaciones 3D, sombras...), por lo que sustituiría a Modernizr en el terreno del diseño.

1. /* Si admite la rotación se visualizará */
2. @supports (transform: rotate(-30deg)){

div{

transition:1s all ease;

}

3. }

El ejemplo anterior es algo básico que se podría hacer con @supports, que por desgracia solo tiene compatibilidad con Opera y con Firefox (activándolo) .
Pero la forma de usarse es simplemente: añadir tras @supports las propiedades CSS que tienen que poder ejecutarse o no y según esas reglas el contenido de @supports se aplicará. También se pueden aplicar varias reglas juntas y usar operadores como and, or y not.

Funcionamiento

Para que el contenido de la regla se visualice el conjunto de reglas que usemos tienen que devolver verdadero, que es devuelto cuando un parámetro de CSS puede ser ejecutado, es decir, es válido.
Para ver esto correctamente voy a poner varios ejemplos.

1. /* El resultado es verdadero */
2. @supports (display: block){

/* ... */

3. }
5. /* El resultado es falso */
6. @supports (display: astronauta){

/* ... */

7. }

Por el simple hecho de que "astronauta" no es una propiedad admitida por display ya hace que el resultado sea falso, al igual que pasaría si en lugar de display usásemos otra propiedad inexistente.

Operador not

El operador not puede preceder cualquier condición, y negará su resultado (es decir, si es verdadero pasará a ser falso).

1. /* El resultado es verdadero */
2. @supports (not(display: astronauta)){

/* ... */

3. }

Esta condición es verdadera porque negamos el resultado, que era falso.

Operador and

El operador and exige que las propiedades que se comparen sean verdaderas, si alguna de ellas es falsa el resultado será falso.

1. /* El resultado es verdadero */
2. @supports (border:1px solid #FFF) and (display: block){

/* ... */

3. }
5. /* El resultado es falso */
6. @supports (border:1px solid #FFF) and (display: astronauta){

/* ... */

7. }

En el primer caso, al establecer un border y un display válidos se visualizaría el código de la regla, pero en el segundo caso al no ser válido el display no se mostraría.

Operador or

Y el último operador es or que compara varias condiciones y si una se cumple el resultado es verdadero.

1. /* El resultado es verdadero */
2. @supports (border:1px solid #FFF) or (display: block){

/* ... */

3. }
5. /* El resultado es verdadero */
6. @supports (border:1px solid #FFF) or (display: astronauta){

/* ... */

7. }
9. /* El resultado es falso */
10. @supports (border: astronauta) or (display: astronauta){

/* ... */

11. }

En el caso anterior veíamos que al ser una de las dos propiedades falsas el resultado era falso, pero en este caso, al ser border una propiedad el resultado es verdadero.

Posibles usos

Tras la teoría aguarda la práctica y ahora voy a mostraros unos posibles usos "razonables", que podrían ser detectar que el navegador admite animaciones con un par de prefijos y que admita sombras en el texto.
En este ejemplo, de cumplirse se establecería una animación.

1. @supports ((animation: Ejemplo 10s infinite ease) or (-webkit-animation: Ejemplo 10s infinite ease)) and (text-shadow:0px 0px 5px #000){

animation: ejemplo 10s infinite ease;


2. }

Resumen

@supports está actualmente en una fase muy temprana de desarrollo, por lo que no sería útil ponerlo en uso, pero es interesante ver que nos traerá el futuro entorno al diseño y desarrollo web.