Valeurs de repli et var()
Fournissez des valeurs de repli dans var() lorsqu’une propriété personnalisée n’est pas définie ou est invalide.
Valeurs de repli et var() est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Syntaxe de repli de var()
La fonction var() accepte un deuxième argument facultatif comme valeur de repli, utilisé lorsque la propriété personnalisée n’est pas définie.
<button class="button">Fallback: royalblue</button>
Quand les valeurs de repli s’appliquent
La valeur de repli est utilisée lorsque :
- la propriété n’est pas définie dans la portée
- la propriété a la valeur
initial - la propriété a été déclarée avec une valeur invalide dans son contexte
Plusieurs niveaux de repli
Imbriquez les appels à var() pour enchaîner plusieurs niveaux de repli :
<p class="text">Falls through two levels to #3b82f6</p>
Une valeur de repli peut être n’importe quelle valeur
Les valeurs de repli peuvent être n’importe quelle valeur valide pour la propriété, y compris d’autres variables, des valeurs calculées ou des valeurs littérales :
<div class="card">16px / 50%</div>
Le mot-clé initial
Définir une propriété personnalisée sur initial revient à ne l’avoir jamais définie. Combinée à une valeur de repli, cette technique permet aux composants de ne pas hériter d’une propriété personnalisée.
<div class="no-theme">
<button class="button">Falls back to gray</button>
</div>
Valeur garantie invalide
Utiliser initial comme valeur d’une propriété personnalisée garantit le déclenchement de la valeur de repli. Cette technique permet de créer des indicateurs de fonctionnalité optionnels en CSS.
Propriété personnalisée + @property
La règle @property (Houdini) enregistre une propriété personnalisée typée avec une valeur initiale garantie. Cette solution est plus robuste que le recours aux valeurs de repli.
<div class="track">
<div class="bar"></div>
</div>
Valeur de repli sûre pour les animations
Assurez-vous que les transitions fonctionnent même lorsqu’une propriété personnalisée n’est pas définie, en fournissant une valeur de repli sûre depuis laquelle la transition peut commencer :
<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>
Déboguer les variables manquantes
Si une propriété personnalisée est absente et qu’aucune valeur de repli n’est fournie, la propriété prend pour valeur calculée sa valeur initiale (souvent le mot-clé initial). Pour les couleurs, cela peut produire des résultats transparents ou noirs inattendus. Ajoutez toujours des valeurs de repli aux propriétés essentielles.
var() dans les propriétés personnalisées
Les valeurs des propriétés personnalisées peuvent elles-mêmes faire référence à d’autres propriétés personnalisées, créant ainsi une chaîne de jetons :
<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>
Valeurs de repli et spécificité
Les valeurs de repli n'ont rien à voir avec la spécificité : elles s'appliquent uniquement lorsque la propriété personnalisée référencée n'est pas définie ou n'est pas valide. La spécificité détermine quelle règle définit la propriété personnalisée, et non quelle valeur de repli l'emporte.
Vérification rapide
Que fait color: var(--theme-text, #111) lorsque --theme-text n'est pas définie ?
Récapitulatif
var(--name, fallback) fournit une valeur de repli lorsque la propriété personnalisée n'est pas définie. Les valeurs de repli peuvent être imbriquées sur plusieurs niveaux. Utilisez @property pour les propriétés personnalisées typées avec des valeurs initiales garanties. Fournissez toujours des valeurs de repli pour les propriétés visuelles essentielles.
Questions Fréquemment Posées
La leçon « Valeurs de repli et var() » est-elle gratuite ?
Oui — le texte complet de « Valeurs de repli et var() » 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 « Valeurs de repli et var() » ?
Fournissez des valeurs de repli dans var() lorsqu’une propriété personnalisée n’est pas définie ou est invalide. 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 2 sur 4.
Combien de temps prend la leçon « Valeurs de repli et var() » ?
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