Turbinar seu CSS com os worklets de pintura Houdini com apenas alguns cliques.
O CSS Houdini é um termo abrangente que descreve uma série de APIs de navegador de baixo nível que dão aos desenvolvedores muito mais controle e poder sobre os estilos que eles escrevem.
O Houdini ativa um CSS mais semântico com o Modelo de objeto tipado. Os desenvolvedores podem definir propriedades personalizadas avançadas de CSS com sintaxe, valores padrão e herança por meio da API Properties and Values.
Ela também introduz worklets de pintura, layout e animação, que abrem um mundo de possibilidades, facilitando o trabalho dos autores com o processo de estilo e layout do mecanismo de renderização do navegador.
Noções básicas sobre os worklets Houdini
Worklets da Houdini são instruções do navegador que são executadas fora da linha de execução principal e podem ser chamadas quando necessário. Os Worklets permitem criar CSS modular para realizar tarefas específicas e exigem uma única linha de JavaScript para importar e registrar. Assim como os service workers no estilo CSS, os worklets da Houdini são registrados no seu aplicativo e, após esse registro, podem ser usados no seu CSS pelo nome.
Gravar o arquivo de worklet Registrar o módulo de worklet (CSS.paintWorklet.addModule(workletURL)) Usar o worklet
(background: paint(confetti))
Como implementar recursos próprios com a API CSS Painting
A API CSS Painting é um exemplo desse worklet (a worklet Paint) e permite que os desenvolvedores definam funções de pintura personalizadas semelhantes a telas que podem ser usadas diretamente no CSS como planos de fundo, bordas, máscaras e muito mais. Há várias possibilidades de usar o CSS Paint nas suas interfaces do usuário.
Por exemplo, em vez de esperar que um navegador implemente um recurso de bordas inclinadas, você pode criar sua própria worklet do Paint ou usar uma worklet publicada. Em vez de usar o raio de borda, aplique esse worklet às bordas e ao 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;
}
Atualmente, a API CSS Painting é uma das APIs Houdini com melhor suporte. A especificação é uma recomendação candidata ao W3C. No momento, ela está ativada em todos os navegadores baseados no Chromium, parcialmente com suporte no Safari e está em consideração para o Firefox.
No entanto, mesmo sem suporte completo ao navegador, você ainda pode usar sua criatividade com a API Houdini Paint e conferir seus estilos em todos os navegadores modernos com o CSS Paint Polyfill. Para mostrar algumas implementações exclusivas, além de fornecer um recurso e uma biblioteca de worklet, minha equipe criou o houdini.how.
Houdini.how
Houdini.how é uma biblioteca e uma referência para os worklets e recursos da Houdini. Ele fornece tudo o que você precisa saber sobre o CSS Houdini: suporte a navegadores, uma visão geral das várias APIs, informações de uso, recursos adicionais e exemplos de worklet do Live Paint. Cada amostra no Houdini.how é respaldada pela API CSS Paint, ou seja, todas funcionam em todos os navegadores mais recentes. Dê uma chance!
Como usar o Houdini
Os worklets Houdini precisam ser executados por um servidor localmente ou por HTTPS em produção. Para trabalhar com um worklet Houdini, você precisará instalá-lo localmente ou usar uma rede de fornecimento de conteúdo (CDN), como unpkg, para exibir os arquivos. Em seguida, será necessário registrar o worklet localmente.
Existem algumas maneiras de incluir o Houdini.how para exibir os worklets nos seus projetos da Web. Eles podem ser usados por uma CDN na capacidade de prototipagem ou você pode gerenciar os worklets por conta própria usando módulos npm. De qualquer forma, inclua também o CSS Paint Polyfill para garantir que eles sejam compatíveis com vários navegadores.
1. Como criar protótipos com uma CDN
Ao se registrar no unpkg, você pode vincular diretamente ao arquivo worklet.js sem precisar instalar localmente o worklet. O unpkg será resolvido para worklet.js como o script principal. Você também pode especificar o arquivo. O unpkg não causa problemas de CORS, já que é exibido por HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
As propriedades personalizadas para valores de sintaxe e substituto não são registradas. Em vez disso, cada uma tem valores substitutos incorporados à worklet.
Para registrar as propriedades personalizadas, inclua também o arquivo properties.js.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
Para incluir o Polyfill de pintura CSS com unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Como gerenciar worklets via NPM
Instale o worklet pelo npm:
npm install <package-name>
npm install css-paint-polyfill
Importar este pacote não injeta automaticamente o worklet de pintura. Para instalar a worklet, é necessário gerar e registrar um URL que seja resolvido para o worklet.js do pacote. Você pode fazer isso com:
CSS.paintWorklet.addModule(..file-path/worklet.js)
O nome e o link do pacote NPM podem ser encontrados em cada card de worklet.
Também será necessário incluir o CSS Paint Polyfill por script ou importá-lo diretamente, como faria com um framework ou bundler.
Aqui está um exemplo de como usar o Houdini com o polyfill de tinta em bundlers 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
Agora que você já testou algumas amostras de Houdini, é sua vez de contribuir com suas próprias amostras! O Houdini.how não hospeda worklets e, em vez disso, exibe o trabalho da comunidade. Se você tem um worklet ou recurso que gostaria de enviar, confira o repositório do GitHub (link em inglês) com diretrizes de contribuição. Adoraríamos ver o que você vai inventar!