Propriedades personalizadas CSS: declaração e atualização
Declare variáveis com -- em :root, referencie-as com var() e atualize-as dinamicamente com JavaScript para criar temas em tempo real.
Propriedades personalizadas CSS: declaração e atualização é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Recapitulação: declarando e definindo o escopo
As propriedades personalizadas CSS são declaradas com o prefixo -- em qualquer elemento. As propriedades declaradas em :root ficam disponíveis globalmente. Os elementos filhos herdam os valores e podem substituí-los localmente.
:root {
--spacing: 8px;
--color-brand: #6366f1;
}
.card {
--spacing: 12px; /* local override for .card and its children */
padding: var(--spacing);
}Atualizações em tempo real via JavaScript
As propriedades personalizadas podem ser alteradas em tempo de execução. Use element.style.setProperty('--name', value) para substituições no nível do elemento ou atualize uma variável global em :root para afetar instantaneamente todos os consumidores.
// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');
// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');Lendo valores de propriedades personalizadas em JS
Leia uma propriedade personalizada com getComputedStyle(element).getPropertyValue('--name').trim(). Isso lê o valor calculado (em cascata), não apenas o valor declarado diretamente no elemento.
const brandColor = getComputedStyle(document.documentElement)
.getPropertyValue('--color-brand')
.trim();
console.log(brandColor); // '#6366f1'Animando propriedades personalizadas
As propriedades personalizadas podem ser interpoladas pelo navegador usando @property (Houdini) ou usadas em transições quando combinadas com calc(). Sem @property, os navegadores não conseguem fazer a transição direta entre valores de variáveis.
@property — Propriedades personalizadas registradas
A regra @property do CSS registra uma propriedade personalizada com um tipo, um valor inicial e uma regra de herança. As propriedades registradas podem ser transicionadas e animadas nativamente.
@property --brand-opacity {
syntax: '<number>';
inherits: false;
initial-value: 1;
}
.card {
opacity: var(--brand-opacity);
transition: --brand-opacity 0.3s;
}
.card:hover {
--brand-opacity: 0.7;
}Sistemas de tokens com propriedades personalizadas
Modelo de tokens de projeto: armazene todas as decisões de projeto como propriedades personalizadas. Os componentes consomem tokens, não valores codificados diretamente. Alterar um token propaga-se por toda parte.
:root {
/* Colour tokens */
--token-primary: #6366f1;
--token-primary-hover: #4f46e5;
--token-surface: #ffffff;
--token-on-surface: #1f2937;
/* Spacing tokens */
--token-space-sm: 8px;
--token-space-md: 16px;
--token-space-lg: 24px;
}Propriedades personalizadas responsivas
Altere os valores das propriedades personalizadas dentro de consultas de mídia. Os componentes que usam as variáveis se adaptam automaticamente — isso é mais limpo do que escrever regras separadas para cada componente em cada ponto de interrupção.
:root {
--container-max: 640px;
--font-size-base: 15px;
}
@media (min-width: 1024px) {
:root {
--container-max: 1280px;
--font-size-base: 16px;
}
}Propriedades personalizadas em calc()
Use variáveis dentro de calc() para obter espaçamento e dimensões derivados. Isso cria um sistema de dimensões coerente e matematicamente consistente.
:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); } /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); } /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */Tematizando várias marcas
Defina tokens de tema diferentes por atributo de dados. Uma página pode oferecer suporte a vários temas para personalização com marca branca.
[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }Propriedades personalizadas em SVG
Atributos SVG como fill e stroke podem usar propriedades personalizadas. Isso permite tematizar ícones a partir do CSS sem modificar a marcação SVG.
/* CSS */
:root { --icon-fill: #6366f1; }
/* SVG inline or referenced */
svg { fill: var(--icon-fill); }Depurando propriedades personalizadas
No Chrome DevTools, selecione um elemento e procure os valores das propriedades personalizadas na aba Calculado. O painel Estilos mostra onde cada variável é declarada. A seção Herdado mostra as variáveis dos elementos pai.
Verificação rápida
Qual método JavaScript atualiza uma propriedade personalizada CSS em um elemento?
Recapitulação: propriedades personalizadas CSS em detalhes
Declare em :root para obter propriedades globais; substitua nos descendentes para obter um escopo local. Atualize com style.setProperty a partir de JS. Leia com getComputedStyle. @property habilita transições nativas. Use propriedades personalizadas como tokens de projeto para uma única fonte de verdade. Substitua-as em consultas de mídia para obter tokens responsivos.
Perguntas Frequentes
A aula “Propriedades personalizadas CSS: declaração e atualização” é grátis?
Sim — o texto completo de “Propriedades personalizadas CSS: declaração e atualização” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Propriedades personalizadas CSS: declaração e atualização”?
Declare variáveis com -- em :root, referencie-as com var() e atualize-as dinamicamente com JavaScript para criar temas em tempo real. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 1 de 4.
Quanto tempo leva a aula “Propriedades personalizadas CSS: declaração e atualização”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Propriedades personalizadas CSS: declaração e atualização
- Transições: propriedade duração temporização
- Animações com @keyframes
- Respeitando prefers-reduced-motion