Potencia tu CSS con trabajos de pintura de Houdini con solo unos clics.
Houdini del CSS 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 escritos. Los desarrolladores pueden definir propiedades personalizadas avanzadas de CSS con sintaxis, valores predeterminados y herencia a través de la API de Properties and Values.
También se presentan trabajos de pintura, diseño y animación, que abren un mundo de posibilidades y facilitan que los autores se conecten con el proceso de estilo y diseño del motor de renderización del navegador.
Información sobre los trabajos de Houdini
Los Worklets de Houdini son instrucciones del navegador que se ejecutan fuera del subproceso principal y se las puede llamar cuando es necesario. Los Worklets te permiten escribir código CSS modular para realizar tareas específicas y requieren una sola línea de JavaScript para importar y registrar. Al igual que los service workers para el estilo de CSS, los trabajos de Houdini se registran en tu aplicación y, una vez que se registran, se pueden usar en tu CSS por su nombre.
Escribe el archivo del worklet Registra el módulo del worklet (CSS.paintWorklet.addModule(workletURL)) Usa 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 worklet (el worklet de Paint) y permite a los desarrolladores definir funciones de pintura personalizadas similares a los lienzos que se pueden usar directamente en CSS como fondos, bordes, máscaras y mucho más. Existe una gran variedad de posibilidades sobre cómo puedes 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 que ya esté publicado. Luego, en lugar de usar el radio de borde, aplica este worklet a bordes y recortes.
.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 CSS Painting es una de las APIs de Houdini mejor compatibles y su especificación es una recomendación de candidato para W3C. Actualmente, está habilitada en todos los navegadores basados en Chromium, es parcialmente compatible con Safari y se encuentra en consideración para Firefox.
Pero incluso sin compatibilidad total con los navegadores, puedes usar la API de Houdini Paint y ver cómo funcionan tus diseños en todos los navegadores modernos con CSS Paint Polyfill. Además, para mostrar algunas implementaciones únicas y proporcionar una biblioteca de recursos y worklet, mi equipo compiló houdini.how.
Houdini.how
Houdini.how es una biblioteca y referencia de los recursos y trabajos de Houdini. Proporciona todo lo que necesitas saber sobre CSS Houdini: compatibilidad con el navegador, una descripción general de sus diversas APIs, información sobre el uso, recursos adicionales y muestras de worklet de pintura en vivo. Cada muestra de Houdini.how está respaldada por la API de CSS Paint, lo que significa que cada una funciona en todos los navegadores modernos. ¡Inténtalo!
Usa Houdini
Los Worklets de Houdini deben ejecutarse a través de un servidor local, o bien en HTTPS en producción. Para trabajar con un worklet de Houdini, debes instalarlo localmente o usar una red de distribución de contenidos (CDN), como unpkg, para entregar los archivos. Luego, deberás registrar el worklet de manera local.
Hay algunas maneras de incluir los worklets de muestra de Houdini.how en tus propios proyectos web. Se pueden usar a través de una CDN en la capacidad de prototipado, o bien puedes administrar los worklets por tu cuenta con módulos de npm. De cualquier manera, te recomendamos que también incluyas el Polyfill de pintura en CSS para garantizar que sea compatible con varios navegadores.
1. Crea prototipos con una CDN
Cuando te registras desde unpkg, puedes vincular directamente al archivo worklet.js sin necesidad de instalarlo de forma local. 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 publica a través de HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Ten en cuenta que esto no registra las propiedades personalizadas para los valores de sintaxis y de resguardo. En cambio, cada uno tiene valores de resguardo incorporados en el worklet.
Para registrar las propiedades personalizadas de manera 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:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Administra 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 el worklet de pintura. Para instalar el worklet, deberás generar una URL que se resuelva en el worklet.js del paquete y registrarla. Para ello, sigue estos pasos:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Puedes encontrar el nombre y el vínculo del paquete de npm en cada tarjeta de Worklet.
También deberás incluir el Polyfill de pintura de CSS a través de una secuencia de comandos o importarlo directamente, como lo harías con un framework o un agrupador.
Este es un ejemplo de cómo usar Houdini con el polyfill de pintura en los 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 ya jugaste con algunos ejemplos de Houdini, es tu turno de contribuir con los tuyos. Houdini.how no aloja ningún worklet en sí mismo, sino que muestra el trabajo de la comunidad. Si tienes un worklet o un recurso que quieres enviar, consulta el repositorio de GitHub con lineamientos para la contribución. ¡Nos encantaría ver tus ideas!