Potenciar tu CSS con worklets de pintura de Houdini está a solo unos clics de distancia.
CSS Houdini es un término general que describe una serie de APIs de navegador de bajo nivel que les brindan a los desarrolladores mucho más control y poder sobre los estilos que escriben.
Houdini habilita un CSS más semántico con el modelo de objetos tipados. Los desarrolladores pueden definir propiedades personalizadas de CSS avanzadas con sintaxis, valores predeterminados y herencia a través de la API de Properties and Values.
También presenta worklets de pintura, diseño y animación, que abren un mundo de posibilidades, ya que permiten que los autores se conecten más fácilmente al proceso de diseño y diseño del motor de renderización del navegador.
Información sobre los worklets de Houdini
Los worklets de Houdini son instrucciones del navegador que se ejecutan desde el subproceso principal y a las que se puede llamar cuando sea necesario. Los worklets te permiten escribir CSS modular para realizar tareas específicas y requieren una sola línea de JavaScript para importarlos y registrarlos. Al igual que los trabajadores del servicio para el estilo CSS, los worklets de Houdini se registran en tu aplicación y, una vez registrados, se pueden usar en tu CSS por nombre.
Escribe el archivo de worklet. Registra el módulo de worklet (CSS.paintWorklet.addModule(workletURL)). Usa la worklet (background: paint(confetti)).
Implementa tus propias funciones con la API de CSS Painting
La API de pintura de CSS es un ejemplo de un elemento de trabajo de este tipo (el elemento de trabajo de pintura) y permite a los desarrolladores definir funciones de pintura personalizadas similares a un lienzo que se pueden usar directamente en CSS como fondos, bordes, máscaras y mucho más. Hay un mundo de posibilidades para usar CSS Paint en tus propias interfaces de usuario.
Por ejemplo, en lugar de esperar a que un navegador implemente una función de bordes en ángulo, puedes escribir tu propia worklet de Paint o usar una worklet publicada existente. Luego, en lugar de usar border-radius, aplica esta tarea a los bordes y al recorte.
.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;
/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
Actualmente, la API de CSS Painting es una de las APIs de Houdini con mejor compatibilidad, y su especificación es una recomendación candidata del W3C. Actualmente, está habilitado en todos los navegadores basados en Chromium, es parcialmente compatible con Safari y se está considerando para Firefox.
Sin embargo, incluso sin compatibilidad total con el navegador, puedes ser creativo con la API de Houdini Paint y ver cómo tus estilos funcionan en todos los navegadores modernos con el polyfill de pintura CSS. Para mostrar algunas implementaciones únicas y proporcionar una biblioteca de recursos y worklets, mi equipo creó houdini.how.
Houdini.how
Houdini.how es una biblioteca y referencia para los recursos y worklets de Houdini. Te proporciona todo lo que necesitas saber sobre CSS Houdini: compatibilidad con navegadores, una descripción general de sus diversas APIs, información de uso, recursos adicionales y muestras de la función de trabajo de pintura en vivo. Cada ejemplo de Houdini.how está respaldado por la API de CSS Paint, lo que significa que todos funcionan en todos los navegadores modernos. ¡Pruébala!
Usa Houdini
Los worklets de Houdini deben ejecutarse a través de un servidor de forma local o en HTTPS en producción. Para trabajar con una worklet de Houdini, deberás instalarla de forma local o usar una red de distribución de contenido (CDN) como unpkg para entregar los archivos. Luego, deberás registrar la worklet de forma local.
Existen varias formas de incluir las worklets de presentación de Houdini.how en tus propios proyectos web. Se pueden usar a través de una CDN como prototipos, o bien puedes administrar los worklets por tu cuenta con módulos npm. De cualquier manera, te recomendamos que también incluyas el complemento CSS Paint para asegurarte de que sean compatibles con varios navegadores.
1. Creación de prototipos con una CDN
Cuando te registras desde unpkg, puedes vincular directamente al archivo worklet.js sin necesidad de instalarlo de forma local. Unpkg resolverá worklet.js como la secuencia de comandos principal, o bien puedes especificarla tú mismo. Unpkg no causará problemas de CORS, ya que se entrega a través de HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Ten en cuenta que esto no registra las propiedades personalizadas para la sintaxis y los valores de resguardo. En su lugar, cada uno tiene valores de resguardo incorporados en la worklet.
Para registrar las propiedades personalizadas de forma opcional, incluye también el archivo properties.js.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
Para incluir el polyfill de pintura de CSS con unpkg, haz lo siguiente:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Cómo administrar worklets a través de NPM
Instala tu worklet desde npm:
npm install <package-name>
npm install css-paint-polyfill
La importación de este paquete no inserta automáticamente la worklet de pintura. Para instalar la worklet, deberás generar una URL que resuelva el archivo worklet.js del paquete y registrarla. Para ello, sigue estos pasos:
CSS.paintWorklet.addModule(..file-path/worklet.js)
El nombre y el vínculo del paquete npm se pueden encontrar en cada tarjeta de worklet.
También deberás incluir el complemento CSS Paint a través de una secuencia de comandos o importarlo directamente, como lo harías con un framework o un empaquetador.
Este es un ejemplo de cómo usar Houdini con el polyfill de pintura en empaquetadores modernos:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
Contribuir
Ahora que jugaste con algunos ejemplos de Houdini, es tu turno de contribuir con los tuyos. Houdini.how no aloja ningún worklet, sino que muestra el trabajo de la comunidad. Si tienes un worklet o un recurso que deseas enviar, consulta el repositorio de GitHub con los lineamientos de contribución. Nos encantaría ver lo que creas.