Variables en CSS: Propriétés personnalisées –

Ce qui suit est un court extrait du prochain ouvrage de Tiffany, CSS Master, 2nd Edition qui sera disponible sous peu.

Pendant des années, les variables étaient l’une des fonctionnalités CSS les plus demandées. Les variables facilitent la gestion des couleurs, des polices, de la taille et des valeurs d'animation, et garantissent la cohérence entre les codes.

Il a fallu des années pour analyser les détails de la syntaxe et décider de cascade et héritage. Maintenant, ils sont disponibles pour les développeurs sous la forme de «propriétés personnalisées» CSS.

Dans ce chapitre, nous allons discuter de la syntaxe des propriétés personnalisées CSS. Nous examinerons:

• comment définir les propriétés et définir les valeurs par défaut pour ces propriétés
• comment les règles de la cascade et de l'héritage fonctionnent avec les propriétés personnalisées
• comment utiliser les propriétés personnalisées avec les requêtes média

À la fin, vous devriez avoir une bonne compréhension de l'utilisation des propriétés personnalisées dans vos projets.

Remarque: La prise en charge du navigateur pour les variables personnalisées est robuste et existe dans les dernières versions de tous les principaux navigateurs. Le support n’est cependant pas disponible dans les versions de navigateur plus récentes mais récemment publiées qui peuvent encore être largement utilisées par l’audience de votre site. Les versions de Microsoft Edge antérieures à 15 et Safari antérieures à la version 9.1 ne sont pas entièrement prises en charge. La même chose est vraie pour toute version d'Internet Explorer. Microsoft Edge 15 prend en charge, mais a également quelques bogues documentés.

Définition d'une propriété personnalisée

Pour définir une propriété personnalisée, sélectionnez un nom et préfixez-le avec deux tirets. Tout caractère alphanumérique peut faire partie du nom. Les caractères tiret ( - ) et les caractères de soulignement ( _ ) sont également autorisés. Un large éventail de caractères Unicode peut faire partie d'un nom de propriété personnalisé, y compris les emojis. Par souci de clarté et de lisibilité, respectez les noms alphanumériques.

Voici un exemple:

 - primarycolor: # 0ad0f9ff; / * Utilisation de la notation couleur #rrggbbaa * /

Le - indique à l'analyseur CSS qu'il s'agit d'une propriété personnalisée. La valeur de la propriété remplacera la propriété partout où elle est utilisée comme variable.

Les noms de propriété personnalisés sont sensibles à la casse . En d'autres termes, - primaryColor et - primarycolor sont considérés comme deux noms de propriété distincts. C’est un écart par rapport aux CSS classiques, dans lesquels la valeur de la propriété et de la valeur importe peu. Il est cependant conforme à la manière dont ECMAScript traite les variables.

Comme avec d'autres propriétés, telles que display ou font les propriétés personnalisées CSS doivent être définies dans un bloc de déclaration. Un modèle courant consiste à définir des propriétés personnalisées dans un ensemble de règles utilisant l'élément de support pseudo : root en tant que sélecteur:

: root {
    --primarycolor: # 0ad0f9ff;
}

: root est un pseudo-élément qui fait référence à l'élément racine du document. Pour les documents HTML, c’est l’élément html . Pour les documents SVG, il s’agit de l’élément svg . En utilisant : root les propriétés sont immédiatement disponibles dans tout le document.

Utilisation de propriétés personnalisées

Pour utiliser une valeur de propriété personnalisée en tant que variable, nous devons utiliser le var () fonction. Par exemple, si nous voulions utiliser notre propriété personnalisée - primarycolor comme couleur de fond, nous utiliserions ce qui suit:

 body {
    background-color: var (- primarycolor);
}

La valeur de notre propriété personnalisée deviendra la valeur calculée de la propriété background-color .

À ce jour, les propriétés personnalisées ne peuvent être utilisées que comme variables pour définir des valeurs pour les propriétés CSS standard. Vous ne pouvez pas, par exemple, stocker un nom de propriété en tant que variable, puis le réutiliser. Le code CSS suivant ne fonctionnera pas:

: root {
    --top-border: border-top; / * Impossible de définir une propriété comme valeur de propriété personnalisée * /
    var (- bordure supérieure): 10px solid # bc84d8 / * Impossible d'utiliser une variable en tant que propriété * /
}

Vous ne pouvez pas non plus stocker une paire valeur de propriété comme variable et la réutiliser. L'exemple suivant est également invalide:

: root {
   - color-color: 'color: orange'; / * Valeur de propriété invalide * /
}
corps {
  var (- text-color); / * Utilisation invalide d'une propriété * /
}

Enfin, vous ne pouvez pas concaténer une variable dans une chaîne de valeur:

: root {
    --base-font-size: 10;
}
corps {
    police: var (- base-font-size) px / 1.25 sans-serif; / * Syntaxe CSS non valide. * /
}

Les propriétés personnalisées ont été conçues pour être utilisées comme propriétés analysées conformément à la spécification CSS. Si la spécification CSS Extensions était adoptée par les fournisseurs de navigateurs, nous pourrions un jour utiliser des propriétés personnalisées pour créer des groupes de sélecteurs personnalisés ou des règles personnalisées. Pour l’instant, nous nous limitons à les utiliser comme variables pour définir les valeurs de propriété standard.

Définition d’une valeur de repli

La fonction var () accepte en réalité deux arguments. Le premier argument doit être un nom de propriété personnalisé. Le second argument est facultatif, mais doit être une valeur de déclaration. Cette valeur de déclaration fonctionne comme une sorte de valeur de secours si la valeur de la propriété personnalisée n’a pas été définie.

Prenons les CSS suivantes:

 .btn__call-to-action {
    fond: var (couleur d'accent, saumon);
}

Si - accent-color est défini – disons que sa valeur est # f30 – ensuite la couleur de remplissage de tout chemin avec un .btn__call-to-action l'attribut de classe aura un remplissage rouge-orange. S'il n'est pas défini, le remplissage sera saumon.

Les valeurs de déclaration peuvent également être imbriquées. En d'autres termes, vous pouvez utiliser une variable comme valeur de repli pour la fonction var :

 body {
    couleur de fond: var (- books-bg, var (- arts-bg));
}

Dans le CSS ci-dessus, si - books-bg est défini, la couleur d'arrière-plan sera définie sur la valeur de la propriété - books-bg . Dans le cas contraire, la couleur d'arrière-plan sera plutôt la valeur attribuée à - arts-bg . Si aucun de ceux-ci n'est défini, la couleur d'arrière-plan sera la valeur initiale de la propriété – dans ce cas transparent .

Quelque chose de similaire se produit lorsqu'une propriété personnalisée reçoit une valeur non valide. utilisé avec. Considérez le CSS suivant:

: root {
    --footer-link-hover: # 0cg; / * Pas une valeur de couleur valide. * /
}
un lien {
     Couleur bleue;
}
a: vol stationnaire {
    La couleur rouge;
}
footer a: vol stationnaire {
    color: var (- footer-link-hover);
}

Dans ce cas, la valeur de la propriété - footer-link-hover n'est pas une couleur valide. Dans Microsoft Edge, la couleur d'état de survol des liens de pied de page sera héritée du sélecteur a: hover . Dans la plupart des autres navigateurs, la couleur de l'état du survol sera héritée de la couleur du texte de l'élément body .

Propriétés personnalisées et cascade

Les propriétés personnalisées respectent également les règles de la cascade. Leurs valeurs peuvent être remplacées par les règles suivantes:

: root {
    --text-color: # 190736; / * marine * /
}
corps {
   - couleur du texte: # 333; /* Gris foncé */
}
corps {
  couleur: var (- text-color);
}

Dans l'exemple ci-dessus, notre corps de texte serait gris foncé. Nous pouvons également réinitialiser les valeurs par sélecteur. Ajoutons quelques règles supplémentaires à ce CSS:

: root {
    --text-color: # 190736; / * marine * /
}
corps {
   - couleur du texte: # 333; /* Gris foncé */
}
p {
  - couleur du texte: # f60; /* Orange */
}
corps {
  couleur: var (- text-color);
}
p {
  couleur: var (- text-color)
}

Dans ce cas, tout texte encapsulé dans les balises d'élément p serait orange. Mais le texte dans div ou d'autres éléments serait toujours gris foncé.

Il est également possible de définir la valeur d'une propriété personnalisée à l'aide de l'attribut style par exemple style = "- brand-color: # 9a09af" – qui peut être utile dans une architecture frontale basée sur des composants.

Tiffany B. Brown est un développeur web indépendant et technique écrivain basé à Los Angeles. Brown offre des services de développement Web et de conseil à de grandes agences et à de petites entreprises. Ancien membre de l'équipe des relations avec les développeurs d'Opera Software, Brown est également co-auteur du livre JumpStart HTML5 de SitePoint. Elle écrit de façon sporadique sur la technologie de développement Web sur son blog . Vous pouvez la suivre sur Twitter à @webinista .