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:
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;
}
}
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.