Déclaration et utilisation de propriétés personnalisées
Définissez des propriétés personnalisées CSS avec le préfixe -- et utilisez-les avec la fonction var().
Déclaration et utilisation de propriétés personnalisées est une leçon CSS 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 CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Que sont les propriétés personnalisées CSS ?
Les propriétés personnalisées CSS, également appelées variables CSS, vous permettent de définir une valeur réutilisable une seule fois et de l’utiliser dans toute votre feuille de style. Elles suivent la syntaxe --name: value.
Déclarer des propriétés personnalisées
Déclarez des propriétés personnalisées sur n’importe quel élément. Une déclaration sur :root les rend disponibles partout :
<div class="demo">Custom properties declared on :root</div>
Utiliser la fonction var()
Référencez une propriété personnalisée avec la fonction var() :
<button>Styled Button</button>
Les propriétés personnalisées sont héritées
Les propriétés personnalisées suivent le mécanisme normal d’héritage CSS. Une propriété définie sur un élément parent est disponible pour tous ses descendants, sauf si elle est remplacée.
<div class="card">
<div class="card__body">Inherits --card-bg from .card</div>
</div>
Valeurs invalides des propriétés personnalisées
Contrairement aux propriétés CSS classiques, une valeur invalide d’une propriété personnalisée n’entraîne pas l’ignorance de la déclaration : la variable est simplement résolue telle quelle. La propriété qui l’utilise détermine ensuite si elle est valide.
Propriétés personnalisées ou variables Sass
Principales différences :
- Les propriétés personnalisées CSS sont dynamiques dans le navigateur : elles sont mises à jour dynamiquement
- Les variables Sass sont supprimées lors de la compilation
- Les propriétés personnalisées peuvent être modifiées avec JavaScript
- Les propriétés personnalisées respectent la cascade et l’héritage
Conventions de nommage
Nommez les propriétés personnalisées selon leur rôle sémantique et non selon leur valeur visuelle. Elles seront ainsi faciles à modifier ultérieurement :
<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>
Portée globale ou portée du composant
Définissez les jetons globaux dans :root et les valeurs propres à un composant sur la classe racine de ce composant :
<div class="card">Global font-size-base + component-scoped card vars</div>
Propriétés personnalisées dans calc()
Les propriétés personnalisées fonctionnent dans calc() : elles doivent inclure des unités lorsqu’elles sont utilisées dans des calculs de dimensions :
<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>
Propriétés personnalisées adaptatives
Modifiez les valeurs des propriétés personnalisées dans des requêtes média pour créer des systèmes de jetons adaptatifs :
<div class="section">Padding grows to 6rem on wide screens</div>
Propriétés personnalisées pour les animations
Animez les éléments en modifiant une propriété personnalisée, souvent avec JavaScript, plutôt que plusieurs propriétés individuelles :
<div class="progress-track">
<div class="progress"></div>
</div>
Vérification rapide
Comment déclarer une propriété personnalisée CSS globale nommée --accent ?
Récapitulatif
Les propriétés personnalisées CSS se déclarent avec --name: value et s’utilisent avec var(--name). Déclarez les jetons globaux sur :root et limitez la portée des valeurs propres aux composants à leurs sélecteurs. Elles sont dynamiques, tiennent compte de la cascade et peuvent être modifiées par JavaScript, ce qui les rend bien plus puissantes que les variables Sass.
Questions Fréquemment Posées
La leçon « Déclaration et utilisation de propriétés personnalisées » est-elle gratuite ?
Oui — le texte complet de « Déclaration et utilisation de propriétés personnalisées » 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 CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Déclaration et utilisation de propriétés personnalisées » ?
Définissez des propriétés personnalisées CSS avec le préfixe -- et utilisez-les avec la fonction var(). Tu pratiques CSS 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 CSS Academy ?
Aucune expérience préalable n'est requise. CSS 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 « Déclaration et utilisation de propriétés personnalisées » ?
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 CSS Academy ?
Oui. Chaque leçon CSS 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
- Déclaration et utilisation de propriétés personnalisées
- Valeurs de repli et var()
- Portée des variables aux composants
- Mise à jour des variables avec JavaScript