Cómo aplicar Custom Properties con Sass en IE11

En un post anterior hablamos sobre cómo crear y aplicar diferentes aspectos o temas en CSS utilizando custom properties, y comentamos que el soporte era variable según el navegador. Esto es una forma muy elegante de decir que todos lo saben interpretar menos, ¡oh, qué sorpresa! IE11.

Añadir soporte a Internet Explorer 11

Para que éste y otros navegadores puedan interpretar las variables de CSS podemos optar por diferentes enfoques, por ejemplo:

  1. Añadir un polyfill escrito en javascript
  2. Utilizar un plugin de postcss
  3. Crear una alternativa con Sass

Como la solución 1 y 2 es cuestión de googlear buscarlo a través de duckduckgo y seguir la implementación de la documentación de turno, vamos a hacerlo nosotros mismos porque escribir nuestras propias herramientas o utilidades nos ayudará a comprender mejor el lenguaje y mejorar nuestro código. No dependeremos de desarrollos externos, lo que significa que podremos hacer un código que se ajuste a nuestras necesidades, no tendremos que cargar recursos de terceros, y en última instancia, quizá, queramos compartirlo con alguien.

Empezando por el principio

Captura del inspector de código de Internet Explorer 11

Como se ve en la imagen (que es una captura del inspector de elementos de Internet Explorer 11), éste no aplica la propiedad background-color porque no la comprende. De nada sirvió añadir el fallback en la declaración porque el problema es que no sabe manejar la función var() y no que no exista el nombre de la variable. Por tanto necesitamos hayar un método para traducirlo a background-color: $primary-color; pero sin dejar de usar custom properties.

Enfoque

Vamos a utilizar para nuestro provecho la forma en la que los navegadores web leen los selectores de CSS. Cuando una propiedad no es entendida es ignorada y se pasa a la siguiente. Así que vamos a construir una declaración de este tipo:

.class {
    color: #2acba0;
    color: var(--primary-color, #2acba0);
    font-size: 2rem;
}

Es cierto que añadimos una línea extra por cada uso de cada variable pero con el minimizado y la caché del servidor no supone un coste tan alto y es mejor solución que añadir scripts externos.

Podríamos agrupar todas las declaraciones bajo la regla @support ya sea a mano o con postcss pero el código resultante sería mayor porque tendríamos que escribir de nuevo cada selector.

El código

La idea es pasar un mapa a un @mixin que reciba el conjunto ‘propiedad - valor’ tantas veces como propiedades queremos aplicar.

Este mixin comprueba que ha recibido un mapa y de no ser así muestra un mensaje en la consola de la compilación de Sass para alertar al desarrollador de que no está haciendo un uso correcto e indica qué ha de hacer para corregirlo.

En este caso hemos permitido el formato de lista aunque mostramos igualmente el mensaje advirtiendo de que no es el uso correcto.

El mixin recorre tantos items como hay en el mapa y guarda la propiedad y el valor para usarlo después. A continuación consulta mediante una @function si el valor recibido existe en la declaración de variables de Sass. Si el valor no existe, alertamos nuevamente por la consola pero devolvemos el color ‘lime’ porque es muy llamativo en pantalla y atípico en una paleta de color.

Con el valor de vuelta, es cuestión de construir la regla de CSS para los navegadores sin soporte y después utilizar aplicar la custom property.

Limitaciones

Existen 2 limitaciones a tener en cuenta. Si cambiamos el valor de una variable en un selector, el navegador que no soporta las custom properties no mostrará el nuevo valor, aunque modificando un poco el mixin podríamos resolverlo.

La otra limitación es si el valor se cambia con javascript, que ocurrirá igual, el navegador sin soporte no será capaz de reflejar el cambio.

Demo

Puede que no tengáis IE 11 a mano ni a desmano. Si sois muy afortunados no sabréis qué significa IE… Pero en el mundo real aún se pide ésta compatibilidad así que aquí esta la demo con el ejempplo completo, aunque la mejor forma de verlo es en producción porque codepen no soporta IE11 xD

Si te ha parecido interesante

Si tienes alguna duda o quieres discutir sobre esto, si el contenido o nuestros perfiles te parecen interesantes y crees que pdemos hacer algo juntos, no dudes en ponerte en contacto con nosotros a través de twitter o por email