Propriedades personalizadas mais inteligentes com a nova API da Houdini

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

Sam Richard

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

O que é o Houdini?

Antes de falar sobre a nova API, vamos falar rapidamente sobre o Houdini. A força-tarefa CSS-TAG Houdini, mais conhecida como CSS Houdini ou simplesmente Houdini, existe para "desenvolver recursos que explicam a 'mágica' do estilo e do layout na Web". A coleção de especificações do Houdini foi projetada para abrir o poder do mecanismo de renderização do navegador, permitindo uma compreensão mais profunda dos nossos estilos e a capacidade de estender nosso mecanismo de renderização. Com isso, finalmente é possível digitar valores CSS em JavaScript e usar polyfills ou inventar novos CSS sem prejudicar o desempenho. O Houdini tem o potencial de potencializar a criatividade na Web.

API de propriedades e valores CSS nível 1

A API CSS Properties and Values Level 1 (propriedades e valores do Houdini) permite estruturar as 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);
}

Nesse caso, como --my-color não é tipado, ele não sabe que um URL não é um valor de cor válido. Quando a usamos, ela volta para os valores padrão (preto para color, transparente para background). Com as propriedades e os valores do 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

Para registrar uma propriedade, faça o seguinte:

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 de valores e unidades do CSS. O padrão é *.

inherits: boolean

Se ele herda o valor do pai. O valor padrão é true.

initialValue: string

Valor inicial da propriedade personalizada.

Analisando o syntax em mais detalhes. Há várias opções válidas, que vão de números a cores e tipos <custom-ident>. Essas sintaxes também podem ser modificadas usando os seguintes valores:

  • Adicionar + ao final significa que ele aceita uma lista de valores separados por espaços dessa sintaxe. Por exemplo, <length>+ seria uma lista de comprimentos separada por espaços.
  • Anexar# significa que ele aceita uma lista separada por vírgulas de valores dessa sintaxe. Por exemplo, <color># seria uma lista separada por vírgulas de cores.
  • 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.

Gotchas

Há duas pegadinhas com as propriedades e os valores do Houdini. A primeira é que, depois de definida, não é possível atualizar uma propriedade registrada. Se você tentar registrar novamente uma propriedade, um erro será gerado 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, eles são validados quando são calculados. 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 voltar para a válida. No entanto, uma propriedade inválida vai voltar para o 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ê passar o cursor sobre o botão, ele vai mudar de vermelho para verde. Sem registrar a propriedade, ela vai pular de uma cor para outra, 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 fazer a transição. No entanto, esse exemplo pode ser levado um passo adiante para animar gradientes CSS. O CSS a seguir 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 Codepen abaixo para ver o código completo em ação e testá-lo.

Conclusão

O Houdini está chegando aos navegadores e, com ele, novas maneiras de trabalhar e estender o CSS. Com a API Paint já lançada e agora as propriedades e os valores personalizados, nossa caixa de ferramentas criativas está se expandindo, permitindo que definamos propriedades CSS tipadas e as usemos para criar e animar designs novos e interessantes. Há mais novidades a caminho na fila de problemas do Houdini, em que você pode dar feedback e ver o que vem por aí. O Houdini existe para desenvolver recursos que explicam a "mágica" de estilo e layout na Web. Então, aproveite esses recursos mágicos.