Passer 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 reposaient sur des préprocesseurs CSS comme SASS ou LESS, les variables CSS permettent un stylage dynamique au moment de 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éfinition des variables CSS​

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

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

La pseudo-classe :root cible l'élément racine du document — généralement <html> dans 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 aux composants​

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 de stylage spécifique aux composants

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

Utilisation 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 secours au cas où la variable ne serait pas définie :

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

Manipulation des variables avec webforJ​

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

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

webforJ vous permet d'exécuter du JavaScript côté client en utilisant l'API Page ou Element. Cela signifie que vous pouvez manipuler dynamiquement les variables CSS au moment de 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​