Aller au contenu principal

CSS Variables

Ouvrir dans ChatGPT

Les variables CSS jouent un rôle central dans la personnalisation de l'apparence des composants webforJ. Ces variables stockent des valeurs réutilisables telles que des couleurs, des tailles de police et des espacements, qui peuvent être appliquées de manière cohérente dans votre application.

Contrairement aux approches traditionnelles qui s'appuyaient sur des préprocesseurs CSS comme SASS ou LESS, les variables CSS permettent un style dynamique à l'exécution. Elles réduisent la répétition, améliorent la maintenabilité et rendent les feuilles de style plus faciles à lire et à gérer.

Définir des variables CSS​

Les variables CSS sont définies en utilisant un préfixe double tiret (--), et peuvent être limitées à n'importe quel sélecteur CSS. Cependant, la pratique la plus courante est de les définir dans le sélecteur :root, qui les limite globalement.

:root {
  --app-background: orange;
}
La pseudo-classe :root

La pseudo-classe :root cible l'élément racine du document—typiquement <html> en HTML. Elle se comporte comme html, mais avec une spécificité plus élevée.

Les variables CSS peuvent contenir n'importe quelle chaîne, pas seulement des valeurs CSS valides. Cette flexibilité est particulièrement utile lors de l'utilisation de JavaScript.

html {
  --app-title: webforJ;
}

Variables spécifiques au composant​

Pour définir ou remplacer une variable pour un composant spécifique, déclarez-la dans le sélecteur du composant :

dwc-button {
  --dwc-button-font-weight: 400;
}
Référence pour le style spécifique au composant

Chaque composant webforJ prend en charge un ensemble spécifique de variables CSS qui contrôlent son apparence. Celles-ci sont documentées sous la section Styling > Propriétés CSS pour chaque composant.

Utiliser des variables CSS​

Utilisez la fonction var() pour appliquer la valeur d'une variable dans vos styles :

.panel {
  background-color: var(--app-background);
}

Vous pouvez également spécifier une valeur de remplacement au cas où la variable ne serait pas définie :

.frame {
  background-color: var(--app-background, red);
}

Manipuler des variables avec webforJ​

Les variables CSS peuvent être mises à jour dynamiquement via l'API webforJ, permettant un style en temps réel :

// Définir une variable CSS
button.setStyle('--dwc-button-font-weight', '400');
Manipuler des variables CSS avec JavaScript

webforJ vous permet d'exécuter JavaScript côté client en utilisant l'API Page ou Element. Cela signifie que vous pouvez manipuler dynamiquement les variables CSS à l'exécution, tout comme vous le feriez dans des applications web standard.

// Définir une variable CSS
const el = document.querySelector('dwc-button');
el.style.setProperty('--dwc-button-font-weight', '400');

// Obtenir une variable CSS
const value = el.style.getPropertyValue('--dwc-font-size-m');

Ressources supplémentaires​