PROPERTIES AND VALUES API

Vivimos en un mundo de constante cambio donde las cosas no son lo que parecen ni parecen lo que son. En nuestro día a día somos testigos de esta reactividad en todo lo que nos rodea, pues todo fluye y nada permanece. Heráclito de Éfeso, el filósofo griego lo sabía bien, pues mantenía que el mundo es víctima de un proceso de continuo nacimiento y destrucción al que nada escapa, donde el cambio se establece como un punto de mejora de uno mismo, la evolución.

Este dinamismo supuso un antes y un después en la web, donde hace algunos años con la llegada de Javascript dejó a un lado esas páginas web estáticas, las cuales no podían ofrecer nada más allá que meros anuncios o visualización de información nada interactuable.

Properties and Values API es la segunda API de la serie que engloba CSS Houdini, anteriormente hablamos de Paint API que nos permitía crear y estilizar una etiqueta extendiendo CSS con Javascript. Properties and Values API nos permite hacer uso de las Custom Properties de CSS para generar ese dinamismo en la web.

¿Pero qué son las Custom Properties? Son variables accesibles en todo el documento CSS que incluso podemos acceder a ellas por medio de Javascript, y lo que es más importante, de forma nativa. Entre sus particularidades destacan:

  • Son case sensitive, en otras palabras, distinguen entre mayúsculas y minúsculas.
  • Se permite añadir un fallback al llamar la variable, de manera que al no encontrar el valor inicial podemos poner un segundo que sustituya al primero en caso de no existir.
  • Es compatible con todos los navegadores, excepto IE que podemos insertar polyfills para solucionar esta incompatibilidad
  • Tienen scope y herencia, aunque son alcanzables en múltiples archivos CSS, simplemente teniendo en cuenta la herencia del elemento donde hemos especificado la declaración
  • Se pueden inspeccionar desde el navegador, por lo que se insertan en el DOM
  • Las variables también son alcanzables desde los estilos en línea, de manera que nos podemos beneficiar al usar librerías como react

Variables CSS y Custom Properties

 

Esta nueva API toma como punto de partida el dinamismo que nos ofrecen las custom Properties. A continuación, haremos un recorrido por la misma por medio de un ejemplo práctico de cómo utilizarla reutilizando el que hicimos en el artículo de Paint API.

Para empezar, deberemos verificar el soporte CSS Paint API a partir de Javascript.

if (('paintWorklet' && 'registerProperty') in CSS) {
  CSS.paintWorklet.addModule('scripts/worklet.js');
  // Registramos la custom property
  window.CSS.registerProperty({
    name: '--my-color', // Nombre de la custom property
    syntax: '<color>', // Propiedad CSS que modificaremos
    inherits: false, // Deshabilitamos la herencia
    initialValue: 'green', // Valor inicial
});
} else {
document.querySelector('htm1').classList.add('not-support');
}

En nuestro worklet, accederemos a la Custom Property y haremos una modificación de manera que el color de fondo vendrá dado por esta variable. Haremos uso de la función inputProperties dada por registerPaint que nos permite acceder a la Custom Property.

class myCustumerPaint{
  static get inputPrnper†ies() {
    return ['--my-color']
}
  paint (ctx, size, properties) {
    // Recogemos el valor de la custom property
    let myColor = prnperties.get('--my-color').toString();
    // Establecemos el color que usaremos para dcfífiir el color de fondo del elemento
    ctx.fi1lStyle = myColor;

    // Sentencia que define el inicio de pintado
    ctx.beginPath();

    // Establecemos el eje x e y donde iniciaremos el trazo
    ctx.moveTo(0, 0);

    ctx.1ineTo(size.width, 0);
    ctx.lineT0(size.width - 20, size.height);
    ctx.lineTo(0, size.height);
    ctx.fil1();

     // Establecenos el comportamiento de las capas
     ctx.g1obalCompositeOperation = 'source-atop';
	 
     // Aplicamos el corlor de la nueva capa un grado de 0.35 de opacidad
     ctx.fillStyle = 'rgba(0,0,0,.35)';
	 
     // Iniciaremos un nuevo trazo donde se visualizará el efecto de sombreado
     // estableciendo la posición y ancho
     ctx.beginPath();
     ctx.moveTo(0, size.height);
     ctx.1ineTo(size.width, size.height - 12);
     ctx.lineTo(size.width, size.height);
     ctx.fill();
  }
}

registerPaint('shape-bg', myCustumerPaint);

Una vez que tenemos registrada nuestra variable únicamente nos quedaría reasignar dicha variable. En este caso cuando pasemos el ratón por nuestra etiqueta HTML cambiará el color de fondo.

.not-support body::before{
  content: 'Not support';
  top: 50%;
  right: 48%;
  display: block;
  font-size:50px;
  position: absoluta;
}

.paragraph {
  font-size: 30px;
  line-height: 1.83;
  width: max-content;
  padding: .25em 10px;
  padding-right: 30px;
}

.paragraph:hover{
  --my-color:  orange;
}

@supports (background: paint(shape-bg)) {
  .api-css-paint {
	background: paint (shape-bg);
	transition: --my-color .5s ease;
  }
}

Conclusiones

En el transcurso del artículo hemos visto las ventajas de Properties and Values API y el poder de dinamismo que tiene utilizando tanto Javascript como CSS, podéis seguir el ejercicio a partir del siguiente repositorio de GitHub.

Como hablamos inicialmente, esta API forma parte del Proyecto Houdini, por lo que este artículo es un capítulo de una serie donde recorreremos las posibilidades que tienen cada una de ellas compatibles con cualquiera de los navegadores existentes.