Propriétés personnalisées CSS : déclaration et mise à jour
Déclarez des variables avec -- sur :root, référencez-les avec var() et mettez-les à jour dynamiquement avec JavaScript pour créer des thèmes en temps réel.
Propriétés personnalisées CSS : déclaration et mise à jour est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Récapitulatif : déclarer et définir la portée
Les propriétés personnalisées CSS se déclarent avec le préfixe -- sur n'importe quel élément. Les propriétés déclarées sur :root sont disponibles partout. Les éléments enfants héritent de leurs valeurs et peuvent les remplacer localement.
:root {
--spacing: 8px;
--color-brand: #6366f1;
}
.card {
--spacing: 12px; /* local override for .card and its children */
padding: var(--spacing);
}Mises à jour en direct avec JavaScript
Les propriétés personnalisées peuvent être modifiées à l'exécution. Utilisez element.style.setProperty('--name', value) pour remplacer une valeur au niveau d'un élément, ou mettez à jour une variable globale sur :root afin de modifier instantanément tous les éléments qui l'utilisent.
// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');
// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');Lire les valeurs des propriétés personnalisées en JS
Lisez une propriété personnalisée avec getComputedStyle(element).getPropertyValue('--name').trim(). Cette méthode lit la valeur calculée (en cascade), et pas seulement la valeur définie en ligne.
const brandColor = getComputedStyle(document.documentElement)
.getPropertyValue('--color-brand')
.trim();
console.log(brandColor); // '#6366f1'Animer les propriétés personnalisées
Les propriétés personnalisées peuvent être interpolées par le navigateur grâce à @property (Houdini), ou utilisées dans des transitions lorsqu'elles sont combinées avec calc(). Sans @property, les navigateurs ne peuvent pas effectuer directement une transition entre des valeurs de variable.
@property — Propriétés personnalisées enregistrées
La règle CSS @property enregistre une propriété personnalisée avec un type, une valeur initiale et une règle d'héritage. Les propriétés enregistrées peuvent être interpolées et animées nativement.
@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;
}Systèmes de jetons avec les propriétés personnalisées
Modèle de jetons de conception : stockez toutes les décisions de conception sous forme de propriétés personnalisées. Les composants utilisent les jetons, et non des valeurs codées en dur. La modification d'un jeton se propage partout.
: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;
}Propriétés personnalisées adaptatives
Modifiez les valeurs des propriétés personnalisées dans les requêtes média. Les composants qui utilisent ces variables s'adaptent automatiquement : c'est plus propre que d'écrire des règles distinctes pour chaque composant et chaque point de rupture.
:root {
--container-max: 640px;
--font-size-base: 15px;
}
@media (min-width: 1024px) {
:root {
--container-max: 1280px;
--font-size-base: 16px;
}
}Propriétés personnalisées dans calc()
Utilisez des variables dans calc() pour dériver l'espacement et les dimensions. Vous créez ainsi un système de dimensionnement cohérent sur le plan mathématique.
: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 */Thématiser plusieurs marques
Définissez différents jetons de thème pour chaque attribut de données. Une même page peut prendre en charge plusieurs thèmes grâce à la personnalisation en marque blanche.
[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }Propriétés personnalisées dans SVG
Les attributs SVG tels que fill et stroke peuvent utiliser des propriétés personnalisées. Vous pouvez ainsi thématiser les icônes depuis CSS sans modifier le balisage SVG.
/* CSS */
:root { --icon-fill: #6366f1; }
/* SVG inline or referenced */
svg { fill: var(--icon-fill); }Déboguer les propriétés personnalisées
Dans Chrome DevTools, sélectionnez un élément et consultez l'onglet des valeurs calculées pour voir les valeurs des propriétés personnalisées. Le panneau des styles indique où chaque variable est déclarée. La section des propriétés héritées affiche les variables provenant des éléments parents.
Vérification rapide
Quelle méthode JavaScript met à jour une propriété personnalisée CSS sur un élément ?
Récapitulatif : les propriétés personnalisées CSS en profondeur
Déclarez-les sur :root pour les rendre globales ; remplacez-les sur les descendants pour une portée locale. Mettez-les à jour avec style.setProperty depuis JS. Lisez-les avec getComputedStyle. @property permet les transitions natives. Utilisez-les comme jetons de conception pour disposer d'une source unique de vérité. Remplacez-les dans les requêtes média pour créer des jetons adaptatifs.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Propriétés personnalisées CSS : déclaration et mise à jour » est-elle gratuite ?
Oui — le texte complet de « Propriétés personnalisées CSS : déclaration et mise à jour » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Propriétés personnalisées CSS : déclaration et mise à jour » ?
Déclarez des variables avec -- sur :root, référencez-les avec var() et mettez-les à jour dynamiquement avec JavaScript pour créer des thèmes en temps réel. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Propriétés personnalisées CSS : déclaration et mise à jour » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Propriétés personnalisées CSS : déclaration et mise à jour
- Transitions : propriété, durée et rythme
- Animations @keyframes
- Respecter prefers-reduced-motion