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

Una Kravets

Publicado em 12 de julho de 2024

Prepare-se para um upgrade do CSS! A regra @property, que faz parte do conjunto de APIs do CSS Houdini, agora tem suporte total em todos os navegadores modernos. Esse recurso inovador oferece novos níveis de controle e flexibilidade para propriedades personalizadas do CSS (também conhecidas como variáveis do CSS), tornando as folhas de estilo mais inteligentes e dinâmicas.

Os benefícios de @property

  • Significado semântico:use @property para definir um tipo (sintaxe) para suas propriedades personalizadas. Isso informa ao navegador que tipo de dados sua propriedade personalizada contém (por exemplo, cores, comprimentos ou números), evitando resultados inesperados e oferecendo suporte a novas possibilidades, como a animação de gradientes.
  • Valores de substituição:não há mais estilos que desaparecem. Use @property para definir um valor inicial para uma propriedade personalizada. Se um valor inválido for atribuído mais tarde, o navegador vai usar 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 uma propriedade personalizada "padrão", defina um nome de propriedade precedido por um -- e atribua um valor a essa propriedade. 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 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. Ele inclui o tipo de sintaxe e define a herança como verdadeira ou falsa.

A vantagem dessa abordagem é que, com a propriedade padrão, você espera que ela contenha uma cor como valor e que você use essa cor em outro lugar na folha de estilo. Se alguém atualiza essa propriedade para ter um número como valor, qualquer uso da propriedade em outro lugar falha. Ao usar @property, há uma cor substituta definida, junto com um syntax que declara que essa propriedade precisa conter um valor de cor. Se um valor que não seja de cor for usado, o substituto será usado.

Demonstração: plano de fundo com gradiente cintilante

Uma das aplicações interessantes de @property é a animação suave de propriedades que antes eram impossíveis de serem aplicadas, como gradientes, que são percebidos como imagens pelo navegador. No entanto, se você atribuir um significado sintático às variáveis usando @property, elas poderão ser usadas em uma instrução de gradiente. Agora você está descrevendo uma animação entre dois valores declarados no gradiente, ativando a animação. Considere o seguinte exemplo: um card com uma animação de segundo plano sutil que consiste em dois gradientes radiais que mudam de cor em diferentes linhas do tempo:

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

Para isso, configure os valores das propriedades personalizadas 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, acesse-os para criar o plano de fundo de 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:

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

Conclusão

As propriedades personalizadas registradas do CSS são um recurso muito poderoso que estende a linguagem CSS, fornecendo significado e contexto às variáveis CSS. Agora, com a @property chegando à linha de base, esse superpoder do CSS está crescendo.

Informações adicionais