API de pintura CSS

Segundo o autor do material, cuja tradução estamos publicando hoje, a CSS Paint API é uma tecnologia incrivelmente interessante. Além disso, estamos falando não apenas de suas capacidades atuais, mas também dos fenômenos apresentados a ela, e que sua aparência marca o início de mudanças muito notáveis ​​no mundo das CSS. Aqui, falaremos sobre a API CSS Paint e os motivos de sua aparência, além de como usá-la.

O que é a API do CSS Paint?

A API em questão é apenas uma pequena parte do novo conjunto de especificações que está sendo desenvolvido como parte do projeto CSS Houdini. Descrevendo brevemente esse projeto, sua essência se resume ao fato de oferecer aos desenvolvedores acesso de baixo nível aos mecanismos internos de CSS.

A API CSS Paint permite chamar a função paint() em situações em que, em condições normais, o trabalho seria realizado, por exemplo, com um determinado valor que descreve algum tipo de imagem. Um exemplo comum disso é a propriedade background-image , ao trabalhar com a qual você pode usar a função url() para transmitir ao sistema um link para o arquivo de imagem:

 area { background-image: url('assets/myimage.jpg'); } 

A CSS Paint API permite chamar, em vez de uma função semelhante, a função paint() e transmitir o chamado worklet, descrito por JavaScript. Um vorklet pode ser percebido como um pedaço de código que permite que um desenvolvedor desenhe programaticamente quase tudo o que deseja. E, como estamos falando de JavaScript, a imagem pode ser dinâmica. Por si só, essa API é muito semelhante à API do HTML5 Canvas, e agora falaremos sobre como tudo funciona.

Recursos da API de pintura CSS

Se agora você tem a sensação de que tudo isso soa bem, mas parece complicado, e acha que se sente bastante confortável ao usar imagens comuns, lembre-se de que as imagens comuns não perdem sua relevância com o advento da nova tecnologia. Usá-los, como sempre, é perfeitamente normal. O fato de algo novo ter aparecido no horizonte, e provavelmente promissor, não significa que todos precisem usar esse novo imediatamente para resolver todos os problemas existentes. No entanto, imagens comuns são estáticas. A nova API atrai a idéia de criar imagens dinâmicas.

Vamos pensar sobre a função CSS gradiente linear . A coisa é muito poderosa. Dê uma olhada nisso, por exemplo. Mas você pode imaginar o quão mais fácil seria obter o mesmo efeito formado por camadas sobrepostas se você não tivesse que usar muitas imagens de fundo? No entanto, este não é o único ponto. Se você se aprofundar na API do CSS Paint, poderá entender como essas imagens são criadas durante a execução do programa, e isso pode ser muito útil (na verdade, é isso que planejamos fazer aqui).

E a função CSS de gradiente cônico ? Pode-se dizer que ainda não é suportado por navegadores sem polyfill. O uso da nova API permite criar gradientes cônicos, ajustar seus parâmetros, que não são particularmente diferentes do que está na especificação. Tudo isso significa que, na prática, usando a nova API, você pode criar seu próprio polyfill nativo. E isso é simplesmente maravilhoso.

Lembre-se de que tudo isso faz parte de um grupo maior de recursos conhecido como CSS Houdini. Aqui está o que a documentação do projeto diz sobre o assunto: "O objetivo da CSS-TAG Houdini Task Force (CSS Houdini) é desenvolver em conjunto mecanismos que quebrem o mistério da tecnologia de estilizar páginas da web e criar seus layouts".

Parece bom, certo? E, de fato, esses novos mecanismos visam permitir que os desenvolvedores estendam a funcionalidade do próprio CSS, oferecendo a eles melhores ferramentas de estilo, suporte a vários navegadores e a capacidade de criar polyfills.

O processo de padronização de novas tecnologias pode levar algum tempo. Primeiro, é feita uma sugestão para um novo recurso CSS. Em seguida - uma especificação é escrita, outros processos ocorrem. Como resultado, os fabricantes de navegadores estão implementando novas especificações. E, como os desenvolvedores geralmente mal podem esperar para começar a usar novos recursos o mais rápido possível, precisam levar em consideração o fato de que navegadores mais antigos podem não suportar inovações e que, se alguma especificação ainda não estiver totalmente implementada, poderá, no decorrer de sua execução. desenvolvimento, mudar seriamente. Talvez não haja nada a falar sobre as nuances típicas da implementação de diferentes tecnologias em diferentes navegadores. O projeto Houdini pode ir muito longe na mitigação desses problemas, permitindo-nos desenvolver a funcionalidade do navegador por conta própria, usá-la e esperar com calma pelos fabricantes de navegadores para implementar determinados recursos. Aqui estão alguns materiais sobre esse tópico. O primeiro é dedicado aos pontos fortes de Houdini, e o segundo é usar os recursos deste projeto para criar animações complexas.

Suporte à API CSS Paint pelos navegadores

Posso usar a API CSS Paint hoje? Podemos dar uma resposta positiva a essa pergunta, embora deva-se notar que longe de todos os navegadores suportam essa tecnologia. Para obter informações de suporte para esta API, você pode usar o recurso caniuse.com .


Suporte para a API do CSS Paint por vários navegadores (julho de 2018)

Como você pode ver, essa API suporta apenas o Chrome até o momento. Seja como for, vamos falar sobre como usá-lo. Abordaremos as construções de software necessárias para fazer a nova API funcionar. Isso inclui novos recursos de CSS e alguns mecanismos JavaScript bastante recentes. Nosso exemplo será dividido em três etapas.

Etapa 1: CSS

Lembre-se de que, para criar uma imagem usando a API CSS Paint, os widgets são os fragmentos do código JS. Portanto, para iniciantes, precisamos dar um nome ao worklet e chamá-lo em CSS. awesomePattern chamá-lo awesomePattern . Como resultado, o CSS ficará assim:

 section { background-image: url('fallback.png'); background-image: paint(awesomePattern); }; 

Os preparativos preliminares foram concluídos, mas até o restante do nosso exemplo estar pronto, tudo isso não funcionará.

Etapa 2: JavaScript

Agora precisamos descrever o worklet usando JS. Aqui é mostrado como, no script principal, outro script é carregado que implementa a funcionalidade que precisamos.

 CSS.paintWorklet.addModule('patternWorklet.js'); 

Nesse estágio, novamente, nada acontece, pois o mais interessante está oculto no arquivo patternWorklet.js .

No arquivo patternWorklet.js precisamos registrar a classe do vorklet:

 registerPaint('awesomePattern', Shape); 

Aqui chamamos a função registerPaint() e passamos o que consideramos um worklet, neste caso awesomePattern . Além disso, passamos a essa função um link para a classe que escreveremos, neste caso, Shape . Este comando deve ser adicionado após a declaração da classe correspondente. Ao declarar e usar classes, você não pode confiar em algo como um mecanismo para gerar declarações de função. Antes de poder usar uma classe, você deve declará-la.

Em seguida, usaremos a sintaxe para declarar as classes do ECMAScript 2015 e escreveremos uma classe que irá desenhar a imagem de fundo. Como essa classe agora está registrada como uma classe da classe trabalhadora, podemos usar alguns mecanismos especiais que estarão automaticamente disponíveis nela.

 class Shape { paint(ctx, geom, properties) {   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc( 200, 200, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath(); } } 

O retorno de chamada paint() possui os parâmetros ctx , geom e properties . O parâmetro ctx é o mesmo que o contexto de renderização 2D que pode ser obtido no <canvas> . Bem, é quase o mesmo. O fato é que o <canvas> permite a leitura de dados de pixel, mas a CSS Paint API não permite isso. Apesar das diferenças, usando ctx , podemos usar os mesmos métodos de saída gráfica usados ​​ao trabalhar com o <canvas> . Neste exemplo, usando a função arc() , desenhamos um círculo.

Os dois primeiros valores passados ​​para a função arc() são as coordenadas X e Y do centro do círculo, em pixels, em relação à origem localizada no canto superior esquerdo do elemento. No entanto, quero que o círculo esteja no centro do elemento. Para resolver esse problema, o parâmetro geom é útil para nós. Dá acesso ao objeto PaintSize , que é uma descrição das configurações da imagem. Em particular, referindo-se a ele, podemos ler os parâmetros de width e height , e é exatamente isso que precisamos para centralizar o círculo.

Como resultado, chegamos a este código:

 class Shape { paint(ctx, geom, properties) {     let x = geom.width/2;   let y = geom.height/2;   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc(x, y, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath();   } } registerPaint('awesomePattern', Shape); 

Você pode ver a versão funcional do exemplo no CodePen . Estritamente falando, é isso que esse código gera.


Círculo criado com APIs de pintura CSS

Tudo isso é bom, mas nosso exemplo é muito simples. Vamos, em vez do círculo usual, desenhar algo mais interessante. Por exemplo - como um asterisco - logotipo do site css-tricks.com.


Asterisco criado com APIs de pintura CSS

Aqui está um projeto CodePen que permite fazer isso.

Ao olhar para o código JS deste projeto, preste atenção ao método drawStar() e às muitas funções usadas ao trabalhar com o <canvas> .

Etapa 3: Propriedades CSS personalizadas

Usando a nova tecnologia, podemos ir muito mais além do que desenhar círculos e estrelas. Podemos ver os recursos poderosos das propriedades CSS personalizadas (variáveis). Eles, a propósito, mesmo sozinhos, são muito interessantes. No nosso caso, eles se mostram especialmente úteis.

Suponha que desejamos poder alterar o tamanho ou a cor de um logotipo criado anteriormente. Esses parâmetros podem ser colocados no código CSS na forma de propriedades personalizadas e, em seguida, usá-los no programa por meio do terceiro parâmetro, passado para o retorno de chamada paint() . É sobre o parâmetro properties .

Nós adicionamos a propriedade --star-scale ao nosso código CSS, que visa controlar o redimensionamento da imagem, e a propriedade --star-color , usada para organizar a alteração da cor do logotipo diretamente no CSS. Aqui está o que temos:

 section { --star-scale: 2; --star-color: hsla(200, 50%, 50%, 1); background-image: paint(awesomePattern) }; 

Agora, de volta à classe de pano de trabalho. Aqui, precisamos interagir com as propriedades do usuário descritas acima. Isso é feito usando o método inputProperties , que nos dá acesso a todas as propriedades CSS e seus valores atribuídos.

 static get inputProperties() { return ['--star-scale','--star-color']; } 

Agora você pode trabalhar com eles no método paint() :

 const size = parseInt(properties.get('--shape-size').toString()); 

Naturalmente, os valores obtidos podem ser utilizados no código responsável pela formação da imagem. Isso leva ao fato de que se nós, no código CSS, --star-scale o valor da propriedade --star-scale ou --start-color , isso afetará imediatamente a aparência da imagem.


A influência das propriedades CSS personalizadas na imagem final

Essa funcionalidade é implementada no mesmo projeto CodePen que mencionamos acima.

A propósito, vale a pena notar que, ao usar a nova API, todas as propriedades CSS comuns relacionadas à configuração do plano de fundo de elementos, como background-size background-repeat , funcionarão da mesma maneira que antes. Eles não perderam relevância.

Sumário

A CSS Paint API é uma tecnologia muito poderosa, cujos recursos não se limitam à criação de imagens de plano de fundo.

Imagine que o elemento deva ter uma borda especial, por exemplo, uma que não seja totalmente visível ou dupla. Talvez para obter esses efeitos, você geralmente use os pseudoelementos ::before ou ::after , ou talvez uma box-shadow especialmente configurada. Bordas (e muito mais) podem ser implementadas usando a API CSS Paint e a propriedade border-image .

A CSS Paint API reúne muitos recursos excelentes, como widgets, classes ECMAScript 2015 e os recursos do <canvas> . Além disso, fornece ao desenvolvedor o software de gerenciamento de imagens baseado em JavaScript. Por exemplo, usando o mecanismo de evento, você pode organizar a atualização de propriedades personalizadas, o que significa a própria imagem, como, por exemplo, feita aqui , onde o evento click inicia o processo de atualização de propriedades na função requestAnimationFrame , que permite criar uma animação sempre que o usuário clica no botão. Além disso, mesmo as coordenadas do cursor do mouse ao clicar são levadas em consideração.

À primeira vista, tudo isso pode parecer um pouco confuso, mas vamos dar uma olhada em outras partes do projeto Houdini com as quais podemos nos deparar:

• A API CSS Layout permite que o desenvolvedor faça algo como display: layout('myCustomLayout') . Um exemplo típico é a criação de seus próprios layouts de estilo de alvenaria, mas a variedade de uso desse recurso é muito maior.
• A API CSS Properties and Values permite definir tipos de propriedades personalizadas.
• A API CSS Animation Worklet leva as operações de processamento de animação além do fluxo principal, o que deve se traduzir em animações perfeitamente suaves.

Como resultado, podemos dizer que, literalmente diante de nossos olhos, há o surgimento de tecnologias que abrem muitas novas oportunidades para desenvolvedores da web. Os processos de padronização e implementação nos navegadores não são tão rápidos, mas, possivelmente, terão um tremendo impacto em tudo relacionado ao estilo das páginas da web.

Caros leitores! Quais áreas do aplicativo CSS Paint API você acha mais interessantes?