logo oujood
🔍

Guide pratique des propriétés CSS personnalisées : simplifiez la gestion de vos styles

OUJOOD.COM

Tutoriel sur les propriétés CSS personnalisées

Les propriétés CSS personnalisées, également appelées variables CSS, permettent de définir des valeurs réutilisables dans vos feuilles de style. Elles offrent une flexibilité accrue et facilitent la maintenance de votre code CSS. Voyons comment les utiliser.

Définition des propriétés CSS personnalisées

Les propriétés CSS personnalisées sont créées à l'aide de la syntaxe suivante :

    :root {
      --nom-variable: valeur;
    }

Ici, :root fait référence à l'élément racine du document, généralement la balise <html>. Vous pouvez également définir les propriétés personnalisées à l'intérieur d'un sélecteur spécifique si vous souhaitez qu'elles soient limitées à une partie spécifique de la page.

Utilisation des propriétés CSS personnalisées

Une fois que vous avez défini vos propriétés CSS personnalisées, vous pouvez les utiliser n'importe où dans votre feuille de style en utilisant la fonction var(). Par exemple :

    .exemple {
      color: var(--couleur-principale);
      font-size: var(--taille-texte);
    }

Ici, la classe .exemple utilisera la valeur de --couleur-principale pour la couleur du texte et la valeur de --taille-texte pour la taille de la police.

La fonction css var()

Il n'existe qu'une seule fonction spécifique aux propriétés personnalisées CSS, mais c'est elle qui permet de faire fonctionner l'ensemble !

La fonction var() est utilisée pour référencer une propriété personnalisée déclarée plus tôt dans le document.

Exemple

html {
  --couleur : orange ;
}

p {
  color : var(--couleur) ;
}

La fonction var() est incroyablement puissante lorsqu'elle est combinée avec la fonction calc().

exemple

  html {
  --scale : 1.2 ;
  --size : 0.8rem ;
}

.size-2 {
  font-size : calc(var(--size) * var(--scale)) ;
}
.size-2 {
  font-size : calc(var(--size) * var(--scale) * var(--scale)) ;
}

Exemples pratiques d'utilisation

Les propriétés CSS personnalisées peuvent être utilisées de différentes manières. Par exemple, vous pouvez les utiliser pour :

  • Définir une palette de couleurs réutilisable pour votre site web.
  • Contrôler la mise en page en utilisant des valeurs comme le margin, le padding, etc.
  • Gérer les points de rupture pour les designs responsifs.

Exemple 1 :

L'exemple suivant montre la manière traditionnelle de définir des couleurs dans une feuille de style (en définissant les couleurs à utiliser pour chaque élément spécifique) :

Exemple :     📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tutoriel propriétés css personnalisées</title> 
    <style>
        body {
  background-color: #1e90ff;
}

h2 {
  border-bottom: 2px solid #1e90ff;
}

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}
    </style>
</head>
<body>
<h1>La méthode classique</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Oui</button>
    <button>Non</button>
  </p>
</div>
</body>
</html>

Exemple 2 :

L'exemple suivant est identique à l'exemple précédent, mais nous utilisons ici la fonction var().

Tout d'abord, nous déclarons deux variables globales (--blue et --white). Ensuite, nous utilisons la fonction var() pour insérer la valeur des variables plus loin dans la feuille de style

Reprener donc le code de l'exemple précédent et remplacer le code css dans la balise <style></style> par le suivant:

Exemple :     📋 Copier le code 

:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

le résultat est le même

Les avantages de l'utilisation de var() sont les suivants:

  • Rend le code plus facile à lire (plus compréhensible).
  • Facilite grandement la modification des valeurs de couleur Pour changer la couleur bleue et blanche, il suffit de changer les valeurs des deux variables

Plus d'informations sur l'utilisation de var()

Un autre exemple est la déclaration d'une propriété personnalisée appelée --ratio : 1.618 ; à la racine du document, puis son invocation plus tard dans notre CSS pour contrôler la hauteur des lignes, comme line-height : var(--ratio) ;.

Ici, var() est un ensemble d'instructions qui indique au navigateur : "Va chercher l'argument appelé --ratio déclaré plus tôt dans le document, prend sa valeur et l'applique ici".

N'oubliez pas que calc() nous permet d'ajuster dynamiquement les choses à la volée, y compris l'argument que vous fournissez via var().

Cela nous permet de créer des choses comme des systèmes d'échelle modulaires directement en CSS avec seulement quelques lignes de code. Si vous modifiez la valeur de --ratio, l'ensemble du système d'échelle modulaire sera mis à jour en conséquence.

C'est exactement ce que j'ai fait dans l’exemple suivant. Changez la valeur de --scale dans le CSS de l’exemple pour un nombre différent pour voir ce que je veux dire :

Exemple :     📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Propriété personnalisée la fonction var()</title> 
    <style>
:root {
  --scale: 1.618;
  --size-zeta: 0.75rem;
  --size-epsilon: calc(var(--scale) * var(--size-zeta));
  --size-delta: calc(var(--scale) * var(--size-epsilon));
  --size-beta: calc(var(--scale) * var(--size-delta));
  --size-alpha: calc(var(--scale) * var(--size-beta));
  --size-giga: calc(var(--scale) * var(--size-alpha));
  
  @media screen and (min-width: 40em) {
    --size-zeta: 1rem;
  }
}


.size-giga { 
  font-size: var(--size-giga);
}

.size-alpha { 
  font-size: var(--size-alpha);
}

.size-beta { 
  font-size: var(--size-beta);
}

.size-delta { 
  font-size: var(--size-delta);
}

.size-epsilon { 
  font-size: var(--size-epsilon);
}

.size-zeta { 
  font-size: var(--size-zeta);
}


/* CodePen setup */
body {
  background-color: #ee7e79;
  color: #020101;
  font-family: 'Crimson Text', serif;
  margin: var(--size-delta);
}

ol {
  list-style: none;
  padding: 0;
  
  li {
    margin-bottom: var(--size-epsilon);
    padding-bottom: var(--size-epsilon);
    border-bottom: 1px dashed #020101;
    
    &:last-of-type {
      border: none;
    }
  }
}
    </style>
</head>
<body>
<h1>Propriété personnalisée la fonction var()</h1>
<ol>
  <li class="size-alpha">size-alpha</li>
  <li class="size-beta">size-beta</li>
  <li class="size-delta">size-delta</li>
  <li class="size-epsilon">size-epsilon</li>
  <li class="size-zeta">size-zeta</li>
</ol>
</body>
</html>

Astuces et conseils d'utilisation

Voici quelques astuces et conseils pour une utilisation efficace des propriétés CSS personnalisées :

  • * Utilisez des noms de variables significatifs pour améliorer la lisibilité de votre code.
  • * Évitez de déclarer des propriétés CSS personnalisées avec des valeurs spécifiques dans votre fichier CSS principal. Il est préférable de les définir dans un fichier séparé dédié aux variables afin de faciliter la gestion et les modifications ultérieures.
  • * Expérimentez avec les valeurs des propriétés personnalisées pour trouver le bon équilibre entre réutilisabilité et spécificité. Vous pouvez ajuster ces valeurs en fonction des besoins de chaque élément de votre site.
  • * N'hésitez pas à combiner les propriétés CSS personnalisées avec d'autres fonctionnalités CSS, telles que les sélecteurs de pseudo-classes, les animations ou les transitions, pour créer des effets dynamiques et interactifs.
  • * Utilisez des outils de préprocesseurs CSS tels que Sass ou Less pour faciliter la gestion des propriétés CSS personnalisées dans des projets de grande envergure. Ces outils offrent des fonctionnalités avancées pour la définition, l'organisation et la manipulation des variables.

Pour créer une variable de portée globale, déclarez-la à l'intérieur du sélecteur :root. Le sélecteur :root correspond à l'élément racine du document.
Pour créer une variable de portée locale, il faut la déclarer à l'intérieur du sélecteur qui va l'utiliser.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion4915319.1 36

En conclusion, les propriétés CSS personnalisées sont un outil puissant pour rendre votre code CSS plus flexible, maintenable et réutilisable. En les utilisant, vous pouvez simplifier la gestion des styles de votre site web et créer des designs plus dynamiques. Expérimentez avec les propriétés personnalisées et explorez les possibilités qu'elles offrent pour améliorer votre flux de travail CSS.


cours precedent Cours precedent    Accueil     Cours suivant cours suivant