Proprietà personalizzate CSS: dichiarazione e aggiornamento
Dichiarare variabili con -- su :root, riferirsi a esse con var() e aggiornarle dinamicamente con JavaScript per applicare temi in tempo reale.
Proprietà personalizzate CSS: dichiarazione e aggiornamento è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Riepilogo: dichiarazione e ambito
Le proprietà personalizzate CSS vengono dichiarate con il prefisso -- su qualsiasi elemento. Le proprietà dichiarate su :root sono disponibili globalmente. Gli elementi figli ereditano i valori e possono sovrascriverli localmente.
:root {
--spacing: 8px;
--color-brand: #6366f1;
}
.card {
--spacing: 12px; /* local override for .card and its children */
padding: var(--spacing);
}Aggiornamenti in tempo reale con JavaScript
Le proprietà personalizzate possono essere modificate durante l'esecuzione. Utilizzi element.style.setProperty('--name', value) per le sovrascritture a livello di elemento, oppure aggiorni una variabile globale su :root per modificare istantaneamente tutti gli elementi che la utilizzano.
// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');
// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');Leggere i valori delle proprietà personalizzate in JS
Legga una proprietà personalizzata con getComputedStyle(element).getPropertyValue('--name').trim(). In questo modo legge il valore calcolato (determinato dalla cascata), non solo quello inline.
const brandColor = getComputedStyle(document.documentElement)
.getPropertyValue('--color-brand')
.trim();
console.log(brandColor); // '#6366f1'Animare le proprietà personalizzate
Le proprietà personalizzate possono essere interpolate dal browser usando @property (Houdini) oppure impiegate nelle transizioni insieme a calc(). Senza @property, i browser non possono eseguire direttamente la transizione tra valori di variabili.
@property — Proprietà personalizzate registrate
La regola CSS @property registra una proprietà personalizzata con un tipo, un valore iniziale e una regola di ereditarietà. Le proprietà registrate possono essere sottoposte a transizioni e animate in modo nativo.
@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;
}Sistemi di token con proprietà personalizzate
Modello dei design token: memorizzi tutte le decisioni progettuali come proprietà personalizzate. I componenti utilizzano i token, non valori hardcoded. Modificando un token, la modifica si propaga ovunque.
: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;
}Proprietà personalizzate responsive
Modifichi i valori delle proprietà personalizzate all'interno delle media query. I componenti che utilizzano le variabili si adattano automaticamente: è più ordinato che scrivere regole separate per ogni breakpoint.
:root {
--container-max: 640px;
--font-size-base: 15px;
}
@media (min-width: 1024px) {
:root {
--container-max: 1280px;
--font-size-base: 16px;
}
}Proprietà personalizzate in calc()
Utilizzi le variabili all'interno di calc() per ricavare spaziature e dimensioni. In questo modo crea un sistema di dimensionamento 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 */Temi per più brand
Imposti token di tema diversi per ogni attributo data. Una singola pagina può supportare più temi per una personalizzazione white-label.
[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }Proprietà personalizzate in SVG
Gli attributi SVG come fill e stroke possono utilizzare proprietà personalizzate. In questo modo può tematizzare le icone tramite CSS senza modificare il markup SVG.
/* CSS */
:root { --icon-fill: #6366f1; }
/* SVG inline or referenced */
svg { fill: var(--icon-fill); }Eseguire il debug delle proprietà personalizzate
In Chrome DevTools, selezioni un elemento e cerchi i valori delle proprietà personalizzate nella scheda Computed. Il riquadro Styles mostra dove è dichiarata ogni variabile. La sezione Inherited mostra le variabili ereditate dagli elementi genitori.
Verifica rapida
Quale metodo JavaScript aggiorna una proprietà personalizzata CSS su un elemento?
Riepilogo: proprietà personalizzate CSS in dettaglio
Dichiari le proprietà su :root per renderle globali; le sovrascriva sugli elementi discendenti per limitarne l'ambito. Le aggiorni con style.setProperty da JS. Le legga con getComputedStyle. @property abilita le transizioni native. Le utilizzi come design token per avere un'unica fonte di verità. Le sovrascriva nelle media query per ottenere token responsive.
Domande Frequenti
La lezione «Proprietà personalizzate CSS: dichiarazione e aggiornamento» è gratuita?
Sì — il testo completo di «Proprietà personalizzate CSS: dichiarazione e aggiornamento» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Proprietà personalizzate CSS: dichiarazione e aggiornamento»?
Dichiarare variabili con -- su :root, riferirsi a esse con var() e aggiornarle dinamicamente con JavaScript per applicare temi in tempo reale. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Proprietà personalizzate CSS: dichiarazione e aggiornamento»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Proprietà personalizzate CSS: dichiarazione e aggiornamento
- Transizioni: proprietà, durata e temporizzazione
- Animazioni @keyframes
- Rispettare prefers-reduced-motion