WordPress Inclusivo 11: CSS3 Custom Properties

Hasta ahora usaba SASS con Foundation, pero resulta que acabo de descubrir que CSS3 ya incorpora variables.

Tienen como ventaja no precisar de precompilador alguno, por tanto, aprovecharemos para explorar su uso, limitandonos al standard tanto como sea posible a la hora de crear nuestro theme (y de paso que os lo cuento, aprendo a usarlas).

¿Qué son las Custom Properties?

Para muestra un botón, abre tu fichero styles.css e incorpora el código siguiente:

...
:root {
  /* Fuentes */
  --fuentePrincipal: 'Open Sans', cursive;
  --fuenteSecundaria: 'Open Sans', sans-serif;
  --fuenteTextos: 'Open Sans', sans-serif;

  /* Colores */
  --colorPrimario: red;
  --colorSecundario:black;
  --colorNeutroOscuro: grey;
  --colorNeutroClaro: grey;
}
...

Es un ejemplo con diversas variables css, que son las llamadas “Custom Properties” al fin y al cabo son parecidas a Constantes, se definen y luego pueden usarse en el ámbito en que se definen (en este caso :root, es decir toda la hoja de estilo).

Una forma extremadamente sencilla de definir colores o tipos de letra de un modo que facilita enormemente el mantenimiento posterior.

¿Como se usan después las properties?

Su uso es bastante simple, imaginemos que queremos definir el color de fuente para un h1, y establecer el que hemos llamado “primario”. Haríamos lo siguiente:

...
h1 {
  color: var(--colorPrimario);
}
...

Y ya está, si el cliente nos pide posteriormente ajustar ese color primario porque ha ajustado la imagen corporativa y el Pantone ha cambiado, con ajustar el valor en la custom property, todo listo.

En caso de que – por ejemplo – trabajemos en una funcionalidad que debe salir hoy, pero sabemos también que la variable asociada aún no esta definida (pero lo estará) podemos usar un valor por defecto que asigna el valor en caso de que la variable aún no exista, y que de forma automática aplique el valor una vez haya sido creada dicha variable:

...
div.funcionalidad {
  border: var(--divBorderSize,2px);
}
...

Esto cubriría nuestra necesidad y al tiempo evitaría tener que revisar todo el código cuando se asigne la variable, a priori tiene sentido usar este valor por defecto para desarrollo, pero en producción, al menos sobre el papel, no debería ser necesario valor por defecto alguno.

Sobreescritura de variables

Hay algo interesante que podemos hacer y que es útil cuando la definición de una variable puede tener diversas interpretaciones, por ejemplo, imaginemos un escenario en el que la web tenga modo oscuro, y este modo esté implementado mediante una clase en html que se incorpora y elimina mediante javascript, podríamos hacer algo así:

...
:root {
  --colorFuente: black;
  --colorFondo: white;
}

html.modoOscuro {
  --colorFuente: white;
  --colorFondo: black;
}

html {
  background-color: var(--colorFondo);
  font-color: var(--colorFuente);
}
...

Cálculos con variables

Tengo que probar más a fondo (a priori me ha funcionado), y lo trataré cuando definamos, por ejemplo los tamaños de fuente de la web, pero a más de poder asignar custom properties en base a selectores , se pueden realizar cálculos sencillos, como se puede leer en este documento de W3C.

Según esa forma de trabajar, podemos hacer algo así:

...
:root {
  --fuenteBase: 1.5rem;
}

h1 {
  font-size: calc(var(--fuenteBase) + 1rem);
}

h2 {
  font-size: calc(var(--fuenteBase) + .9rem);
}

Esto es extraordinariamente útil para poder definir y posteriormente mantener las características de nuestro theme sin tener que hacer búsquedas y reemplazos interminables.

Se me ocurren incluso cuestiones más allá del modo oscuro para mejorar la accesibilidad, pero vayamos por partes, ¡más la próxima semana!

Quizá te interese ...

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>