PAINT API

Por norma general, el flujo natural de la creación de una página web toma como punto de partida un análisis visual previo, donde buscamos responder preguntas que aún no han sido formuladas. Un diseño donde debemos buscar una interfaz limpia que facilite la interactuación del usuario y al mismo tiempo marque la diferencia. Esta apariencia que el diseñador le da suele venir inspirada en la naturaleza de las cosas que le rodean, pero si esto es así, y en la naturaleza no existen las formas rectas, ¿por que si existen en la web?

CSS, un lenguaje que nos da un sinfín de posibilidades convirtiendo el diseño en algo real. Sin embargo, hasta no hace mucho no nos permitía salir de las formas cuadradas que alteramos por medio de ciertas propiedades, ya que en HTML toda etiqueta es un cuadrado o rectángulo. Pero y si os dijera que desde hace algún tiempo podemos crear formas dispares sin depender de los tan conocidos “hacks”, donde necesitamos de varios DIV o contenedores que posicionamos en absoluto para establecerlos en una disposición concreta.

La solución llega de la mano de CSS Houdini que ya introducimos en este articulo, una serie de APIs que nos da un mayor control del CSS que renderiza el navegador. La primera pieza de este puzzle es CSS Paint API.

En cada nueva característica CSS, siempre se ha cernido una sombra sobre ella, la de tener que esperar a que todos los navegadores fuesen compatibles. Pero ¿y si pudiésemos acortar ese proceso? Paint API nos permite tomar un atajo extendiendo CSS por medio de javascript para poder generar nuestras propias propiedades CSS.

Estas características CSS personalizadas se definen en Worklets, que únicamente son archivos JavaScript que se implementan en nuestro sitio web.

 

¿QUE SON LOS WORKLETS?

 

Antes de entrar en el detalle, debemos sentar las bases de que es Javascript. Un lenguaje de programación enfocado para crear paginas web dinámicas.

Javascript, es un lenguaje mono-hilo, esto quiere decir que la interpretación de nuestro código se atiende por un único hilo de ejecución. Sin embargo, existe la especificación Web Workers, que nos permite ejecutar código en otros hilos de ejecución, esto no quiere decir que Javascript sea multi-hilo, sino que es una característica del navegador, a la que se puede acceder por medio de Javascript permitiendo la ejecución de varias tareas en paralelo.

Una vez claro esto, un Worklet es una versión ligera de la API Web Workers y permite a los desarrolladores acceder aquellas secciones de bajo nivel de la canalización del renderizado, donde por medio de Javascript podemos realizar el procesamiento de gráficos o audios donde se requiere un alto rendimiento

 

 

CSS Paint API

 

Como podéis imaginar por el nombre, esta API se encarga del proceso de renderizado de pintura en el navegador. ¿Qué hace exactamente? Crea una función CSS personalizada para dibujar una imagen de fondo con Javascript.

 

 

¿Por qué necesitamos CSS paint API? Existen ciertas casuísticas que se repiten una y otra vez en el día a día del desarrollo donde esta API es realmente útil.

 

  • Polyfills CSS: Siempre podríamos crear un polyfill para CSS con javascript, pero no es una buena idea en caso de usabilidad y rendimiento. Podéis encontrar más información del tema en este enlace.
  • Reducir el número de nodos en el DOM: En ocasiones necesitamos crear nodos falsos como span o pseudo-elementos para generar efectos que de otra manera no podríamos. Algunas animaciones precisan de estos “hacks” para funcionar.
  • Formas con fondos dispares: Dado que somos nosotros quienes definimos las líneas de la propia pintura del elemento, podemos crear patrones que de otra manera no seria posible hacer.

Antes de empezar debemos tener en cuenta una serie de requerimientos. Las cuales veremos a continuación:

  • Deberemos lanzar un servidor http.
  • Por el momento no es posible establecer puntos de ruptura o usar un debugger, aunque podemos utilizar console.log() para la depuración de nuestro código.

En adelante veremos un ejemplo guiado estableciendo los pasos que debemos seguir para utilizar esta API. Pero previamente, introduciremos el ejemplo aportando las posibles soluciones por medio de la manera tradicional en CSS, de esta manera comprobaremos el autentico potencial de dicha API.

 

Como se puede apreciar, el elemento cuenta con una forma de trapecio rectangular. Desde un primer momento ya sabemos que deberemos utilizar varios nodos añadidos para obtener tanto la forma como el sombreado.

 

 

 

Aunque desde hace algún tiempo podríamos utilizar la propiedad clip-path que nos permite crear un polígono con una forma concreta, pero igualmente tendríamos que generar al menos un nodo para crear el sombreado. Además polygon() es un ejemplo más de lo que nos aporta CSS Paint API, ya que dicha función es victima de uno de los bloqueos del día a día en el desarrollo web, la compatibilidad entre navegadores.

 

 

 

Una vez presentado el problema al que nos enfrentamos, veremos de que manera CSS Paint API nos plantea la solución. En primer lugar, deberemos verificar el soporte CSS Paint API a partir de Javascript.

 

 

 

Lo siguiente seria hacer misma verificación en nuestro CSS:

 

 

 

Una vez hecho esto, en nuestro archivo Javascript llamado worklet.js crearemos una clase que pasaremos al método registerPaint, el cual forma parte de la propia CSS Paint API. A continuación, detallaremos los métodos que nos aporta registerPaint:

 

  • inputProperties: Un conjunto de propiedades personalizadas de CSS de las que nuestro Worklet realizará un seguimiento. Esta matriz representa las dependencias de un worklet de pintura.
  • inputArguments: Una matriz de argumentos de entrada que se pueden pasar desde la función api desde dentro del CSS.
  • contextOptions: Permite o no la opacidad de los colores. Si se establece en false, todos los colores se mostrarán con total opacidad.
  • paint: Destaca por ser la función principal que puede recibir los siguientes argumentos:
    • ctx: Contexto de dibujo 2D, casi idéntico al contexto de dibujo 2D de Canvas API.
    • size: un objeto que contiene el ancho y el alto del elemento. Los valores están determinados por el proceso de representación del diseño. El tamaño del lienzo es el mismo que el tamaño real del elemento.
    • properties: variables de entrada definidas en inputProperties
    • args: una matriz de argumentos de entrada pasados en la función

 

 

A continuación, vemos como el HTML generado no inserta nuevos nodos a diferencia de la forma tradicional, y lo que es más importante, se olvida de la compatibilidad entre los navegadores.

 

 

 

Conclusiones

 

En el transcurso del articulo hemos visto las ventajas de CSS Paint API con una comparativa de las posibilidades que tiene frente a la manera tradicional, 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 articulo es un capitulo de una serie donde recorreremos las posibilidades que tienen cada una de ellas compatibles con cualquiera de los navegadores existentes.