Utilisation des propriétés personnalisées CSS pour une meilleure UX

Dernière mise à jour - 8 juillet 2021

CSS3 a apporté avec lui l'un des plus gros ajouts que la spécification CSS a eu depuis longtemps. Il a généré beaucoup de buzz car il abordait un problème clé qui tourmentait les développeurs depuis des années et était la principale raison pour laquelle les gens préféraient l'utilisation de préprocesseurs comme SASS : la possibilité d'utiliser des variables.

Avec l'ajout de variables CSS, une grande partie du code qui devait être écrit pour prendre en charge les fonctionnalités de base telles que la thématisation n'est plus nécessaire. C'est une fonctionnalité utile qui peut être utilisée pour éviter les répétitions et permettre encore plus de cas d'utilisation comme les tailles de police dynamiques et la simplicité en plus de la réactivité dans une application Web.

Se débarrasser de l'encombrement avec les variables CSS

Une caractéristique commune à la plupart des applications est que les couleurs de la marque doivent rester identiques et cohérentes dans toute l'application. Personne n'a l'esprit de stocker dix valeurs hexadécimales différentes dans sa tête pour référence future, et aller et venir entre les fichiers pour copier les valeurs est non seulement fastidieux, mais aussi préjudiciable à la productivité. Maintenant, imaginez la quantité de travail qui doit être effectuée si ces couleurs doivent changer.

L'utilisation de préprocesseurs CSS avec WordPress est le moyen le plus courant de résoudre le problème. Celles-ci offrent un support pour une multitude de fonctionnalités telles que les mixins, les déclarations imbriquées et, bien sûr, les variables, qui sont un atout majeur pour la productivité.

Tout ce que vous avez à faire est d'écrire votre code une fois et il est compilé en CSS, auquel vous pouvez librement accéder et modifier si vous le souhaitez. Cependant, l'impossibilité de trouver et de modifier ces valeurs lors de l'exécution, par exemple, d'ajouter un thème sombre à votre application Web est leur plus grand inconvénient. C'est un problème majeur non seulement parce que SASS ne le supporte pas, mais il ne le fera probablement jamais.

L'ajout de variables intégrées personnalisées aux ouvertures CSS a eu un effet majeur sur la façon dont nous écrivons des applications, en particulier en ce qui concerne la thématisation et la conception réactive.

À quoi ressemble la prise en charge des navigateurs pour les variables CSS ?

C'est la question la plus fréquemment posée lorsque des variables CSS sont introduites dans une discussion. Selon Caniuse , la prise en charge des navigateurs pour les variables CSS s'élève à 93,16 %. Il est pris en charge dans tous les navigateurs modernes (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ et Edge 16+). Comme toujours, IE est absent du salon et détient une part de marché surprenante de 6,47 % . Pour les pauvres développeurs qui doivent prendre en charge les anciens navigateurs, ne vous inquiétez pas. Les polyfills , ou plus exactement les ponyfills, sont là pour sauver la situation.

Une introduction formelle aux variables CSS

Si vous êtes familier avec les variables CSS, vous ne devriez pas avoir de problème avec les variables CSS.

Les variables SASS sont déclarées comme suit :

<pré>

$facebook-bleu : #4267B2 ;

</pre>

Alors que les variables CSS sont déclarées un peu différemment :

<pré>

:racine {

–couleur de la marque : #4267B2 ;

}

.brand-navbar {

arrière-plan : var(- -marque-couleur) ;

}

</pre>

Notez quelques différences entre les deux syntaxes :

• Les variables CSS doivent être précédées de deux tirets
• Les variables CSS sont normalement déclarées dans ':root', mais peuvent être redéclarées à tout moment.
• Les propriétés CSS sont récupérées à l'aide de la fonction 'var()'.

Les variables CSS offrent également un accès à plusieurs fonctionnalités supplémentaires.

Valeurs en cascade

Les propriétés CSS cascadent en suivant les règles de cascade normales. En d'autres termes, les redéclarations ci-dessous n'affectent pas celles ci-dessus.

<pré>

:root { –couleur : jaune ; }

div { –couleur : bleu ; }

#grand { –couleur : vert ; }

* { couleur : var(–couleur); }

<p>Je serai jaune, hérité de root !</p>

<div>Je suis bleu !</div>

<div id="génial">

Ça a marché! je suis vert !

<p>Je suis aussi écolo ! Hérité d'en haut !</p>

</div>

</pre>

Valeurs de repli

La fonction 'var()' accepte plusieurs paramètres. La seconde peut être utilisée comme valeur de secours au cas où la propriété CSS personnalisée n'est pas définie. Il s'agit d'une fonctionnalité utile pour tous ceux qui ont besoin d'accéder aux variables CSS via JavaScript.

Sa signature ressemble à 'var(<custom-property-name> [, <declaration-value> ]?)' et peut être utilisée de la manière suivante

<pré>

.brand-navbar {

arrière-plan : var(–brand-color, "#4267B2");

}

</pre>

Si '–brand-color' n'est pas défini, "#4267B2" sera utilisé à la place,

Accès via JavaScript

L'une des meilleures raisons d'utiliser des variables CSS plutôt qu'un préprocesseur est la possibilité d'accéder à des variables personnalisées via JavaScript. Les variables de préprocesseur ne résident pas dans le navigateur. Ils sont évalués lors de la compilation du code. De cette façon, les variables du préprocesseur ne sont pas accessibles dans le navigateur. Avec les variables CSS, la propriété réside dans le navigateur, ce qui permet de modifier les valeurs à la volée.

Considérez un tableau de bord qui permet à l'utilisateur de sélectionner des couleurs personnalisées via une fenêtre contextuelle ou quelque chose de similaire.

<pré>

.brand-navbar {

arrière-plan : var(–brand-color, "#4267B2");

}

//Pour obtenir la valeur actuelle

getComputedStyle(document.documentElement).getPropertyValue('–brand-color');

//Pour définir la valeur

document.documentElement.style.setProperty('–brand-color', 'red');

// Vous pouvez même assigner une propriété CSS à une autre

document.documentElement.style.setProperty('–couleur-marque','var(–couleur-secondaire)');

</pre>

Portée mondiale et locale

Si vous êtes familier avec JavaScript (ou n'importe quel langage de programmation, vraiment), alors vous comprenez probablement le concept de portée. Les variables peuvent normalement être définies de telle sorte qu'elles ne soient accessibles qu'à certaines parties du code, appelées la portée locale, ou rendues disponibles pour une utilisation dans toute l'application, appelées la portée globale.

Les variables CSS fonctionnent de la même manière. Certaines variables doivent être portées globalement pour une référence plus facile, par exemple les couleurs de la marque et l'espacement vertical. Ceux-ci restent généralement les mêmes dans toute l'application et en cas de changement, cela devrait être reflété partout. En revanche, les variables qui peuvent nécessiter une portée locale incluent des boutons avec différentes grandes et petites variantes. Si vous vouliez modifier le rembourrage d'un bouton particulier, vous ne voudriez pas que les modifications traversent l'ensemble du DOM. Il doit être changé en un seul point dans l'application.

Par défaut, les propriétés CSS sont étendues localement. Et si vous avez travaillé avec JavaScript ou tout autre langage de programmation, la portée a son propre ensemble de problèmes. Puisqu'elles peuvent être héritées, elles agissent également comme des variables locales, ce qui peut avoir des répercussions intéressantes si vous ne faites pas attention à la façon dont elles sont utilisées. Étant donné que les valeurs cascadent, vous devez faire attention à la façon dont vous les modifiez, en particulier lorsque JavaScript est concerné.

Utilisation de propriétés personnalisées avec des requêtes multimédias

Tout comme avec les préprocesseurs, l'un des principaux inconvénients de l'utilisation des propriétés CSS est qu'elles ne peuvent pas être utilisées dans les requêtes multimédias. Par exemple, cela ne fonctionnera pas.

<pré>

@media (min-width : var(–breakpoint)){

rembourrage : 1rem ;

}

</pre>

À la place, vous pouvez redéfinir les propriétés personnalisées dans les requêtes multimédias. Si vous devez modifier la taille de la police lorsque le navigateur se réduit, vous avez de la chance. Avec les variables CSS, vous pouvez écouter les modifications du navigateur à l'aide de JavaScript et modifier les tailles à réduire une seule fois.

Quelles sont les applications pratiques des propriétés CSS personnalisées ?

"Aujourd'hui, en plus d' utiliser les services CDN pour améliorer les performances du site , l'utilisation des propriétés personnalisées CSS est l'un des moyens les plus rapides d'améliorer la productivité", conseille Colby Stuart, un concepteur Web de service de rédaction papier personnalisé .

Outre les avantages bien mis en évidence, cela ajoute à la productivité, existe-t-il des exemples concrets de la façon dont ils peuvent être utilisés dans une application Web ?

Ajout du mode sombre

Une nouvelle tendance qui a conquis le marché des consommateurs est la demande de mode sombre dans tous les logiciels modernes, y compris les applications Web. Cela peut être un peu plus compliqué que d'ajouter une couleur de fond sombre. D'autres choses qui doivent être prises en compte incluent la façon dont les couleurs du texte changeront et comment les images avec des arrière-plans blancs seront affectées.

Tout cela est rendu possible en déclarant d'abord des variables dans votre application. Lorsque l'utilisateur déclenche le commutateur pour assombrir le thème du site Web, déclenchez une fonction JavaScript qui modifie les variables CSS. Si votre application Web est plus compliquée, cela peut également inclure le remplacement des images actuelles par des images compatibles avec le mode sombre.

Ajouter le mode sombre sur WordPress

Les variables CSS ont été si influentes qu'elles ont atteint le monde de WordPress. Aujourd'hui, créer un mode sombre (ou, plus généralement, thématiser) une application WordPress est assez banal.

La plupart des développeurs WordPress s'appuient sur le Customizer pour modifier l'apparence et les fonctionnalités de leurs sites. Il permet d'accéder à des éléments tels que les couleurs, les polices, les images d'arrière-plan, etc. en accédant au CSS de votre site. Le problème majeur avec ceci est qu'en changeant le CSS de cette façon, PHP est obligé de restituer votre HTML, et ce faisant, le serveur renvoie l' intégralité du fichier au navigateur. Votre application fait une requête inutile, consommant plus de données que nécessaire.

"Si une telle application était destinée aux consommateurs, vous recevriez probablement beaucoup de plaintes. Si vous n'avez pas de fichiers CSS dédiés pour les variables que vous souhaitez modifier, les choses empirent beaucoup. Helena Newman, développeur senior chez papersowl review et éditeur de services de rédaction de CV, considère qu'il s'agit d'un ajout nécessaire à la spécification CSS.

À l'aide de variables CSS, toutes les couleurs sont modifiées dans le navigateur à l'aide de JavaScript. La seule demande qui va être faite est de conserver le thème actuel sur le serveur si nécessaire. Et même dans ce cas, une telle variable peut être enregistrée dans le navigateur.

Ajouter un design réactif à un site Web

Avec plus de téléphones portables sur Internet que jamais auparavant, le besoin de sites Web réactifs n'a jamais été aussi évident. L'aspect le plus crucial de la conception réactive qui surprend les développeurs est la modification de la taille des polices. Pour une application qui utilise plusieurs polices ou polices dynamiques, les suivre et les modifier pour différents navigateurs est une corvée.

Au lieu de cela, les propriétés CSS personnalisées vous permettent de définir une taille de police universelle qui peut être utilisée et réutilisée sur l'ensemble de votre site Web. Au cas où cela devrait changer, tout ce que vous avez à faire est d'appeler une fonction JavaScript et tout fonctionne.

Si vous n'avez pas besoin de prendre en charge les anciens navigateurs, des variables CSS personnalisées peuvent être utilisées conjointement avec le (relativement) nouveau système CSS de grille pour éliminer complètement le besoin de requêtes multimédias.

Là encore, les requêtes multimédias peuvent toujours être nécessaires si vous devez écouter les changements de largeur dans le CSS lui-même. C'est la seule façon de prendre en charge les navigateurs qui n'autorisent pas l'exécution de JavaScript.

Conclusion

Les variables CSS personnalisées sont parmi les ajouts les plus importants à la spécification depuis un certain temps. Ils peuvent simplifier votre processus de conception en supprimant l'encombrement de vos fichiers CSS et en éliminant la nécessité de faire des demandes supplémentaires inutiles.