0Pricing
CSS Academy · Aula

API de propriedades e valores CSS (@property)

Registre propriedades personalizadas com tipos e herança usando @property para criar variáveis CSS animáveis.

API de propriedades e valores CSS (@property) é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que é @property?

@property é a forma do CSS de registrar uma propriedade personalizada com um tipo, um comportamento de herança e um valor inicial. É a forma declarativa da API de propriedades e valores do CSS (CSS.registerProperty).

Sintaxe de @property

Registre uma propriedade personalizada com três descritores obrigatórios:

<div class="box"></div>

Descritor de sintaxe

O descritor syntax define o tipo da propriedade usando nomes de tipos do CSS:

  • "<number>", "<integer>", "<percentage>"
  • "<angle>", "<color>", "<length>"
  • "<image>", "<transform-list>"
  • "*" — aceita qualquer valor (como uma propriedade não registrada)

Descritor de herança

Controla se a propriedade é herdada pelo DOM. Defina false para propriedades que devem ficar isoladas por elemento.

Descritor de valor inicial

Fornece um valor inicial garantido quando a propriedade não é definida. Isso torna a propriedade animável.

Animando propriedades personalizadas

O principal benefício de @property: propriedades personalizadas registradas podem ser transicionadas e animadas porque o navegador conhece seu tipo e pode interpolar entre os valores:

<div class="element is-hovered"></div>

Sem @property

Sem registro, o CSS não conhece os tipos das propriedades personalizadas. As transições entre dois valores de variáveis mudam abruptamente em vez de interpolar — o navegador não consegue calcular o ponto intermediário de um tipo desconhecido.

@property para animação de gradientes

Animando pontos de parada de gradientes (antes impossível sem @property):

<div class="loader loading"></div>

Equivalente em JavaScript

Você também pode registrar propriedades usando a API JavaScript:

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

Compatibilidade com navegadores

@property é compatível com Chrome 85+, Edge 85+, Safari 16.4+ e Firefox 128+. Está amplamente disponível nos navegadores modernos.

Usos práticos de @property

Casos de uso comuns:

  • Animar posições e cores de gradientes
  • Animar matiz/saturação em cores HSL
  • Animações de preenchimento de barras de progresso
  • Animações de contadores para revelar números
  • Transições suaves entre os modos escuro e claro por meio de animações de tokens de cor

Verificação rápida

Por que @property é obrigatório para animar propriedades personalizadas do CSS?

Recapitulação

@property registra propriedades personalizadas com um tipo de syntax, uma sinalização inherits e um initial-value. Propriedades registradas podem ser animadas e receber transições porque o navegador consegue interpolar seus valores tipados. Isso permite animações de gradientes, transições de matiz e animações de contadores que são impossíveis com propriedades personalizadas não registradas.

Perguntas Frequentes

A aula “API de propriedades e valores CSS (@property)” é grátis?

Sim — o texto completo de “API de propriedades e valores CSS (@property)” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “API de propriedades e valores CSS (@property)”?

Registre propriedades personalizadas com tipos e herança usando @property para criar variáveis CSS animáveis. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “API de propriedades e valores CSS (@property)”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O modelo de objetos tipados do CSS (OM)
  2. API de propriedades e valores CSS (@property)
  3. API CSS Paint: Worklets
  4. API CSS de layout e escopo
← Voltar para CSS Academy