API de pintura CSS

Según el autor del material, cuya traducción publicamos hoy, la API de pintura CSS es una tecnología increíblemente interesante. Además, estamos hablando no solo de sus capacidades actuales, sino también de los fenómenos que se le presentan, y de que su apariencia marca el comienzo de cambios muy notables en el mundo CSS. Aquí hablaremos sobre la API de CSS Paint y las razones de su aparición, y hablaremos sobre cómo usarla.

¿Qué es la API de pintura CSS?

La API en cuestión es solo una pequeña parte del nuevo conjunto de especificaciones que se están desarrollando como parte del proyecto CSS Houdini. Al describir brevemente este proyecto, su esencia se reduce al hecho de que brinda a los desarrolladores acceso de bajo nivel a los mecanismos internos de CSS.

La API de pintura CSS le permite llamar a la función paint() en situaciones en las que, en condiciones normales, el trabajo se realizaría, por ejemplo, con un cierto valor que describe algún tipo de imagen. Un ejemplo común de esto es la propiedad de background-image , cuando trabaja con la que puede usar la función url() para pasarle al sistema un enlace al archivo de imagen:

 area { background-image: url('assets/myimage.jpg'); } 

La API de pintura CSS le permite llamar, en lugar de una función similar, a la función paint() y pasarle el llamado worklet, descrito por JavaScript. Un vorklet puede ser percibido como una pieza de código que le permite a un desarrollador dibujar programáticamente casi cualquier cosa que quiera. Y, como estamos hablando de JavaScript, la imagen se puede dinamizar. Por sí sola, esta API es muy similar a la API HTML5 Canvas, y ahora hablaremos sobre cómo funciona todo.

Características de API de pintura CSS

Si ahora tiene la sensación de que todo esto suena bien, pero parece complicado, y cree que se siente bastante cómodo usando imágenes ordinarias, tenga en cuenta que las imágenes ordinarias no pierden su relevancia con el advenimiento de la nueva tecnología. Usarlos, como siempre lo hacían, es perfectamente normal. El hecho de que algo nuevo haya aparecido en el horizonte, y probablemente sea prometedor, no significa que todos de inmediato necesiten usarlo para resolver todos los problemas existentes. Sin embargo, las imágenes ordinarias son estáticas. La nueva API atrae con la idea de crear imágenes dinámicas.

Pensemos en la función CSS de gradiente lineal . La cosa es muy poderosa. Echa un vistazo a esto, por ejemplo. Pero, ¿te imaginas lo fácil que sería lograr el mismo efecto formado por la superposición de capas si no tuvieras que usar muchas imágenes de fondo? Sin embargo, este no es el único punto. Si profundiza en la API de CSS Paint, puede comprender cómo se crean esas imágenes durante la ejecución del programa, y ​​esto puede ser muy útil (de hecho, esto es lo que planeamos hacer aquí).

¿Qué pasa con la función CSS de gradiente cónico ? Se puede decir que todavía no es compatible con navegadores sin polyfill. El uso de la nueva API le permite crear gradientes cónicos, ajustar sus parámetros, que no son particularmente diferentes de lo que está en la especificación. Todo esto significa que, en la práctica, utilizando la nueva API, puede crear su propio polyfill nativo. Y esto es simplemente maravilloso.

Tenga en cuenta que todo esto forma parte de un grupo más grande de características conocido como CSS Houdini. Esto es lo que dice la documentación del proyecto al respecto: "El objetivo de CSS-TAG Houdini Task Force (CSS Houdini) es desarrollar conjuntamente mecanismos que rompan el misterio de la tecnología de diseñar páginas web y construir sus diseños".

Suena bien, ¿verdad? Y, de hecho, estos nuevos mecanismos están destinados a permitir que los desarrolladores amplíen la funcionalidad del CSS en sí, dándoles mejores herramientas de estilo, compatibilidad entre navegadores y la capacidad de crear polyfills.

El proceso de estandarización de nuevas tecnologías puede llevar algún tiempo. Primero, se hace una propuesta para una nueva característica CSS. A continuación, se escribe una especificación, se producen otros procesos. Como resultado, los fabricantes de navegadores están implementando nuevas especificaciones. Y, dado que los desarrolladores a menudo no pueden esperar para comenzar a usar las nuevas funciones lo antes posible, deben tener en cuenta el hecho de que los navegadores antiguos pueden no ser compatibles con las innovaciones, y que si alguna especificación aún no está completamente implementada, puede que, en el transcurso de su desarrollo, seriamente cambio. Quizás no haya nada que hablar sobre los matices típicos de la implementación de diferentes tecnologías en diferentes navegadores. El proyecto Houdini puede llegar bastante lejos para mitigar estos problemas, permitiéndonos desarrollar la funcionalidad del navegador por nuestra cuenta, usarlo y esperar con calma a que los fabricantes de navegadores implementen ciertas funciones. Aquí hay un par de materiales sobre este tema. El primero está dedicado a las fortalezas de Houdini, y el segundo es usar las capacidades de este proyecto para crear animaciones complejas.

Soporte para CSS Paint API por parte de los navegadores

¿Puedo usar la API de CSS Paint hoy? Podemos dar una respuesta positiva a esta pregunta, aunque debe tenerse en cuenta que, lejos de todos los navegadores, admiten esta tecnología. Para obtener información de soporte para esta API, puede usar el recurso caniuse.com .


Soporte para la API de CSS Paint por varios navegadores (julio de 2018)

Como puede ver, esta API solo es compatible con Chrome hasta ahora. Pero sea como sea, hablemos sobre cómo usarlo. Cubriremos las construcciones de software necesarias para que la nueva API funcione. Esto incluye nuevas funciones de CSS y algunos mecanismos de JavaScript bastante recientes. Nuestro ejemplo se dividirá en tres pasos.

Paso # 1: CSS

Recuerde que para crear una imagen usando la API CSS Paint, los widgets son fragmentos de código JS. Por lo tanto, para empezar, debemos darle un nombre al worklet y llamarlo en CSS. awesomePattern . Como resultado, el CSS se verá así:

 section { background-image: url('fallback.png'); background-image: paint(awesomePattern); }; 

Se han completado los preparativos preliminares, pero hasta que el resto de nuestro ejemplo esté listo, todo esto no funcionará.

Paso # 2: JavaScript

Ahora necesitamos describir el worklet usando JS. Aquí se muestra cómo, en el script principal, se carga otro script que implementa la funcionalidad que necesitamos.

 CSS.paintWorklet.addModule('patternWorklet.js'); 

En esta etapa, nuevamente, no pasa nada, ya que lo más interesante está oculto en el archivo patternWorklet.js .

En el archivo patternWorklet.js necesitamos registrar la clase del vorklet:

 registerPaint('awesomePattern', Shape); 

Aquí llamamos a la función registerPaint() y le pasamos lo que consideramos un worklet, en este caso awesomePattern . Además, le pasamos a esta función un enlace a la clase que escribiremos, en este caso, Shape . Este comando debe agregarse después de la declaración de la clase correspondiente. Al declarar y usar clases, no puede confiar en algo como un mecanismo para generar declaraciones de funciones. Antes de poder usar una clase, debe declararla.

A continuación, vamos a utilizar la sintaxis para declarar las clases de ECMAScript 2015 y escribir una clase que dibuje la imagen de fondo. Dado que esta clase ahora está registrada como una clase de clase trabajadora, podemos usar algunos mecanismos especiales que estarán disponibles automáticamente en ella.

 class Shape { paint(ctx, geom, properties) {   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc( 200, 200, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath(); } } 

La devolución de llamada paint() tiene los parámetros ctx , geom y properties . El parámetro ctx es el mismo que el contexto de representación 2D que se puede obtener del <canvas> . Bueno, es casi lo mismo. El hecho es que el <canvas> permite leer datos de píxeles, pero la API de CSS Paint no lo permite. A pesar de las diferencias, usando ctx , podemos usar los mismos métodos de salida gráfica que se usan cuando se trabaja con el <canvas> . En este ejemplo, usando la función arc() , dibujamos un círculo.

Los primeros dos valores pasados ​​a la función arc() son las coordenadas X e Y del centro del círculo, en píxeles, en relación con el origen ubicado en la esquina superior izquierda del elemento. Sin embargo, quiero que el círculo esté en el centro del elemento. Para resolver este problema, el parámetro geom es útil para nosotros. Da acceso al objeto PaintSize , que es una descripción de la configuración de la imagen. En particular, al referirnos a él, podemos leer los parámetros de width y height , y esto es exactamente lo que necesitamos para centrar el círculo.

Como resultado, llegamos a este código:

 class Shape { paint(ctx, geom, properties) {     let x = geom.width/2;   let y = geom.height/2;   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc(x, y, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath();   } } registerPaint('awesomePattern', Shape); 

Puede ver la versión funcional del ejemplo en CodePen . Estrictamente hablando, esto es lo que genera este código.


Círculo creado con las API de CSS Paint

Todo esto es bueno, pero nuestro ejemplo es muy simple. En lugar del círculo habitual, dibujemos algo más interesante. Por ejemplo, como un asterisco, el logotipo del sitio web css-tricks.com.


Asterisco creado con API de pintura CSS

Aquí hay un proyecto CodePen que le permite hacer esto.

Cuando observe el código JS para este proyecto, preste atención al método drawStar() y a las muchas funciones que se utilizan al trabajar con el <canvas> .

Paso # 3: Propiedades CSS personalizadas

Usando nueva tecnología, podemos ir mucho más allá de dibujar círculos y estrellas. Podemos observar las potentes funciones de las propiedades (variables) personalizadas de CSS . Ellos, por cierto, incluso por sí mismos, son muy interesantes. En nuestro caso, resultan ser especialmente útiles.

Supongamos que queremos poder cambiar el tamaño o el color de un logotipo creado previamente. Estos parámetros se pueden colocar en el código CSS en forma de propiedades personalizadas, y luego usarlos en el programa a través del tercer parámetro, que se pasa a la devolución de llamada paint() . Se trata del parámetro de properties .

--star-scale propiedad --star-scale a nuestro código CSS, que está dirigido a controlar el cambio de tamaño de la imagen, y la propiedad --star-color , que se usa para organizar el cambio de color del logotipo directamente en CSS. Esto es lo que tenemos:

 section { --star-scale: 2; --star-color: hsla(200, 50%, 50%, 1); background-image: paint(awesomePattern) }; 

Ahora de vuelta a la clase de tela de trabajo. Aquí necesitamos interactuar con las propiedades del usuario descritas anteriormente. Esto se hace utilizando el método inputProperties , que nos da acceso a todas las propiedades CSS y sus valores asignados.

 static get inputProperties() { return ['--star-scale','--star-color']; } 

Ahora puedes trabajar con ellos en el método paint() :

 const size = parseInt(properties.get('--shape-size').toString()); 

Naturalmente, los valores obtenidos se pueden usar en el código responsable de la formación de la imagen. Esto lleva al hecho de que si, en el código CSS, cambiamos el valor de la --star-scale o --start-color , esto afectará inmediatamente el aspecto de la imagen.


La influencia de las propiedades CSS personalizadas en la imagen terminada

Esta funcionalidad se implementa en el mismo proyecto CodePen que mencionamos anteriormente.

Por cierto, vale la pena señalar que cuando se usa la nueva API, todas las propiedades CSS habituales relacionadas con la configuración del fondo de elementos, como background-size y background-repeat , funcionarán de la misma manera que antes. No han perdido relevancia.

Resumen

El CSS Paint API es una tecnología muy poderosa cuyas capacidades no se limitan a la creación de imágenes de fondo.

Imagine que el elemento debe tener un borde especial, por ejemplo, uno que no sea completamente visible o doble. Quizás para lograr tales efectos, usualmente usas los pseudoelementos ::before o ::after , o tal vez un box-shadow especialmente configurado. Los bordes (y mucho más) se pueden implementar utilizando la API de pintura CSS y la propiedad de border-image .

La API de CSS Paint reúne muchas características excelentes, como widgets, clases ECMAScript 2015 y las características del <canvas> . Además, proporciona al desarrollador un software de gestión de imágenes basado en JavaScript. Por ejemplo, utilizando el mecanismo de eventos, puede organizar la actualización de propiedades personalizadas, lo que significa la imagen en sí, como, por ejemplo, aquí , donde el evento click inicia el proceso de actualización de propiedades en la función requestAnimationFrame , que le permite crear una animación cada vez que el usuario hace clic en el botón. Además, incluso las coordenadas del cursor del mouse cuando hace clic se tienen en cuenta.

A primera vista, todo esto puede parecer un poco confuso, pero echemos un vistazo a algunas otras partes del proyecto Houdini con las que podemos encontrarnos:

• La API de diseño CSS permite al desarrollador hacer algo como display: layout('myCustomLayout') . Un ejemplo típico es la creación de sus propios diseños de estilo de mampostería, pero el rango de uso de esta función es mucho más amplio.
• La API de propiedades y valores de CSS le permite establecer tipos de propiedades personalizadas.
• La API CSS Animation Worklet empuja las operaciones de procesamiento de animación más allá de la transmisión principal, lo que debería traducirse en animaciones perfectamente fluidas.

Como resultado, podemos decir que, literalmente ante nuestros ojos, está surgiendo tecnologías que abren muchas nuevas oportunidades para los desarrolladores web. Los procesos de estandarización e implementación en los navegadores no son tan rápidos, pero posiblemente tendrán un tremendo impacto en todo lo relacionado con el diseño de las páginas web.

Estimados lectores! ¿Qué áreas de la aplicación API de CSS Paint le parecen más interesantes?