Fermer

août 30, 2018

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 ... 





   Copyright 2018

Nous ajoutons une barre de navigation utilisant une balise