CSS3 a apporté l'un des plus importants ajouts de la spécification CSS depuis longtemps. Cela suscitait beaucoup d'enthousiasme parce qu'il abordait un problème clé qui préoccupait les développeurs depuis des années et constituait la principale raison pour laquelle les gens préféraient utiliser des pré-processeurs tels que SASS: la possibilité d'utiliser des variables.
Avec l'ajout de variables CSS, une grande partie du code à écrire pour prendre en charge des 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 d’utilisations telles que la taille dynamique des polices et la simplicité d’ajout de 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 l’application. Personne n’a l’esprit de stocker dix valeurs hexa différentes dans leur tête pour pouvoir les consulter ultérieurement, et aller et venir entre les fichiers pour copier des valeurs est non seulement fastidieux, mais nuit également à la productivité. Maintenant, imaginez la quantité de travail à faire si ces couleurs doivent changer.
Utilisation de préprocesseurs CSS avec WordPress est le moyen le plus courant de traiter le problème. Celles-ci prennent en charge une multitude de fonctionnalités telles que mixins, déclarations imbriquées et, bien sûr, les variables, qui constituent un atout majeur pour la productivité.
Tout ce que vous avez à faire est d'écrire votre code une fois pour le compiler en CSS, auquel vous pouvez librement accéder et que vous pouvez modifier si vous le souhaitez. Cependant, l'impossibilité de trouver et de modifier ces valeurs au moment de l'exécution, d'ajouter un thème sombre à votre application Web, par exemple, constitue leur principal inconvénient. C’est un problème majeur, non seulement parce que le SASS ne le prend pas en charge, mais il ne le fera probablement jamais.
L'ajout de variables intégrées personnalisées aux ouvertures CSS a eu un impact majeur sur la manière dont nous écrivons les applications, en particulier en ce qui concerne la thématisation et la conception réactive.
C'est la question la plus courante qui se pose lorsque des variables CSS sont introduites dans une discussion. Selon Puis-je utiliser, la prise en charge par le navigateur des variables CSS s’élève à 93,16%. Il est pris en charge par tous les navigateurs modernes (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ et Edge 16+). Comme toujours, IE est absent de la série et a un effet surprenant 6,47% part de marché. Pour les développeurs pauvres qui doivent prendre en charge les anciens navigateurs, ne vous inquiétez pas. Polyfill, ou plus exactement, ponyfills, sont là pour sauver la journée.
Une introduction formelle aux variables CSS
Si vous connaissez les variables CSS, vous ne devriez pas avoir de problèmes avec les variables CSS.
Les variables SASS sont déclarées comme suit:
$facebook-blue: #4267B2;
Alors que les variables CSS sont déclarées un peu différemment:
:root {
–brand-color: #4267B2;
}
.brand-navbar {
background: var(- -brand-color);
}
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 l'accès à plusieurs fonctionnalités supplémentaires.
Valeurs en cascade
Les propriétés CSS en cascade suivent les règles normales en cascade. En d'autres termes, les redéclarations ci-dessous n'affectent pas les personnes ci-dessus.
:root { –color: yellow; }
div { –color: blue; }
#great { –color: green; }
* { color: var(–color); }
I’ll be yellow, inherited from root!
I’m blue!
It worked! I’m green!
I’m also green! Inherited from above!
Valeurs de repli
La fonction ‘var ()’ accepte plusieurs paramètres. La seconde peut être utilisée comme valeur de secours si la propriété CSS personnalisée n’est pas définie. C'est une fonctionnalité utile pour quiconque ayant besoin d'accéder aux variables CSS via JavaScript.
Sa signature ressemble à ‘var (
.brand-navbar {
background: var(–brand-color, “#4267B2”);
}
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 sur 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érons 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.
.brand-navbar {
background: var(–brand-color, “#4267B2”);
}
//To get the current value
getComputedStyle(document.documentElement).getPropertyValue(‘–brand-color’);
//To set the value
document.documentElement.style.setProperty(‘–brand-color’, ‘red’);
//You can even assign one CSS property to another
document.documentElement.style.setProperty(‘–brand-color’,’var(–secondary-color)’);
Portée mondiale et locale
Si vous connaissez JavaScript (ou n’importe quel langage de programmation, en réalité), vous comprenez probablement le concept de la portée. Les variables peuvent normalement être définies de telle sorte qu’elles ne sont accessibles qu’à certaines parties du code, appelées portée locale, ou mis à disposition pour une utilisation dans l'application, appelé le portée globale.
Les variables CSS fonctionnent de la même manière. Certaines variables doivent être définies globalement pour une référence plus facile, par exemple. couleurs de la marque et espacement vertical. Celles-ci restent généralement les mêmes dans toute l'application et, en cas de changement, elles devraient être reflétées partout. En revanche, les variables pouvant nécessiter une portée locale incluent des boutons avec différentes variantes grandes et petites. Si vous souhaitez modifier le remplissage d'un bouton particulier, vous ne voudriez pas que les modifications traversent tout le DOM. Cela doit être changé en un seul point dans l'application.
Par défaut, les propriétés CSS sont localisées. Et si vous avez utilisé JavaScript ou tout autre langage de programmation, la portée de l’enregistrement 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. Les valeurs étant en cascade, vous devez être conscient de 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édia
Comme avec les pré-processeurs, l’utilisation des propriétés CSS présente l’inconvénient majeur de ne pas pouvoir les utiliser dans les requêtes multimédia. Par exemple, cela ne fonctionnera pas.
@media (min-width: var(–breakpoint)){
padding: 1rem;
}
Ce que vous pouvez faire consiste plutôt à redéfinir les propriétés personnalisées dans les requêtes multimédia. Si vous devez modifier la taille de la police lorsque le navigateur est 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 qui ne doivent être réduites qu'une seule fois.
Quelles sont les applications pratiques des propriétés CSS personnalisées?
«Aujourd’hui, mis à part 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 service d'écriture papier personnalisé concepteur de sites Web.
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 du mode sombre dans tous les logiciels modernes, y compris les applications Web. C'est peut-être un peu plus compliqué que d'ajouter une couleur de fond sombre. Parmi les autres éléments à prendre en compte, il convient de noter comment les couleurs du texte vont changer et comment les images avec un fond blanc seront affectées.
Tout cela est rendu possible en déclarant d’abord des variables dans l’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, vous pouvez également remplacer les images actuelles par des images compatibles avec le mode sombre.
Ajout du 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, une thématisation) d'une application WordPress est assez trivial.
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 de caractères, les images d'arrière-plan, etc. en accédant au CSS de votre site. Le problème majeur avec cela est que le fait de changer le CSS de cette manière oblige PHP à restituer votre code HTML, ce qui entraîne le renvoi du serveur par le serveur. fichier entier au navigateur. Votre application effectue une requête inutile, consommant plus de données que nécessaire.
«Si une telle application était destinée au consommateur, vous auriez probablement beaucoup de plaintes. Si vous ne disposez pas de fichiers CSS dédiés aux variables que vous souhaitez modifier, la situation empire considérablement. »Helena Newman, développeur senior chez revue papiersowl et éditeur pour services de rédaction de curriculum vitae considère que c'est 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 à faire est de conserver le thème actuel sur le serveur si nécessaire. Et même alors, une telle variable peut être enregistrée dans le navigateur.
Ajout de la conception sensible à un site Web
Avec plus de téléphones mobiles que jamais sur Internet, le besoin de sites Web réactifs n’a jamais été aussi évident. La modification de la taille des polices est l’aspect le plus crucial de la réactivité de la conception. Pour une application qui utilise plusieurs polices ou des polices dynamiques, leur suivi et leur modification 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 pouvant être utilisée et réutilisée sur votre site Web. Au cas où cela devrait changer, il vous suffit d'appeler une fonction JavaScript et tout fonctionne.
Si vous n’avez pas besoin de prendre en charge les anciens navigateurs, vous pouvez utiliser des variables CSS personnalisées avec le nouveau système CSS (relativement) de grille pour éliminer le besoin de requêtes multimédia.
Là encore, des requêtes multimédia peuvent encore ê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 ne permettent pas l’exécution de JavaScript.
Conclusion
Les variables CSS personnalisées font partie des 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 évitant de faire des requêtes supplémentaires inutiles.
