Turbine seu CSS com worklets de pintura do Houdini com apenas alguns cliques.
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 escrevem.
O Houdini permite um CSS mais semântico com o objeto tipado Modelo. Os desenvolvedores podem defina propriedades personalizadas avançadas de CSS com sintaxe, valores padrão e herança por meio do API de propriedades e valores.
O curso também inclui a pintura, o layout e a animação worklets, que abrem uma um mundo de possibilidades, facilitando a conexão entre os autores e o processo de estilo e layout do mecanismo de renderização do navegador.
Entender os worklets de Houdini
Os worklets Houdini são instruções do navegador executadas fora da linha de execução principal e que podem ser chamadas quando necessários. Os Worklets permitem escrever 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 Houdini são registradas no seu aplicativo e, depois de registradas, podem ser usadas no seu CSS pelo nome.
Gravar 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 tipo de worklet (worklet de pintura) e permite que os desenvolvedores definam funções personalizadas de pintura semelhantes à tela que podem ser usados diretamente no CSS como planos de fundo, bordas, máscaras e muito mais. Há um mundo inteiro de possibilidades de uso do CSS Paint nas suas interfaces de usuário.
Por exemplo, em vez de esperar que um navegador implemente um recurso de bordas inclinadas, você pode escrever sua própria worklet Paint ou usar uma já existente publicada. Em vez de usar o raio da borda aplicar 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 Houdini com melhor suporte, sendo que sua especificação é W3C. recomendação candidata. No momento, ela está ativada em todos os navegadores baseados no Chromium, parcialmente suportado no Safari e está sendo considerado para o Firefox.
Mas mesmo sem o suporte completo do navegador, você ainda pode usar a criatividade com a API do Houdini Paint e ver seus estilos funcionam em todos os navegadores modernos com o CSS Paint Polyfill (em inglês). E para mostrar algumas bem como para fornecer um recurso e uma biblioteca de worklet, minha equipe criou houdini.how (em inglês).
Houdini.how
Houdini.how é uma biblioteca e referência para worklets e recursos do Houdini. Ela fornece tudo o que você precisa saber sobre o CSS Houdini: suporte ao navegador, uma visão geral das diversas APIs, uso informações, recursos adicionais e worklet de pintura em tempo real amostras. Cada amostra em Houdini.how é apoiada pela API CSS Paint, o que significa e funcionam em todos os navegadores mais recentes. Faça um teste!
Como usar o Houdini
Os worklets do Houdini precisam ser executados por um servidor localmente ou em HTTPS na produção. Para trabalhar com um worklet Houdini, será necessário instalá-lo localmente ou usar um de rede (CDN), como unpkg, para exibir os arquivos. Em seguida, você precisará registrar o worklet localmente.
Há algumas maneiras de incluir os worklets de exibição do Houdini.how nos seus próprios projetos da Web. Eles podem pode ser usado por meio de uma CDN em uma capacidade de prototipagem, ou é possível gerenciar os worklets por conta própria usando módulos npm. De qualquer forma, inclua também o polyfill CSS Paint para garantir que eles sejam compatível com vários navegadores.
1. Criar protótipos com uma CDN
Ao fazer o registro no unpkg, é possível criar um link direto para o arquivo worklet.js sem precisar fazer isso localmente para instalar o worklet. O "unpkg" é resolvido para worklet.js como o script principal, mas também é possível especificá-lo você mesmo. Por ser exibido por HTTPS, o Unpkg não causa problemas de CORS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Isso não registra as propriedades personalizadas para valores de sintaxe e substituto. Em vez disso, eles cada uma com valores substitutos incorporados ao 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 Paint CSS com unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Como gerenciar worklets via NPM
Instale o worklet do npm:
npm install <package-name>
npm install css-paint-polyfill
A importação deste 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. Você então com:
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 precisará incluir o Polyfill do CSS Paint via script ou importá-lo diretamente, como faria com um framework ou bundler.
Veja 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á conheceu alguns exemplos de Houdini, é a sua vez de contribuir com as suas! O Houdini.how não hospeda nenhum worklets e, em vez disso, mostra o trabalho da comunidade. Se você tem um worklet ou recurso que gostaria de enviar, confira o github repositório com diretrizes de contribuição. Adoraríamos ver o que você inventou!