A regra CSS @property

Definição e uso

CSS @property Regras usadas para definir atributos CSS personalizados diretamente na tabela de estilos, sem a necessidade de executar nenhum JavaScript.

@property As regras têm funções de verificação de tipo de dados e restrições, podem configurar valores padrão e definir se o atributo pode herdar valores.

Usar @property Benefícios:

• Verificação de tipo e restrições: é necessário especificar o tipo de dados do atributo personalizado, por exemplo <number>, <color>, <length> etc. Isso pode evitar erros e garantir o uso correto dos atributos personalizados.
• Configurar valor padrão: pode ser configurado um valor padrão para o atributo personalizado. Isso garante que, se um valor inválido for atribuído posteriormente, o navegador usará o valor de fallback definido.
• Configurar comportamento de herança: é necessário especificar se o atributo personalizado pode herdar o valor do elemento pai.

Exemplo: definir atributos personalizados

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

A definição acima indica que --my-color é um atributo de cor, que pode herdar o valor do elemento pai e tem o valor padrão lightgray.

Usar atributos personalizados em CSS:

body {}}
  backgound-color: var(--my-color);
}

Exemplo

Exemplo 1

Especifica duas propriedades personalizadas para gradiente - e usa-as para animar o gradiente:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Experimente você mesmo

Exemplo 2

Especifica duas propriedades personalizadas: uma para o tamanho do item e outra para a cor do item:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Experimente você mesmo

Sintaxe CSS

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

Valor da propriedade

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a regra @.

Páginas relacionadas

Tutorial:A regra CSS @property