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.
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
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.
Antes de empezar debemos tener en cuenta una serie de requerimientos. Las cuales veremos a continuación:
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:
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.
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.