Propriedades personalizadas mais inteligentes com a nova API da Houdini

Transições e proteção de dados no CSS

Sam Richard

As propriedades personalizadas do CSS, também conhecidas como variáveis do CSS, permitem que você defina suas próprias propriedades no CSS e use os valores delas em todo o CSS. Embora sejam extremamente úteis hoje, elas têm falhas que podem dificultar o trabalho: elas podem receber qualquer valor e podem ser substituídas acidentalmente por algo inesperado. Elas sempre herdam os valores da página pai e não é possível fazer a transição delas. Com a API Level 1 de propriedades e valores do CSS do Houdini, agora disponível no Chrome 78, essas deficiências são superadas, tornando as propriedades personalizadas do CSS incrivelmente poderosas.

O que é o Houdini?

Antes de falar sobre a nova API, vamos falar rapidamente sobre o Houdini. A CSS-TAG Houdini Task Force, mais conhecida como CSS Houdini ou simplesmente Houdini, existe para "desenvolver recursos que expliquem a "magia" do estilo e do layout na Web". A coleção de especificações do Houdini foi projetada para liberar o poder do mecanismo de renderização do navegador, permitindo uma visão mais detalhada dos nossos estilos e a capacidade de estender nosso mecanismo de renderização. Com isso, os valores de CSS digitados no JavaScript e a polyfilling ou a invenção de novos CSS sem um impacto na performance finalmente são possíveis. Houdini tem o potencial de superpoder a criatividade na Web.

API CSS Properties and Values de nível 1

A API de propriedades e valores do CSS nível 1 (propriedades e valores do Houdini) permite estruturar nossas propriedades personalizadas. Esta é a situação atual ao usar propriedades personalizadas:

.thing {
  --my-color: green;
}

Como as propriedades personalizadas não têm tipos, elas podem ser substituídas de maneiras inesperadas. Por exemplo, considere o que acontece se você definir --my-color com um URL.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

Como --my-color não foi digitado, o código não sabe que um URL não é um valor de cor válido. Quando o usamos, ele volta aos valores padrão (preto para color, transparente para background). Com os elementos e valores de Houdini, as propriedades personalizadas podem ser registradas para que o navegador saiba o que deve ser.

Agora, a propriedade personalizada --my-color está registrada como uma cor. Isso informa ao navegador quais tipos de valores são permitidos e como ele pode digitar e tratar essa propriedade.

Anatomia de uma propriedade registrada

O registro de uma propriedade é assim:

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Ele oferece as seguintes opções:

name: string

O nome da propriedade personalizada.

syntax: string

Como analisar a propriedade personalizada. Confira uma lista completa de valores possíveis na especificação Valores e unidades do CSS. O padrão é *.

inherits: boolean

Indica se o valor é herdado do pai. O valor padrão é true.

initialValue: string

Valor inicial da propriedade personalizada.

Vamos dar uma olhada mais detalhada em syntax. Há várias opções válidas que variam de números a cores e tipos de <custom-ident>. Essas sintaxes também podem ser modificadas usando os seguintes valores:

• Anexar + significa que ele aceita uma lista de valores dessa sintaxe separados por espaços. Por exemplo, <length>+ seria uma lista de comprimentos separada por espaços.
• O apêndice # significa que ele aceita uma lista separada por vírgulas de valores dessa sintaxe. Por exemplo, <color># seria uma lista de cores separada por vírgulas.
• Adicionar | entre sintaxes ou identificadores significa que qualquer uma das opções fornecidas é válida. Por exemplo, <color># | <url> | magic permitiria uma lista de cores separada por vírgulas, um URL ou a palavra magic.

Pegadinhas

Há dois problemas com os objetos e valores do Houdini. A primeira é que, depois de definida, não é possível atualizar uma propriedade registrada. Se tentar registrar novamente uma propriedade, um erro será exibido, indicando que ela já foi definida.

Em segundo lugar, ao contrário das propriedades padrão, as propriedades registradas não são validadas quando são analisadas. Em vez disso, elas são validadas quando são calculadas. Isso significa que valores inválidos não vão aparecer como inválidos ao inspecionar as propriedades do elemento, e incluir uma propriedade inválida após uma válida não vai retornar à válida. Uma propriedade inválida vai retornar ao padrão da propriedade registrada.

Como animar propriedades personalizadas

Uma propriedade personalizada registrada oferece um bônus divertido além da verificação de tipo: a capacidade de animá-la. Um exemplo de animação básica é assim:

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

Quando você passa o cursor sobre o botão, ele muda de vermelho para verde. Sem registrar a propriedade, ela vai pular de uma cor para outra. Isso acontece porque, sem o registro, o navegador não sabe o que esperar entre um valor e o próximo e, portanto, não pode garantir a capacidade de transição. No entanto, esse exemplo pode ser avançado para animar gradientes CSS. O CSS abaixo pode ser escrito com a mesma propriedade registrada:

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

Isso vai animar nossa propriedade personalizada que faz parte do linear-gradient, animando nosso gradiente linear. Confira o Glitch abaixo para ver o código completo em ação e testá-lo.

Conclusão

O Houdini está a caminho para os navegadores e, com ele, novas maneiras de trabalhar e estender o CSS. Com a API Paint já enviada e agora as propriedades e Vals personalizadas, nossa caixa de ferramentas de criativos está se expandindo. Assim, podemos definir propriedades CSS tipadas e usá-las para criar e animar designs novos e incríveis. Há mais novidades a caminho na fila de problemas do Houdini, onde você pode enviar feedback e conferir o que vem por aí. O Houdini existe para desenvolver recursos que explicam a "magia" do estilo e do layout na Web. Então, aproveite e use esses recursos mágicos.

Foto de Maik Jonietz no Unsplash (links em inglês)