La API CSS Paint es extremadamente emocionante, no solo por lo que es, sino por lo que representa, que es el comienzo de una época muy emocionante para CSS. Repasemos qué es, por qué lo tenemos y cómo empezar a usarlo.
¿Qué es la API de pintura CSS?
La API es solo una parte de un conjunto completo de nuevas especificaciones, todo bajo el paraguas de lo que se conoce como CSS Houdini. Houdini, en esencia, brinda a los desarrolladores un acceso de nivel inferior al propio CSS. En serio.
La API de CSS Paint le permite específicamente llamar a un paint() funcione donde normalmente escribiría un valor donde se espera una imagen. Un ejemplo común es el background-image propiedad, donde podría usar el url() función a un enlace a un archivo de imagen, como este:
area {
background-image: url('assets/myimage.jpg');
}La API de CSS Paint le permite llamar al paint() en su lugar, y pase un worklet de pintura que haya definido a través de JavaScript. Piensa en un poco de código que te permite dibujar programáticamente (prácticamente) lo que quieras. Y debido a que es JavaScript, también puede hacerlo dinámico. La API en sí es muy parecida a HTML5 <canvas> API (y veremos cómo funciona eso en un minuto).
Esto suena genial, pero complicado. Ya estoy feliz usando imágenes regulares…
¡Genial! No hay absolutamente nada de malo en usar imágenes regulares como lo has estado haciendo. El hecho de que algo sea nuevo y probablemente genial no significa que todos tengamos que empezar a usarlo para todo. Sin embargo, las imágenes son estáticas y la idea de generar algo dinámico es tentadora.
pensemos en linear-gradient por un momento. Es extremadamente poderoso. Quiero decir, echa un vistazo a estos. Pero, ¿te imaginas cuánto menos trabajo sería crear esos patrones en capas sin múltiples imágenes de fondo? No solo esto, sino que profundizar en la API CSS Paint también debería ayudarlo a comprender cómo se generan este tipo de imágenes durante el tiempo de ejecución, lo que podría ser realmente útil (y es algo que estamos a punto de hacer).
Qué pasa conic-gradient que aún no tiene soporte para el navegador (ahora hay algo de soporte, pero el punto que está tratando de hacer se destaca) … sin un polyfill, eso es. Aprovechar la API de Paint le permitiría crear un degradado cónico y algunas propiedades para cambiarlo de manera muy similar a la especificación real. Entonces, en realidad, estarías creando tu propio polyfill nativo. ¡Eso es bastante bueno!
Recuerde, todo esto es parte del grupo más grande de características de CSS Houdini. Aquí hay una cita de CSS Houdini Wiki:
El objetivo del CSS-TAG Houdini Task Force (CSS Houdini) es desarrollar conjuntamente funciones que expliquen la “magia” del estilo y el diseño en la web.
Suena bien, ¿verdad? Lo es y estas nuevas características están destinadas a permitir a los desarrolladores ampliar la funcionalidad de CSS en sí, proporcionando un mejor control, compatibilidad con navegadores cruzados y polirrelleno.
El proceso de estándares puede llevar un tiempo: desde proponer una nueva función CSS hasta escribir una especificación y hacer que los proveedores de navegadores implementen esta nueva especificación. Y dado que los desarrolladores a menudo están ansiosos por comenzar a usar una nueva función lo antes posible, debemos considerar que es posible que los navegadores heredados no la admitan y posiblemente cualquier cambio en la especificación si no se ha implementado por completo, y eso sin mencionar el matices típicos de la implementación entre navegadores. Houdini podría ayudar bastante con eso, permitiéndonos implementar la funcionalidad del navegador nosotros mismos mientras esperamos que los proveedores se pongan al día.
Philip Walton hace un gran trabajo al explicar estos beneficios de Houdini y más en este gran artículo sobre Smashing Magazine.
Puedes ver cómo Ana Tudor ya lo ha utilizado para crear animaciones complejas.
Entonces, ¿puedo usarlo ahora?
¡Usted puede! La API de CSS Paint solo es compatible con Chrome 65 en el momento de escribir este artículo, pero aquí hay un cuadro de soporte que se mantendrá actualizado con el tiempo:
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| sesenta y cinco | No | No | 79 | No |
Móvil / Tableta
| Android cromo | android firefox | Androide | iOSSafari |
|---|---|---|---|
| 96 | No | 96 | No |
Pero, todavía hay un camino por recorrer.
De todos modos, echemos un vistazo a cómo hacemos para crear el código para usarlo. Voy a dividir esto en tres etapas. Hay algunas características nuevas de JavaScript que usaremos en el camino, pero el código está ahí para usted y revisaremos cada una.
Paso 1: El CSS
Primero, debemos nombrar nuestro worklet y llamarlo en el CSS. voy a llamarlo awesomePattern, entonces mi CSS se vería así:
section {
background-image: url('fallback.png');
background-image: paint(awesomePattern);
};Estamos listos, pero nada va a pasar todavía.
Paso 2: El JavaScript
Ahora, necesitamos agregar nuestro worklet de pintura a nuestro JavaScript principal, que está cargando otro archivo JavaScript así:
CSS.paintWorklet.addModule('patternWorklet.js');Aún así, nada sucederá en este punto porque está dentro de nuestro patternWorklet.js archivo, donde se va a realizar todo el trabajo.
En patternWorklet.js, necesitamos registrar una clase de worklet de pintura:
registerPaint('awesomePattern', Shape);Entonces llamamos a la registerPaint() función y pasar lo que queremos llamar el worklet de pintura, en este caso awesomePattern, y luego una referencia a la clase que estamos a punto de escribir, en este caso Shape. Recuerde agregar esto después de la clase que vamos a definir a continuación. A diferencia de la elevación de funciones en JavaScript, debe definir clases antes de poder usarlas.
A continuación, vamos a utilizar la sintaxis de clases de ECMAScript2015 para escribir una clase que dibujará nuestro fondo para nosotros. Debido a que ahora está registrado como una clase de worklet de pintura, obtenemos algunas cosas gratis.
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();
}
}En el paint devolución de llamada, tenemos ctx, geom y properties. ctx es lo mismo que un contexto 2D que obtendríamos de un <canvas> elemento. (Bueno, casi: un <canvas> El elemento permite la capacidad de leer datos de píxeles, mientras que no puede hacerlo con la API CSS Paint.) Nos permite usar todos los mismos métodos para dibujar como lo haríamos si estuviéramos en un lienzo. En el ejemplo anterior, simplemente estoy dibujando un círculo con el arc función.
Los dos primeros valores de la arc son las coordenadas X e Y de donde se coloca el círculo, en píxeles, desde la parte superior izquierda del elemento. Pero, me gustaría que el círculo fuera central y aquí es donde el geom los datos son útiles. En realidad, está devolviendo el PaintSize, que es el tamaño del área que normalmente llenaría la imagen y podemos acceder width y height información, que es precisamente lo que necesito para que el círculo sea central:
Consulte Pen Simple Circle: CSS Paint API Example de Rumyra (@Rumyra) en CodePen.
Genial, pero este es un ejemplo bastante simple. Cambiemos el círculo por algo un poco más asombroso:
Consulte Pen Simple Circle: CSS Paint API Example de Rumyra (@Rumyra) en CodePen.
Aquí, he agregado un método a la clase llamado drawStar y hay un montón de funciones de lienzo que dibujan el logo de CSS-Tricks”.
Paso tres: propiedades personalizadas
¡Podemos hacer más! Podemos aprovechar el poder de las propiedades personalizadas de CSS (también conocidas como variables). Todos hemos estado muy entusiasmados con ellos y esta es una de las razones.
Digamos que quiero poder cambiar el tamaño o el color de nuestro logotipo de CSS-Tricks. Bueno, podemos poner esos parámetros como propiedades personalizadas en nuestro CSS y acceder a ellos con la tercera pieza de datos de devolución de llamada, properties.
Agreguemos un --star-scale propiedad a nuestro CSS, lo que eventualmente hará que nuestro logotipo sea más grande y más pequeño, y un --star-color propiedad para cambiar fácilmente el color del logotipo directamente en el CSS.
section {
--star-scale: 2;
--star-color: hsla(200, 50%, 50%, 1);
background-image: paint(awesomePattern)
};De vuelta en nuestra clase de worklet de pintura, necesitamos acceder a esas propiedades personalizadas. Esto lo hacemos con el inputProperties método, que nos da acceso a todas las propiedades CSS y sus valores dados:
static get inputProperties() { return ['--star-scale','--star-color']; }Ahora, podemos acceder a ellos dentro de la paint método:
const size = parseInt(properties.get('--shape-size').toString());…y usa ese valor dentro de nuestro código. Entonces, si cambiamos el --star-scale o --start-color propiedades dentro de nuestro CSS, ¡actualizará el fondo!
También vale la pena señalar que todo su CSS habitual background propiedades funcionan como se esperaba, como background-size y background-repeat. ¡Lo cual es genial saberlo y aún así es realmente útil!
Conclusión
Esto es algo bastante poderoso, y no solo para imágenes de fondo personalizadas. Imagine un borde medio o doble en su elemento. Normalmente puede usar el ::before o ::after pseudo-elementos, o tal vez un ingeniosamente pensado box-shadow. Bueno, podrías implementar eso (y más) con la API CSS Paint y el border-image propiedad.
Esta API realmente reúne muchas características geniales, como worklets, clases ECMAScript2015 y canvas. Además, nos brinda toda la capa de interacción que viene con JavaScript. Puede agregar fácilmente eventos para actualizar las propiedades personalizadas y, por lo tanto, la imagen en sí, como este ejemplo de Surma, que aprovecha el evento de clic para comenzar a actualizar las propiedades dentro de un requestAnimationFrame función para crear una animación cada vez que el usuario hace clic en un botón. Incluso tiene en cuenta las coordenadas del clic.
Esto puede parecer un poco complicado a primera vista, pero echemos un vistazo a algunas de las otras partes de la suite de Houdini que estamos a punto de encontrar:
- La API de diseño de CSS, que debería permitirnos hacer algo como
display: layout('myCustomLayout'), para el cual el ejemplo típico sería un diseño de tipo de mampostería personalizado, pero el alcance es mucho más. - La API de propiedades y valores de CSS que nos permite especificar tipos para propiedades personalizadas.
- La API CSS Animation Worklet, que toma el procesamiento de animación del hilo principal, lo que debería dar como resultado animaciones suaves como la seda.
Entonces, independientemente de si está realmente interesado en esta nueva característica específica o no, es parte de un montón de nuevas tecnologías que desbloquearán una gran cantidad de poder. ¡Mira este espacio porque CSS está a punto de volverse aún más increíble!