Con unos pocos clics, puedes optimizar tu CSS con los worklets de pintura de Houdini.
El 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 CSS más semánticas con el objeto escrito. Modelo. Los desarrolladores pueden definir propiedades personalizadas avanzadas de CSS con sintaxis, valores predeterminados y herencia a través del API de Properties and Values.
También incluye la pintura, el diseño y la animación. worklets, que abren un mundo de posibilidades, ya que facilita que los autores se involucren en el proceso de diseño y estilo 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 en el subproceso principal y a las que se los puede llamar cuando según sea necesario. Los Worklets te permiten escribir código de CSS modular para realizar tareas específicas y requieren un solo línea de JavaScript para importar y registrar. Al igual que los service workers para estilo CSS, los worklets de Houdini están registrados en tu aplicación y, una vez registrados, se pueden usar en tu CSS por nombre.
Escribir un archivo de worklet Registra el módulo del worklet (CSS.paintWorklet.addModule(workletURL)) Usar el worklet
(background: paint(confetti))
Cómo implementar tus propias funciones con la API de CSS Painting
La API de CSS Painting es un ejemplo de este tipo de archivo. worklet (el worklet de Paint), y permite a los desarrolladores definir funciones de pintura personalizadas similares a las de un lienzo que se puede usar directamente en CSS como fondos, bordes, máscaras y más. Hay todo un mundo de más 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 angulares, puedes escribir tu propio worklet de Paint o usar uno existente publicado. Luego, en lugar de usar el radio de borde aplicar este worklet 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;
}
En la actualidad, la API de pintura de CSS es una de las APIs de Houdini mejor compatibles, y su especificación es W3C. recomendación de candidato. Actualmente está habilitada en todos los navegadores basados en Chromium, parcialmente es compatible con Safari y se encuentra en consideración para Firefox.
Pero incluso sin compatibilidad total con los navegadores, de todas formas puedes darle rienda suelta a tu creatividad con la API de Houdini Paint y ver tus estilos funcionan en todos los navegadores modernos con el pintura de CSS Polyfill Y para mostrar algunas de las herramientas y para proporcionar un recurso y una biblioteca de worklet, mi equipo creó houdini.how.
Houdini.how
Houdini.how es una biblioteca y referencia para Worklets y recursos de Houdini. Integra proporciona todo lo que necesitas saber sobre CSS Houdini: la compatibilidad con navegadores, una Descripción general de sus diversas APIs, el uso información, recursos adicionales y worklet de pintura en vivo muestras. Cada muestra en Houdini.how está respaldada por la API de pintura de CSS. y funcionan en todos los navegadores modernos. ¡Inténtalo!
Cómo usar Houdini
Los worklets de Houdini deben ejecutarse a través de un servidor de forma local o en producción mediante HTTPS. Para si trabajas con un worklet de Houdini, tendrás que instalarlo de forma local o usar un almacén (CDN) como unpkg para entregar los archivos. Luego, deberás registrar el worklet de manera local.
Hay varias formas de incluir los worklets de la muestra de Houdini.how en tus propios proyectos web. Pueden pueden usarse a través de una CDN en la capacidad de crear prototipos, o puedes administrar los worklets por tu cuenta con módulos npm. De cualquier manera, querrás incluir también el Polyfill de pintura de CSS para asegurarte de que compatibles con varios navegadores.
1. Crea prototipos con una CDN
Cuando te registras desde unpkg, puedes vincular directamente al archivo worklet.js sin necesidad de realizar la instalar el worklet. Unpkg se resolverá en worklet.js como la secuencia de comandos principal o puedes especificarlo. 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 cambio, cada una tiene valores de resguardo incrustados en el worklet.
Si, de manera opcional, quieres registrar las propiedades personalizadas, 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. Administra los 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 inyecta automáticamente el worklet de pintura. Para instalar el worklet, tendrás que generar una URL que resuelva el worklet.js del paquete y registrarla. Tú lo haces por lo que
CSS.paintWorklet.addModule(..file-path/worklet.js)
El nombre y el vínculo del paquete npm se pueden encontrar en cada tarjeta del worklet.
También deberás incluir el Polyfill de pintura de CSS a través de un script o importarlo directamente, como lo harías con un framework o agrupador.
Este es un ejemplo de cómo usar Houdini con el polyfill de pintura en agrupadores 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 algunas muestras de Houdini, es tu turno de contribuir con las tuyas. Houdini.how no aloja ningún paquete de trabajo en sí, sino que muestra el trabajo de la comunidad. Si si tienes un worklet o un recurso que te gustaría enviar, consulta la página repo con lineamientos para contribuciones. ¡Nos encantaría ver tus ideas!