Variables locales

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 4 sur 35.

Vous avez peut-être remarqué que nous utilisons souvent :root pour déclarer des variables. C'est parce que :root est global — les variables définies ici s'appliquent à l'ensemble de la page HTML (comme nous l'avons mentionné précédemment).

Mais parfois, vous voulez des variables qui n'affectent que certaines parties de la page. Par exemple, imaginez que vous construisiez une boutique en ligne avec de nombreuses fiches produits. Vous pouvez créer des variables à l'intérieur d'une classe .card pour styliser uniquement ces fiches sans affecter les autres éléments.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

De cette façon, la variable ne fonctionne qu'à l'intérieur des éléments .card, vous offrant ainsi plus de contrôle sur des zones spécifiques.

Défi

Facile

On vous donne une page de boutique en ligne avec plusieurs fiches produits. Votre tâche :

À l'intérieur de la classe .card, créez une variable CSS locale nommée --card-accent et définissez sa valeur sur coral.
Utilisez cette variable pour définir la couleur du texte du titre <h3> à l'intérieur de la carte.
Utilisez la même variable comme couleur d'arrière-plan pour le <button> de la carte.

Aide-mémoire

Les variables CSS peuvent être définies localement au sein de sélecteurs spécifiques, et pas seulement de manière globale dans :root. Les variables locales ne s'appliquent qu'aux éléments situés dans la portée de ce sélecteur.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

Cela crée une variable --card-color qui ne fonctionne qu'à l'intérieur des éléments .card, offrant un contrôle plus ciblé sur le style de composants spécifiques.

Essayez vous-même

<html>
<head>
    <title>Local Variables</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">    <style>
      /* Global variable for body background */
      :root {
        --body-bg: #000f26;
        --font-family: "Playfair Display", serif;
      }
    
      body {
        background-color: var(--body-bg);
        font-family: var(--font-family);
        padding: 20px;
        display: flex;
        gap: 20px;
        justify-content: center;
      }
    
      /* Card styles */
      .card {
        --card-bg: white;
        background-color: var(--card-bg);
        border-radius: 10px;
        padding: 15px;
        width: 250px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }
    
      .card h3 {
        margin-top: 0;
      }
    
      .card p {
        font-size: 0.9rem;
        color: #333;
      }
    
      .card button {
        border: none;
        color: #000f26;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        margin-top: 10px;
        width: 100%;
      }
    
    </style>
    </head>
    <body>
    
    <div class="card">
      <h3>Classic Sneakers</h3>
      <p>Comfortable and stylish sneakers for everyday wear.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card special">
      <h3>Luxury Watch</h3>
      <p>Elegant watch with a unique design for special occasions.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card">
      <h3>Leather Backpack</h3>
      <p>Durable, spacious backpack made from premium leather.</p>
      <button>Buy Now</button>
    </div>
    
    </body>
</html>