Propriétés personnalisées CSS : systèmes de thème dynamiques et jetons de conception pour le développement web global

Dans le web globalisé d'aujourd'hui, il est primordial de créer des sites web et des applications adaptables, maintenables et accessibles à divers utilisateurs. Les propriétés personnalisées CSS, souvent appelées variables CSS, fournissent un mécanisme puissant pour y parvenir. Cet article explore le monde des propriétés personnalisées CSS, en explorant leur rôle dans la création de systèmes de thème dynamiques et la gestion des jetons de conception, en offrant des informations et des exemples pratiques pour le développement web global.

Que sont les propriétés personnalisées CSS ?

Les propriétés personnalisées CSS sont des variables définies dans CSS qui vous permettent de stocker et de réutiliser des valeurs dans vos feuilles de style. Contrairement aux variables de préprocesseur (par exemple, celles trouvées dans Sass ou Less), les propriétés personnalisées CSS sont natives du navigateur et peuvent être mises à jour dynamiquement à l'aide de JavaScript ou de requêtes média CSS. Cela les rend incroyablement polyvalentes pour créer des expériences web réactives, interactives et thématiques.

Caractéristiques clés des propriétés personnalisées CSS :

• Native au navigateur : Aucun pré-traitement n'est requis.
• Mise à jour dynamique : Les valeurs peuvent être modifiées à l'exécution.
• Cascading : Elles suivent les règles de cascade et d'héritage CSS.
• Basé sur la portée : Les variables peuvent être définies globalement ou dans des éléments spécifiques.

Syntaxe :

Pour définir une propriété personnalisée CSS, utilisez la syntaxe suivante :

            :root {
  --primary-color: #007bff;
  --font-family: 'Arial', sans-serif;
}

            

              
                Copy
              
            
          

Pour utiliser une propriété personnalisée CSS, utilisez la fonction var() :

            body {
  background-color: var(--primary-color);
  font-family: var(--font-family);
}

            

              
                Copy
              
            
          

Créer un système de thème dynamique avec les propriétés personnalisées CSS

Un système de thème dynamique permet aux utilisateurs de personnaliser l'apparence d'un site web ou d'une application en fonction de leurs préférences. Les propriétés personnalisées CSS offrent un moyen élégant de mettre en œuvre de tels systèmes. Prenons un exemple simple de création d'un thème clair et sombre.

Exemple : Thèmes clair et sombre

Tout d'abord, définissez les variables de thème de base dans la pseudo-classe :root :

            :root {
  --bg-color: #ffffff; /* Blanc */
  --text-color: #000000; /* Noir */
  --link-color: #007bff; /* Bleu */
  --button-bg-color: #f0f0f0;
  --button-text-color: #000000;
}

            

              
                Copy
              
            
          

Ensuite, appliquez ces variables à vos éléments :

            body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Arial', sans-serif;
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

Maintenant, définissez le thème sombre en remplaçant les variables de base dans une requête média ou une classe CSS appliquée via JavaScript :

            /* Utilisation d'une requête média pour la préférence système */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212; /* Gris foncé */
    --text-color: #ffffff; /* Blanc */
    --link-color: #bb86fc; /* Violet */
    --button-bg-color: #282828;
    --button-text-color: #ffffff;
  }
}

/* Ou, en utilisant une classe CSS appliquée via JavaScript */
.dark-theme {
  --bg-color: #121212; /* Gris foncé */
  --text-color: #ffffff; /* Blanc */
  --link-color: #bb86fc; /* Violet */
  --button-bg-color: #282828;
  --button-text-color: #ffffff;
}

            

              
                Copy
              
            
          

Pour implémenter le thème sombre à l'aide de JavaScript, vous pouvez basculer la classe dark-theme sur l'élément body :

            const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-theme');
});

            

              
                Copy
              
            
          

Considérations pour la thématisation globale :

• Contraste des couleurs : Assurez-vous d'un contraste de couleurs suffisant pour l'accessibilité, en respectant les directives WCAG (Web Content Accessibility Guidelines). Ceci est particulièrement crucial pour les utilisateurs souffrant de déficiences visuelles dans différentes cultures.
• Associations culturelles avec les couleurs : Les couleurs peuvent avoir des significations différentes dans différentes cultures. Par exemple, le blanc symbolise la pureté dans de nombreuses cultures occidentales, mais dans certaines cultures asiatiques, il est associé au deuil. Tenez compte de ces associations lors du choix des couleurs de thème pour un public mondial.
• Langues de droite à gauche (RTL) : Si votre site web prend en charge les langues RTL (par exemple, l'arabe, l'hébreu), ajustez le thème pour refléter correctement la mise en page. Vous devrez peut-être inverser les positions des éléments et ajuster l'alignement du texte en fonction de la direction. Les propriétés et valeurs logiques CSS peuvent être utiles ici (par exemple, `margin-inline-start` au lieu de `margin-left`).
• Préférences utilisateur : Permettez aux utilisateurs de choisir leur thème préféré, quels que soient les paramètres de leur système. Cela leur donne plus de contrôle sur leur expérience de navigation.

Jetons de conception : un système centralisé pour la stylisation

Les jetons de conception sont des entités nommées qui stockent des attributs de conception visuelle, tels que les couleurs, les polices, l'espacement et les tailles. Ils fournissent une source unique de vérité pour votre système de conception, garantissant la cohérence et la maintenabilité de votre projet. Les propriétés personnalisées CSS sont idéales pour la mise en œuvre des jetons de conception.

Avantages de l'utilisation des jetons de conception :

• Cohérence : Assure une apparence cohérente dans toutes les parties de votre site web ou de votre application.
• Maintenabilité : Simplifie les mises à jour et les modifications de votre système de conception. Lorsque vous mettez à jour un jeton de conception, les modifications se reflètent automatiquement partout où ce jeton est utilisé.
• Évolutivité : Facilite l'évolutivité de votre système de conception à mesure que votre projet se développe.
• Collaboration : Facilite la collaboration entre les concepteurs et les développeurs en fournissant un langage commun pour discuter des décisions de conception.

Exemple : Implémentation de jetons de conception avec des propriétés personnalisées CSS

Définissons quelques jetons de conception de base pour les couleurs, la typographie et l'espacement :

            :root {
  /* Couleurs */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Typographie */
  --font-family-base: 'Arial', sans-serif;
  --font-size-base: 16px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Espacement */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
}

            

              
                Copy
              
            
          

Maintenant, vous pouvez utiliser ces jetons dans votre CSS :

            body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-black);
}

.button-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-medium);
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

Organisation et gestion des jetons de conception

Au fur et à mesure que votre projet grandit, vous devrez peut-être organiser vos jetons de conception en catégories et sous-catégories. Vous pouvez utiliser des commentaires CSS pour y parvenir :

            :root {
  /* =========================================================================
   * Couleurs
   * ========================================================================= */

  /* Couleurs primaires */
  --color-primary: #007bff;
  --color-primary-dark: #0056b3;
  --color-primary-light: #3399ff;

  /* Couleurs secondaires */
  --color-secondary: #6c757d;
  --color-secondary-dark: #495057;
  --color-secondary-light: #99a3a4;

  /* =========================================================================
   * Typographie
   * ========================================================================= */

  --font-family-base: 'Arial', sans-serif;
  --font-size-base: 16px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
}

            

              
                Copy
              
            
          

Pour les projets plus volumineux, envisagez d'utiliser un outil dédié de gestion des jetons de conception ou un processus de construction qui génère automatiquement des propriétés personnalisées CSS à partir de vos jetons de conception. Il existe divers outils disponibles qui s'intègrent à des logiciels de conception comme Figma ou Sketch.

Jetons de conception et accessibilité

Lors de la définition des jetons de conception, il est crucial de tenir compte de l'accessibilité. Par exemple, assurez-vous que vos jetons de couleur respectent les directives de contraste des couleurs WCAG. Utilisez des outils comme le vérificateur de contraste des couleurs de WebAIM pour vérifier les rapports de contraste.

De plus, envisagez de fournir des jetons alternatifs pour les utilisateurs ayant des besoins spécifiques, tels que des thèmes à contraste élevé pour les utilisateurs malvoyants.

Jetons de conception pour un public mondial

• Typographie Différentes langues nécessitent différents ensembles de caractères et techniques de rendu de polices. Les jetons de conception peuvent stocker des règles spécifiques aux polices, comme la hauteur de ligne et l'espacement des lettres, pour optimiser pour divers scripts (par exemple, latin, cyrillique, arabe, chinois).
• Mise en page Différentes conventions culturelles ont un impact sur la mise en page. Envisagez d'utiliser des jetons de conception pour gérer la directionnalité (LTR/RTL), l'alignement et la hiérarchie visuelle en fonction des paramètres régionaux.
• Imagerie Les jetons de conception peuvent gérer les ressources d'images qui s'adaptent aux préférences régionales, en évitant les contenus potentiellement offensants ou culturellement insensibles dans des localités spécifiques.
• Formats de date/heure Utilisez des jetons de conception pour garantir des formats de date et d'heure cohérents dans différentes régions et langues.
• Formats numériques Adaptez les formats numériques (séparateurs décimaux, séparateurs de milliers, symboles monétaires) en fonction des paramètres régionaux de l'utilisateur.

Techniques avancées avec les propriétés personnalisées CSS

1. Utilisation de `calc()` avec les propriétés personnalisées CSS

La fonction calc() vous permet d'effectuer des calculs dans votre CSS, ce qui facilite la dérivation de nouvelles valeurs à partir des propriétés personnalisées CSS existantes. Ceci est utile pour créer des mises en page réactives et ajuster les valeurs en fonction de la taille de l'écran.

            :root {
  --base-size: 16px;
  --scale-factor: 1.2;
}

h1 {
  font-size: calc(var(--base-size) * var(--scale-factor) * 2);
}

p {
  font-size: calc(var(--base-size) * var(--scale-factor));
}

            

              
                Copy
              
            
          

2. Valeurs de repli pour les propriétés personnalisées CSS

Vous pouvez fournir des valeurs de repli pour les propriétés personnalisées CSS en utilisant le deuxième argument de la fonction var(). Cela garantit que vos styles fonctionneront toujours même si une propriété personnalisée n'est pas définie ou n'est pas prise en charge par le navigateur.

            body {
  background-color: var(--bg-color, #ffffff); /* Repli sur le blanc */
  color: var(--text-color, #000000); /* Repli sur le noir */
}

            

              
                Copy
              
            
          

3. Propriétés personnalisées CSS et interaction JavaScript

JavaScript peut être utilisé pour mettre à jour dynamiquement les propriétés personnalisées CSS. Cela vous permet de créer des thèmes interactifs, d'ajuster les styles en fonction des entrées de l'utilisateur ou de répondre aux changements dans l'environnement du navigateur. Par exemple :

            const root = document.documentElement;

function setPrimaryColor(color) {
  root.style.setProperty('--color-primary', color);
}

// Appelez la fonction pour changer la couleur principale
setPrimaryColor('#ff0000'); // Change la couleur principale en rouge

            

              
                Copy
              
            
          

4. Définition de la portée des propriétés personnalisées

Les propriétés personnalisées suivent la cascade, donc les définir sur `:root` les rend disponibles globalement. Cependant, vous pouvez également les définir sur des éléments spécifiques pour limiter leur portée. Ceci est utile pour créer des styles spécifiques aux composants ou pour remplacer les valeurs globales dans certaines sections de votre site web.

            .my-component {
  --component-bg-color: #f0f0f0;
  background-color: var(--component-bg-color);
}

/* Ce qui suit utilisera toujours le --color-primary défini globalement */
.another-component {
  color: var(--color-primary);
}

            

              
                Copy
              
            
          

5. Utilisation de propriétés personnalisées CSS avec des préprocesseurs

Bien que les propriétés personnalisées CSS soient natives du navigateur, vous pouvez toujours les utiliser en conjonction avec des préprocesseurs CSS comme Sass ou Less. Cela peut être utile pour générer des propriétés personnalisées CSS à partir de jetons de conception ou pour effectuer des calculs plus complexes.

            // Exemple Sass

$primary-color: #007bff;

:root {
  --color-primary: #{$primary-color};
}

.button {
  background-color: var(--color-primary);
}

            

              
                Copy
              
            
          

Meilleures pratiques pour l'utilisation des propriétés personnalisées CSS

• Utilisez des noms descriptifs : Choisissez des noms qui indiquent clairement l'objectif de la propriété personnalisée. Par exemple, utilisez --color-primary au lieu de --c1.
• Organisez vos propriétés personnalisées : Regroupez les propriétés personnalisées associées à l'aide de commentaires ou en les définissant dans des blocs CSS spécifiques.
• Fournissez des valeurs de repli : Fournissez toujours des valeurs de repli pour les propriétés personnalisées afin de garantir que vos styles fonctionnent même si la propriété personnalisée n'est pas prise en charge ou n'est pas définie.
• Utilisez des conventions de dénomination cohérentes : Établissez une convention de dénomination cohérente pour vos propriétés personnalisées afin d'améliorer la maintenabilité et la lisibilité.
• Documentez vos jetons de conception : Créez une documentation pour vos jetons de conception, y compris leur objectif, leurs valeurs et leurs directives d'utilisation. Cela aidera à garantir que tous les membres de votre équipe comprennent comment les utiliser correctement.
• Testez minutieusement vos thèmes : Testez vos thèmes dynamiques sur différents navigateurs et appareils pour vous assurer qu'ils fonctionnent comme prévu. Accordez une attention particulière à l'accessibilité et aux performances.

Conclusion

Les propriétés personnalisées CSS sont un outil puissant pour créer des systèmes de thème dynamiques et gérer les jetons de conception dans le développement web moderne. En tirant parti de leur flexibilité et de leur polyvalence, vous pouvez créer des sites web et des applications adaptables, maintenables et accessibles à un public mondial. Adopter les propriétés personnalisées CSS conduit à des expériences web plus maintenables, évolutives et conviviales qui répondent aux divers besoins des utilisateurs du monde entier. Lorsque vous vous lancez dans votre voyage avec les propriétés personnalisées CSS, n'oubliez pas de prendre en compte les perspectives mondiales, les directives d'accessibilité et les défis uniques de la création d'expériences web pour un public véritablement international.