@property CSS: variáveis com super poderes

Umas das novidades mais esperadas no CSS é a atualização da API de propriedades com o @property CSS. Ela vem para dar um significado semântico as propriedades CSS, além de definir valores iniciais e alternativos para variáveis.

Tabela de conteúdo

A importância de ser um significado semântico as propriedades CSS é o fato que os navegadores atualmente tratam todas as propriedades CSS como string. @Property CSS veio para dar mais significado as variáveis CSS.

Como @property CSS funciona

Melhor forma de explicar @property css é mostrando exemplos, essa API pode ser invocada em duas maneiras com CSS ou JavaScript. Primeiramente abordaremos como trabalhamos com essa API no nosso CSS:

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}Code language: JavaScript (javascript)

Na especificação inicial de variáveis CSS, definíamos apenas strings agora você pode acessar --colorPrimary como qualquer outra propriedade personalizada CSS, via var(--colorPrimary). No entanto, a diferença aqui é que --colorPrimary não é lido apenas como uma string, dentro do nosso CSS ele será reconhecido como uma cor.

Valores alternativos para propriedades CSS

Como em qualquer outra propriedade personalizada, você pode obter (usando var) ou definir (escrever/reescrever) valores, mas com as propriedades personalizadas, se você definir um valor falso ao substituí-lo, o mecanismo de renderização CSS enviará o valor inicial como o seu valor de fallback.

//exemplo de atribução de variáveis com @property CSS
.card {
  background-color: var(--colorPrimary); /* magenta */
}

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

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

Considere o exemplo acima. A variável --colorPrimary tem um valor inicial de magenta. Mas o desenvolvedor deu-lhe o valor inválido “23”.

Sem @property, o analisador CSS ignoraria o código inválido. Agora, o analisador volta para magenta. Isso permite verdadeiros fallbacks e testes dentro do CSS.

Sintaxe com @property

Com o recurso de sintaxe, agora você pode 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

O fato de nos definirmos uma sintaxe para as nossas variáveis permitem que o navegador verifique o tipo de propriedades personalizadas. Isso tem muitos benefícios.

Exemplo criado pela una com property css

Um desses benefícios é a possibilidade de animar variáveis que antes não eram possíveis, um vídeo criado pela Una Kravets no blog do Google web dev exemplifica muito bem isso.

Atualmente sem uma @property CSS, não há como animar suavemente (ou interpolar) entre os valores de gradiente, pois cada declaração de gradiente é analisada como uma string, e para o navegador fazer uma interpolação de um valor em texto é quase impossível.

O navegador sem suporte só é capaz de entender essa alteração como uma string indo do ponto A ao ponto B. Não há oportunidade de interpolar os valores, portanto, você não vê essa transição suave.

No entanto, se você declarar o tipo de sintaxe ao escrever propriedades personalizadas e, em seguida, usar essas propriedades personalizadas para ativar a animação, verá a transição. Você pode instanciar a propriedade personalizada --gradPoint assim:

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}Code language: JavaScript (javascript)

E quando chegar a hora de animá-lo, você pode atualizar o valor dos 40% iniciais para 100%:

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}Code language: CSS (css)

Conclusão

A regra @property torna uma tecnologia interessante ainda mais acessível, permitindo que você escreva CSS semanticamente significativo no próprio CSS. Atualmente 74% dos navegadores já passaram a dar suporte ao recurso:

Lista de navegadores que suportam @property CSS

O ano de 2022 trouxe muitas novidades para CSS, é uma temporada muito interessante para o desenvolvimento de interfaces com CSS. Para mais tutoriais relacionados a desenvolvimento front-end confira os posts:

Referência: https://web.dev/at-property/