@property: como atribuir superpoderes às variáveis CSS

Una Kravets

CSS Houdini é um termo abrangente que cobre uma de baixo nível de APIs que expõem partes do mecanismo de renderização CSS e dão aos desenvolvedores o acesso ao modelo de objetos CSS. Esse é um grande mudança para o ecossistema CSS, pois permite que os desenvolvedores informem ao navegador como para ler e analisar CSS personalizado sem esperar que os fornecedores do navegador forneçam suporte integrado para esses recursos. Muito emocionante!

Uma das adições mais interessantes ao CSS no escopo da Houdini é o Propriedades e valores API.

Essa API potencializa suas propriedades personalizadas do CSS (também conhecidas como variáveis CSS) concedendo a elas significado semântico (definido por uma sintaxe) e até mesmo valores substitutos, o que permite o teste de CSS.

Como gravar propriedades personalizadas do Houdini

Aqui está um exemplo de como configurar uma propriedade personalizada (pense: variável CSS), mas agora com uma sintaxe (tipo), um valor inicial (substituto) e um booleano de herança (não ele herdará ou não o valor do pai? A maneira atual de fazer isso é usando CSS.registerProperty() em JavaScript, mas em navegadores compatíveis, é possível usar @property:

Arquivo JavaScript separado (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
Incluído no arquivo CSS (Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Agora você pode acessar --colorPrimary como qualquer outra propriedade personalizada do CSS usando var(--colorPrimary). No entanto, a diferença aqui é que --colorPrimary não é ler apenas como uma string. Ele tem dados!

Valores substitutos

Como em qualquer outra propriedade personalizada, você pode obter (usando var) ou definir (gravar/reescrever), mas com as propriedades personalizadas Houdini, se você definir um valor valor ao substituí-lo, o mecanismo de renderização CSS enviará o valor inicial (o valor substituto) em vez de ignorar a linha.

Considere o exemplo abaixo. A variável --colorPrimary tem um initial-value de magenta. Mas o desenvolvedor deu a ela a função valor "23". Sem @property, o analisador de CSS ignoraria o código inválido. Agora, o analisador volta para magenta. Isso permite substitutos e testes no CSS. Tudo pronto.

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Sintaxe

Com o recurso de sintaxe, agora é possível escrever CSS semântico especificando um tipo. Os tipos atuais permitidos incluem:

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (uma string de identificador personalizado)

Definir uma sintaxe permite que o navegador verifique o tipo das propriedades personalizadas. Isso gera muitos benefícios.

Para ilustrar este ponto, vou mostrar como animar um gradiente. Atualmente, não há como animar suavemente (ou interpolar) entre valores de gradiente, pois cada declaração de gradiente é analisada como uma string.

Usar uma propriedade personalizada com um "número" a sintaxe, o gradiente à esquerda mostra uma a transição entre os valores das paradas. O gradiente à direita usa uma propriedade personalizada padrão (nenhuma sintaxe definida) e mostra uma transição brusca.

Neste exemplo, a porcentagem de parada do gradiente está sendo animada a partir de um ponto de 40% a 100% ao passar o cursor. Você verá um transição suave dessa cor do gradiente superior para baixo.

O navegador à esquerda suporta a API Houdini Properties and Values, permitindo uma transição de parada de gradiente suave. O navegador à direita não. A navegador não compatível só consegue entender essa mudança como uma string do ponto A ao ponto B. Não há oportunidade de interpolar os valores, e portanto, a transição não fica tranquila.

No entanto, se você declarar o tipo de sintaxe ao criar propriedades personalizadas e depois usar dessas propriedades personalizadas para ativar a animação, você verá a transição. Você podem instanciar a propriedade personalizada --gradPoint assim:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Em seguida, quando chegar a hora de fazer a animação, atualize o valor inicial de 40% para 100%:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

Isso permitirá a transição suave do gradiente.

Bordas de gradiente em transição suave. Confira a demonstração do Glitch

Conclusão

A regra @property torna uma tecnologia interessante ainda mais acessível ao o que permite escrever CSS semanticamente significativo no próprio CSS. Para saber mais sobre o CSS Houdini e a API de propriedades e valores, veja estes recursos:

Foto de Cristian Escobar no Unsplash.