Création de thèmes de couleur avec des propriétés personnalisées, HSL et un peu calc ()

Avant les propriétés personnalisées CSS (souvent appelées "variables"), la gestion de plusieurs schémas de couleurs sur un seul site Web nécessitait des feuilles de style distinctes - une approche encombrante. Maintenant, nous pouvons définir des variables dans une seule feuille de style et laisser CSS gérer les variations.

Même sans thèmes définis par l'utilisateur, le thème à l'échelle du site est précieux. Par exemple, différentes sections peuvent utiliser des palettes de couleurs distinctes.

Créons un exemple: Notre exemple utilise une légèreté cohérente entre les sections, variant uniquement la teinte. Une palette simplifiée pour une seule teinte ressemble à ceci: [Exemple de palette omise pour la concision, car il est visuellement représenté dans l'original]. Plusieurs teintes élargiraient cela, facilement géré avec HSL où une seule valeur change.

Tirer parti des propriétés personnalisées

Largement pris en charge et facilement polyvalent pour les navigateurs plus anciens, les propriétés personnalisées offrent une syntaxe simple similaire à CSS standard. L'utilisation de base est montrée ci-dessous: [Exemple d'utilisation de base omis pour la concision, comme il est conceptuellement expliqué dans l'original]. Les variables sont généralement définies sur le pseudo-élément :root mais peuvent être portée à des éléments spécifiques à l'aide d'attributs tels que les attributs de données.

Intégration de calc()

Les propriétés personnalisées ne sont pas limitées aux valeurs fixes. La fonction calc() permet des calculs de valeur dynamique dans un modèle cohérent: [Exemple utilisant CALC () omis pour la concision, comme il est expliqué conceptuellement dans l'original]. Bien que CSS manque de boucles, les préprocesseurs peuvent aider à générer des parties du code (mais n'oubliez pas: les variables CSS diffèrent des variables SASS).

Mise en œuvre des variables CSS dans la pratique

Notre objectif est de modifier la couleur d'un composant sur différentes sections de pages. Nous utiliserons trois sections avec IDS: #food , #lifestyle et #travel , chacune associée à une teinte différente. L'attribut data-theme sur un .wrapper div détermine la teinte active. Lorsque #travel est actif, --first-hue (par exemple, 180 ° pour le sarcelle) est attribué à --hue .

<div data-theme="travel">
  
</div>

<style>
.wrapper[data-theme="travel"] {
  --hue: var(--first-hue); /* = 180° = teal */
}
</style>

Un petit extrait JavaScript met à jour l'attribut data-theme en fonction des clics d'onglet, supprimant le hachage ( # ). Cela exploite la capacité de JavaScript à manipuler CSS, contrairement aux variables de préprocesseurs qui sont statiques après compilation.

Amélioration progressive

Pour assurer l'accessibilité pour les utilisateurs handicapés JavaScript, nous ajoutons une amélioration progressive:

 // Amélioration progressive:
// Sans JavaScript, toutes les sections sont affichées, le thème n'est défini que lorsque la page se charge
wrapper.dataset.theme = wrapper.QuerySelector ('section'). id;

Cela garantit une fonctionnalité de base même sans JavaScript.

Bien qu'une approche d'une seule page soit utilisée ici, servir des sections comme des pages distinctes avec le paramètre data-theme côté serveur est également possible.

Approches alternatives

Si les valeurs de couleur ne changent pas linéairement, nous pouvons séparer les feuilles de style: [Exemple omis pour la concision, comme il est expliqué conceptuellement dans l'original].

Prise en charge des composants Web

Les composants Web The Tharming nécessitent le :host-context() Pseudo-Selector: [Exemple omis pour la concision, comme il est conceptuellement expliqué dans l'original].

Conclusion

Les propriétés personnalisées CSS simplifient le thème du site Web, offrant une maintenabilité, des performances et une intégration améliorées avec JavaScript. Combinés avec HSL et calc() , ils débloquent de puissantes capacités de thème, s'étendant au-delà des changements de couleurs simples aux thèmes contrôlés par l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!