Aguarde...

6 de fevereiro de 2020

CSS Houdini: tudo o que você precisa saber sobre as APIs mais populares

CSS Houdini: tudo o que você precisa saber sobre as APIs mais populares

Descubra como as APIs da CSS Houdini estão aproximando CSS e JavaScript, além de como usá-las.

CSS Houdini recebe esse nome do mundialmente famoso Harry Houdini. Por quê? Um grupo de desenvolvedores – de organizações conhecidas como Apple e Google e o CSS Working Group – queriam desmistificar a mágica do CSS e obter um melhor controle da renderização do site. Então eles formaram a Força-Tarefa CSS Houdini. 

Mas o que exatamente é CSS Houdini? É um conjunto de APIs de baixo nível que oferece aos desenvolvedores o poder de estender o CSS, assumindo o controle dos processos de estilo e layout dentro de um navegador. Ele fornece acesso direto ao CSS Object Model (um conjunto de APIs que permitem a manipulação de CSS a partir de JavaScript) e permite aos usuários ler e modificar dinamicamente o estilo CSS, ou seja. com JavaScript. 

Houdini é apenas parcialmente suportado atualmente, assim como está no estágio inicial de adoção. Enquanto você espera por mais suporte, por que não tentar esta coleção de técnicas de animação CSS que definitivamente funcionará.

Por que você precisa do CSS Houdini

Os navegadores são muito bons em abstrair tarefas complexas de estilo dos desenvolvedores. Ele dividirá parágrafos de texto em linhas separadas sem precisar ser informado. Os elementos podem ser dimensionados e colocados próximos uns dos outros automaticamente, usando algumas propriedades e deixando o mecanismo de renderização lidar com o resto. Sempre que a página é atualizada, o navegador pega o HTML, CSS e JavaScript e os converte em pixels na tela em um processo conhecido como ‘pipeline de renderização’.

Em primeiro lugar, o navegador lê através do conteúdo e constrói uma estrutura conhecida como uma árvore de renderizar , que é então utilizado para calcular onde as coisas devem aparecer na página em al ayout etapa. A partir daí, os transforma em pixels em uma etapa chamada pintura . Com todos os elementos pintados, ele os une em uma página em um processo chamado composição . Para melhorar o desempenho de um site, devemos sempre focar na otimização do caminho crítico de renderização. 

Se queremos um efeito visual em um site que o navegador não suporta nativamente, precisamos adicionar JavaScript e HTML com polyfills. Isso faz alterações repetitivas perto do início do pipeline, o que resulta em baixo desempenho.

O objetivo do Houdini é abrir o CSS e permitir que os desenvolvedores apliquem esses polyfills ainda mais ao longo do pipeline e acelerem as coisas. Eles também abrem novas oportunidades para criar efeitos não possíveis anteriormente. Embora nem todo site use essas novas APIs diretamente, elas permitem às estruturas e bibliotecas a oportunidade de reduzir as inconsistências do navegador.

Suporte para CSS Houdini

As APIs foram trabalhadas nos últimos anos, com cada uma sendo desenvolvida em conjunto por todos os membros da força-tarefa Houdini. Todas as APIs seguem o rigoroso processo de padronização do W3C.

Se for alcançado um consenso suficiente, é criado um rascunho inicial de especificação conhecido como ‘rascunho de trabalho’. A partir daí, ele é aprimorado ainda mais antes de atingir o nível de ‘recomendação de candidato’.

Uma especificação marcada como uma recomendação candidata pode começar a reunir feedback dos implementadores – nesse caso, os fornecedores de navegadores. É aqui que começamos a ver um suporte mais amplo ao navegador. A partir daqui, ele vai para ‘recomendação proposta’ e depois ‘recomendação W3C’, onde começa a obter suporte total ao navegador.

Atualmente, o precursor é a API do Paint, que está no nível de recomendação do candidato. Os navegadores baseados no Chromium Chrome, Opera e Samsung Internet suportam, com o Firefox e o Safari trabalhando em sua implementação. O OM digitado está intimamente relacionado e, como resultado, esses mesmos navegadores também suportam isso.

O Chrome está liderando o caminho com as outras APIs. Para brincar com a API de layout, worklets de animação ou API de propriedades e valores, você precisa usar o Chrome Canary com o sinalizador ‘Recursos experimentais da plataforma da Web’ ativado. Eles ainda estão em desenvolvimento ativo e podem mudar a qualquer momento.

CSS Houdini: tudo o que você precisa saber sobre as APIs mais populares

O que é a API do Paint? 

O penúltimo passo no pipeline de renderização é a fase de pintura. Nesse ponto, o navegador sabe exatamente o conteúdo a ser exibido, mas não como ele aparece. O mecanismo de renderização examinará os estilos aplicados a cada elemento e ajustará suas instruções de acordo.

Enquanto alguns estilos são bastante diretos, outros permitem a execução de funções que decidem sua aparência. Por exemplo, o plano de fundo pode ter muitas funções, que incluem url () para imagens, rgb () para cores e gradiente linear () para um efeito de gradiente.

#target {background: paint(my-effect);}

A API do Paint nos permite definir nossa própria função de pintura, que funciona da mesma maneira. Todas as funções criam uma imagem que o mecanismo pode usar dependendo da propriedade em que é usado. 

class MyWorklet {
       paint(ctx, size, style) {} }


O único requisito dentro de um worklet de tinta é um método de tinta única . Aqui, fornecemos um conjunto de instruções que um navegador pode seguir sempre que precisar repintar o elemento. É chamado com alguns argumentos que fornecem ao método algumas informações úteis.

O primeiro argumento é um contexto, que fornece um espaço em que podemos recorrer. Funciona de maneira semelhante ao contexto usado ao desenhar nos elementos <canvas> , usando instruções como moveTo e fillRect para começar a criar a imagem que o CSS pode usar.

Existem algumas diferenças entre esse contexto e o usado para os elementos <canvas> . Por exemplo, não há dados de imagem ou métodos de texto disponíveis por motivos de segurança e desempenho, mas é possível que eles apareçam nas revisões posteriores da especificação.

O segundo argumento contém as dimensões da área pintável que ele precisa criar. Normalmente, essa é a largura e a altura do elemento de destino, incluindo o preenchimento. Podemos usar essas informações para garantir que estamos desenhando no contexto no lugar certo.

Também podemos solicitar um conjunto de outras propriedades de estilo. Por exemplo, poderíamos querer alterar a cor do plano de fundo para complementar a cor do texto. Isso é feito através de um getter dentro do worklet.

static get inputProperties() {
    return ["color", "--custom-property"]; }


Propaganda

O valor inputProperties é uma matriz de todas as propriedades nas quais o worklet está interessado. Isso pode incluir propriedades customizadas que fornecem alguma personalização adicional. Esses valores são transmitidos como o terceiro argumento para o método paint como objetos de estilo da API Properties and Values.

Há um quarto argumento que pode ser usado para acessar os argumentos fornecidos para a função paint no CSS. Isso permite a configuração no ponto de definição, como as cores a serem usadas em um gradiente. Isso está avançando no processo de especificação e ainda não está pronto para uso.

registerPaint("my-effect", MyWorklet);


O worklet precisa ser registrado no navegador para ser coletado em CSS. O método registerPaint leva o nome que usamos para fazer referência a ele e ao próprio worklet. 


CSS.paintWorklet.addModule("my-worklet.js");

Por fim, para vincular o JavaScript ao CSS, o navegador precisa fazer o download do worklet. Ao fornecer o caminho, o navegador lida com o restante do processo para nós. 

O que o OM digitado faz?

O CSSOM Model Model (CSSOM) faz parte do JavaScript há muito tempo. Ele nos permite extrair o estilo computado de um elemento lendo sua propriedade de estilo ou usando getComputedStyle . O primeiro retorna estilos aplicados diretamente a esse elemento, enquanto o último inclui todos os estilos, incluindo os herdados.

document.body.style.fontSize // “2rem”
window.getComputedStyle(document.body).fontSize // “32px”

O valor que eles retornam é sempre uma string, independentemente do que foi fornecido originalmente. Isso torna o ajuste desses valores problemático e ineficiente para nós e para o navegador, pois ele precisa ser constantemente convertido entre um número e uma string.

document.body.fontSize += “1rem”; //
“2rem1rem”, not “3rem”

O OM digitado funciona de maneira semelhante ao CSSOM, mas também fornece tipos para os valores. Há duas novas maneiras de acessá-los – o attributeStyleMap funciona como a propriedade style , com computedStyleMap como getComputedStyle .

document.body.attributeStyleMap.get("font-size")
document.body.computedStyleMap().get("font-size")

Ambos retornam um objeto CSSUnitValue, que contém o valor e a unidade como propriedades separadas, prontas para serem lidas e atualizadas. 

Esses objetos também podem ser criados e usados ​​diretamente para calcular valores, assim como a função CSS calc () .

O OM digitado é capaz de muito mais, como conversão de tipo e fixação de valor. Confira ” Trabalhando com o novo modelo de objeto digitado por CSS ” do Google e a especificação oficial do W3C para obter mais informações.

API de propriedades e valores: adicione tipos a propriedades personalizadas

As propriedades personalizadas do CSS – também conhecidas como variáveis ​​de CSS – permitem definir um valor em um local e usá-lo em outro lugar. Por exemplo, poderíamos criar propriedades personalizadas para manter as cores do tema que os elementos mais abaixo da página poderiam usar.

 O problema com propriedades personalizadas se torna aparente quando tentamos animar entre elas. Como a propriedade pode se referir a qualquer coisa, o navegador volta a tratá-la como uma string. Como não há como saber animar entre as strings, ele acaba pulando de uma para a outra.

API Properties and Values ajuda fornecendo tipos para propriedades personalizadas. Podemos usar o JavaScript para registrar uma propriedade no navegador, que cuida do resto.

CSS.registerProperty({
  name: "--main-color",
  initialValue: #ecf0f1,
  inherits: true,
  syntax: "<color>"
}
);

O método registerProperty é uma nova propriedade no objeto global CSS. Aqui, definimos algumas características sobre a propriedade, como seu nome, um valor inicial se não for especificado e se herdará ou não de elementos superiores.

O atributo importante é a sintaxe , que descreve o tipo da propriedade. O CSS já sabe como lidar com diferentes tipos de dados, incluindo números, ângulos e URLs. Ao especificar o tipo, podemos salvar o trabalho do navegador e informar quais são nossos valores.

Melhore o desempenho com a API de layout

Todos os navegadores possuem algoritmos de layout para ajudar a posicionar o conteúdo. Por padrão, todos os elementos estarão no layout de fluxo. Nos scripts latinos, como o inglês, qualquer elemento definido como inline fluirá da esquerda para a direita na direção inline e qualquer elemento definido como bloco fluirá de cima para baixo na direção do bloco. 

Enquanto eles funcionam bem, eles fazem a maioria dos sites parecerem iguais. Para destacar um site, precisaríamos usar propriedades como position: absolute e calcular as compensações manualmente. Um site como o Pinterest usa essa abordagem para criar seu layout no estilo de alvenaria, mas pode causar problemas de desempenho em páginas maiores.

A API de layout visa evitar esse problema, entregando essa lógica a um worklet. Ele conhece as dimensões desejadas dos pais e de seus filhos e pode instruir o representante exatamente onde os deseja.

class MyLayout {
  static get inputProperties() { return [] }
  async layout(children, edges, constraints,
 styleMap) {}}
registerLayout("my-layout", MyLayout);

Cada worklet requer um método de layout , que é executado sempre que precisar recalcular o layout. Ele também precisa ser assíncrono, pois o layout interno pode ser pausado ou movido para um thread separado a qualquer momento. O primeiro argumento é uma matriz de filhos com os estilos que são aplicados a eles. 

O segundo contém o tamanho da borda, preenchimento e barra de rolagem, conhecidos como arestas do elemento . O terceiro define o restante do espaço utilizável chamado de restrições . O argumento final detalha as propriedades solicitadas a partir de inputProperties semelhantes à API do Paint.

child.layoutNextFragment({ fixedInlineSize: 
200 })

Toda essa informação é usada para gerar instruções de posicionamento chamadas fragmentos . O método layoutNextFragment obtém informações sobre o filho, como o tamanho desejado de inline e bloco, e o renderizador cuida do resto. O resultado é um conjunto de fragmentos prontos para o navegador pintar.

body {display: layout(my-layout);}

No lado CSS, o layout é definido como qualquer outro. A função de layout leva o nome fornecido ao registrar o worklet. Embora a opção esteja aberta a todos, é improvável que a maioria precise criar worklets de layout para cada site. Os worklets podem ser compartilhados e incluídos em um site sem conhecer o algoritmo subjacente. É mais provável que essa API seja usada como uma maneira de polilizar futuros sistemas de layout.

Postado em Blog
Escreva um comentário