Propriedades personalizadas mais inteligentes com a nova API da Houdini

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

Sam Richard

Com as propriedades personalizadas do CSS, também conhecidas como variáveis CSS, você pode definir suas próprias propriedades no CSS e usar os valores delas em todo o CSS. Embora sejam incrivelmente úteis atualmente, eles têm limitações que podem dificultar o trabalho: podem assumir qualquer valor e podem ser acidentalmente substituídos por algo inesperado, eles sempre herdam os valores dos pais e não é possível fazer a transição deles. Com a API de valores e propriedades CSS de nível 1 da Houdini, agora disponível no Chrome 78, essas limitações são superadas, tornando as propriedades personalizadas do CSS incrivelmente eficientes.

O que é Houdini?

Antes de falarmos sobre a nova API, vamos falar rapidamente sobre a Houdini. A CSS-TAG Hudini Task Force, mais conhecida como CSS Houdini ou simplesmente Houdini, foi criada para "desenvolver recursos que explicam a "mágica" do estilo e layout na Web. A coleção de especificações do Hudini foi projetada para aumentar a eficiência do mecanismo de renderização do navegador, permitindo informações mais detalhadas dos nossos estilos e a capacidade de ampliar nosso mecanismo de renderização. Com isso, os valores CSS digitados em JavaScript e o polyfilling ou a invenção de um novo CSS sem um impacto no desempenho são finalmente possíveis. Houdini tem o potencial de superpoder a criatividade na Web.

API CSS Properties and Values nível 1

O nível 1 da API CSS Properties and Values (acessórios e valores do Hudini) permite dar estrutura às 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);
}

Aqui, como --my-color não é digitado, não é possível saber que o URL não é um valor de cor válido. Quando o usamos, ele retorna aos valores padrão (preto para color, transparente para background). Com Houdini Props e Vals, 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 é semelhante ao 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. Encontre uma lista completa de valores possíveis na especificação Valores e unidades CSS. O valor padrão é *.

inherits: boolean

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

initialValue: string

Valor inicial da propriedade personalizada.

Analisando mais de perto syntax. Há várias opções válidas, de números a cores e tipos <custom-ident>. Essas sintaxes também podem ser modificadas com o uso dos seguintes valores

  • Anexar + significa que ele aceita uma lista de valores separados por espaço dessa sintaxe. Por exemplo, <length>+ seria uma lista de comprimentos separados por espaços.
  • Anexar # significa que ele aceita uma lista de valores separados por vírgulas 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 permite uma lista de cores separada por vírgulas, um URL ou a palavra magic.

pegadinhas

Tem duas pegadinhas com Houdini Props e Vals. A primeira é que, uma vez definida, não há como atualizar uma propriedade registrada, e tentar registrar novamente uma propriedade vai gerar um erro 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 computadas. Isso significa que valores inválidos não aparecerão como inválidos ao inspecionar as propriedades do elemento, e que incluir uma propriedade inválida após uma válida não voltará ao válido. No entanto, uma propriedade inválida 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 básico de animação é 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 mouse sobre o botão, a animação passa de vermelho para verde! Sem registrar a propriedade, ele vai passar de uma cor para outra. Porque, sem ser registrado, 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 deles. No entanto, esse exemplo pode ser levado um passo adiante para animar os gradientes CSS. O CSS a seguir pode ser criado 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 o gradiente linear. Confira o Glitch abaixo para ver o código completo em ação e testar por conta própria.

Conclusão

A Houdini está a caminho dos navegadores e, com ela, formas totalmente novas de trabalhar e estender o CSS. Com a API Paint já enviada e agora Custom Props e Vals, nossa caixa de ferramentas de criativos está se expandindo, permitindo definir propriedades CSS digitadas e usá-las para criar e animar designs novos e interessantes. Também há mais a caminho na fila de problemas do Houdini, onde você pode enviar feedback e saber o que vem a seguir para Houdini. A Houdini existe para desenvolver recursos que explicam a "mágica" do estilo e layout na Web, então participe e faça bom uso desses recursos mágicos.

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