Theming CSS avancé avec propriétés personnalisées et JavaScript –
Tout au long de ce tutoriel sur le thème CSS, nous utiliserons des propriétés personnalisées CSS (également appelées variables CSS) pour implémenter des thèmes dynamiques pour une page HTML simple. Nous allons créer des exemples de thèmes sombres et légers, puis écrire JavaScript pour basculer entre les deux lorsque l'utilisateur clique sur un bouton.
Tout comme dans les langages de programmation classiques, les variables sont utilisées pour stocker ou stocker des valeurs. En CSS, ils sont généralement utilisés pour stocker des couleurs, des noms de polices, des tailles de police, des unités de longueur, etc. Ils peuvent ensuite être référencés et réutilisés à plusieurs endroits dans la feuille de style. La plupart des développeurs se réfèrent aux «variables CSS», mais le nom officiel est .
Les propriétés personnalisées CSS permettent de modifier les variables pouvant être référencées dans la feuille de style. Auparavant, cela n'était possible qu'avec les préprocesseurs CSS tels que Sass.
Comprendre: root et var ()
Avant de créer notre exemple de thématique dynamique, comprenons les bases essentielles des propriétés personnalisées.
A La propriété personnalisée est une propriété dont le nom commence par deux tirets ( – ) comme - foo
. Ils définissent des variables pouvant être référencées à l'aide de var ()
. Considérons cet exemple:
: root {
--bg-color: # 000;
--text-color: #fff;
}
Définir des propriétés personnalisées dans le sélecteur : root
signifie qu'elles sont disponibles dans l'espace du document global pour tous les éléments. : root
est une pseudo-classe CSS qui correspond à l'élément racine du document – l'élément . Il est similaire au sélecteur
html
mais avec une spécificité plus élevée .
Vous pouvez accéder à la valeur d'une propriété personnalisée : root
n'importe où dans le document: [19659009] div {
couleur: var (- text-color);
couleur de fond: var (- bg-color);
}
Vous pouvez également inclure une valeur de secours avec votre variable CSS. Par exemple:
div {
color: var (- text-color, # 000);
background-color: var (- bg-color, #fff);
}
Si une propriété personnalisée n'est pas définie, sa valeur de remplacement est utilisée à la place.
rend les propriétés personnalisées dans un sélecteur CSS autre que le sélecteur : root
ou html
) la variable disponible pour les éléments correspondants et leurs enfants.
Propriétés personnalisées CSS vs variables de préprocesseur
Les pré-processeurs CSS tels que Sass sont souvent utilisés pour faciliter le développement Web frontal. Parmi les autres fonctionnalités utiles des préprocesseurs figurent les variables. Mais quelle est la différence entre les variables Sass et les propriétés personnalisées CSS?
- Les propriétés personnalisées CSS sont analysées en mode natif dans les navigateurs modernes. Les variables de préprocesseur nécessitent une compilation dans un fichier CSS standard et toutes les variables sont converties en valeurs.
- Les propriétés personnalisées sont accessibles et modifiées par JavaScript. Les variables de préprocesseur sont compilées une fois et seule leur valeur finale est disponible sur le client.
Ecriture d'une page HTML simple
Commençons par créer un dossier pour notre projet:
$ mkdir css-variables-theming
Ensuite, ajoutez un index.html
dans le dossier du projet:
$ cd css-variables-theming
$ touch index.html
Et ajouter le contenu suivant:
Qu'est-ce que Lorem Ipsum?
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition ...
Nous ajoutons une barre de navigation utilisant une balise