@property: variáveis CSS de última geração agora com suporte universal a navegadores

Una Kravets

Prepare-se para um poder do CSS! A regra @property, parte do conjunto de APIs CSS Houdini, agora é totalmente compatível com todos os navegadores modernos. Esse recurso inovador proporciona novos níveis de controle e flexibilidade para propriedades personalizadas de CSS (também conhecidas como variáveis CSS), tornando suas folhas de estilo mais inteligentes e dinâmicas.

Compatibilidade com navegadores

  • Chrome: 85
  • Borda: 85.
  • Firefox: 128
  • Safari: 16.4.

Origem

Os benefícios do @property

  • Significado semântico:use @property para definir um tipo (sintaxe) para suas propriedades personalizadas. Isso informa ao navegador o tipo de dados que sua propriedade personalizada contém (por exemplo, cores, comprimentos ou números), evitando resultados inesperados e oferecendo novas possibilidades, como a animação de gradientes.
  • Valores substitutos:chega de estilos desaparecendo. Use @property para definir um valor inicial de uma propriedade personalizada. Se um valor inválido for atribuído posteriormente, o navegador usará normalmente o substituto definido.
  • Melhoria no tratamento de erros:a segurança de tipo aprimorada e a capacidade de definir substitutos abrem novas oportunidades de teste e validação diretamente no CSS.

Criar propriedades personalizadas avançadas

Para criar um "padrão" propriedade personalizada, defina um nome de propriedade precedido por um -- e atribua um valor a ela. O valor dessas propriedades personalizadas é analisado como uma string pelo navegador.

O exemplo a seguir mostra como uma propriedade personalizada padrão (baseada em string) é inicializada.

:root {
 --myColor: hotpink;
}

Para aproveitar os benefícios dessas "propriedades personalizadas avançadas", incluindo a semântica além de uma string, registre sua propriedade personalizada do CSS com @property.

Neste exemplo, a mesma propriedade personalizada é inicializada com @property.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

A propriedade personalizada inicializada com @property fornece muito mais detalhes do que apenas um nome e um valor. Inclui o tipo de sintaxe e define herança como true ou false.

O benefício dessa abordagem é que, com a propriedade standard, você espera que a propriedade contenha uma cor como valor e a usará em outro lugar da folha de estilo. Se alguém atualizasse essa propriedade para ter um número como valor, qualquer uso da propriedade em outro lugar falharia. Ao usar @property, há uma cor substituta definida, além de um syntax que declara que essa propriedade precisa conter um valor de cor. Caso seja usado um valor que não seja de cor, o substituto será utilizado.

Demonstração: Plano de fundo gradiente piscando

Uma das aplicações legais do @property é a animação suave de propriedades que antes eram impossíveis de fazer a transição, como gradientes, que são percebidos como imagens pelo navegador. No entanto, se você fornecer significado sintático das variáveis com @property, elas poderão ser usadas em uma instrução de gradiente. Agora você está descrevendo uma animação entre dois valores declarados dentro do gradiente, permitindo a animação. Confira o exemplo a seguir: um cartão com uma animação de plano de fundo sutil que consiste em dois gradientes radiais que mudam de cor em diferentes linhas do tempo:

.
Uso de @property para estilizar cores animadas em um gradiente de plano de fundo.

Para isso, configure os valores da propriedade personalizada como cores:

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

Em seguida, você os acessa para criar o plano de fundo do gradiente inicial:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

Além disso, atualize os valores nos frames-chave:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

E anime cada um deles:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

Conclusão

As propriedades personalizadas registradas no CSS são um recurso muito eficiente que amplia a linguagem CSS, fornecendo significado e contexto às variáveis CSS. Agora, com o @property chegando na linha de base, esse superpoder do CSS está cada vez maior.

Informações adicionais