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.
Os benefícios do @property
- Significado semântico:use
@propertypara 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
@propertypara definir um valor inicial para 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 uma propriedade personalizada "padrão", 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:
@property para animar as cores 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.