Bastam alguns cliques para turbinar seu CSS com worklets de pintura do Houdini.
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 criam.
O Houdini permite um CSS mais semântico com o modelo de objetos tipado. Os desenvolvedores podem definir propriedades personalizadas avançadas de CSS com sintaxe, valores padrão e herança usando a API Properties and Values.
Ele também apresenta worklets de pintura, layout e animação, que abrem um mundo de possibilidades, facilitando a vinculação de autores ao processo de estilo e layout do mecanismo de renderização do navegador.
Noções básicas sobre worklets do Houdini
Os worklets do 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 que você escreva CSS modular para realizar tarefas específicas e exigem uma única linha de JavaScript para importar e registrar. Assim como os service workers para estilo CSS, os worklets do Houdini são registrados no seu aplicativo e, depois de registrados, podem ser usados no CSS por nome.
Gravar o arquivo do worklet Registrar o módulo do worklet (CSS.paintWorklet.addModule(workletURL)) Usar o worklet
(background: paint(confetti))
Como implementar seus próprios recursos com a API CSS Painting
A API CSS Painting é um exemplo desse worklet (o worklet Paint), que 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á um mundo de possibilidades para usar o CSS Paint nas suas interfaces do usuário.
Por exemplo, em vez de esperar que um navegador implemente um recurso de bordas em ângulo, você pode escrever seu próprio worklet de pintura ou usar um worklet publicado. Em seguida, em vez de usar border-radius, aplique esse worklet a bordas e 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;
}
Atualmente, a API CSS Painting é uma das APIs do Houdini com melhor suporte. A especificação dela é uma recomendação indicada pelo W3C. No momento, ele está ativado em todos os navegadores baseados no Chromium, tem suporte parcial no Safari e está sendo considerado para o Firefox.
No entanto, mesmo sem o suporte total do navegador, você ainda pode ser criativo com a API Houdini Paint e conferir se os estilos funcionam em todos os navegadores modernos com o CSS Paint Polyfill. Para mostrar algumas implementações únicas e fornecer uma biblioteca de recursos e worklets, minha equipe criou houdini.how.
Houdini.how
Houdini.how é uma biblioteca e referência para worklets e recursos do Houdini. Ele oferece 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 amostras de worklets de pintura em tempo real. Cada amostra no Houdini.how é apoiada pela API CSS Paint, o que significa que elas funcionam em todos os navegadores modernos. Faça um teste!
Como usar o Houdini
Os worklets do Houdini precisam ser executados localmente em um servidor ou em HTTPS na produção. Para trabalhar com um worklet do Houdini, é necessário instalá-lo localmente ou usar uma rede de fornecimento de conteúdo (CDN) como o unpkg para fornecer os arquivos. Em seguida, será necessário registrar o worklet localmente.
Há algumas maneiras de incluir os worklets do Houdini.how Showcase nos seus próprios projetos da Web. Eles podem ser usados por uma CDN em uma capacidade de prototipagem ou você pode gerenciar os worklets por conta própria usando módulos npm. De qualquer forma, você também vai querer incluir o CSS Paint Polyfill para garantir que eles sejam compatíveis com vários navegadores.
1. Prototipagem com uma CDN
Ao se registrar no unpkg, você pode vincular diretamente ao arquivo worklet.js sem precisar instalar o worklet localmente. O Unpkg vai resolver o worklet.js como o script principal ou você pode especificar ele. O Unpkg não causa problemas de CORS, porque é veiculado por HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Isso não registra as propriedades personalizadas para sintaxe e valores substitutos. Em vez disso, cada um deles tem valores substitutos incorporados ao worklet.
Para registrar as propriedades personalizadas opcionalmente, inclua também o arquivo properties.js.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
Para incluir o polyfill de pintura do CSS com o unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Como gerenciar worklets pelo NPM
Instale o worklet do npm:
npm install <package-name>
npm install css-paint-polyfill
A importação desse pacote não injeta automaticamente o worklet de pintura. Para instalar o worklet, você precisa gerar um URL que seja resolvido para o worklet.js do pacote e registrá-lo. Para isso, use:
CSS.paintWorklet.addModule(..file-path/worklet.js)
O nome e o link do pacote npm podem ser encontrados em cada card de worklet.
Você também vai precisar incluir o CSS Paint Polyfill por script ou importá-lo diretamente, como faria com uma estrutura ou um bundler.
Confira um exemplo de como usar o Houdini com o polyfill de pintura 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 do Houdini, é sua vez de contribuir com as suas. O Houdini.how não hospeda nenhum worklet, mas mostra o trabalho da comunidade. Se você tiver um worklet ou recurso que gostaria de enviar, confira o repo do GitHub com as diretrizes de contribuição. Queremos saber o que você criou.