Cette page a été traduite par l'API Cloud Translation.

Variables CSS – Pourquoi est-il important de s'y intéresser ?

Rob Dodson

Les variables CSS, plus précisément appelées "propriétés CSS personnalisées", arrivent dans Chrome 49. Ils peuvent être utiles pour réduire les répétitions dans CSS. pour des effets d'exécution puissants, comme le changement de thème étendre/polyfill les futures fonctionnalités CSS

Encombrement CSS

Lors de la conception d'une application, il est courant de mettre de côté un ensemble les couleurs qui seront réutilisées pour garder la cohérence de l'apparence de l'application. Malheureusement, le fait de répéter ces valeurs de couleur à l'infini dans votre CSS non seulement une corvée, mais aussi une source d'erreurs. Si, à un moment donné, l’une des couleurs doit être modifiée, vous pouvez faire preuve de prudence et mettre en garde contre le vent et utiliser des fonctions de recherche et de remplacement. toutes les choses, mais sur un projet suffisamment grand, cela pourrait facilement devenir dangereux.

Ces derniers temps, de nombreux développeurs se sont tournés vers les préprocesseurs CSS tels que SASS ou LESS qui résolvent ce problème grâce à l'utilisation de variables de préprocesseur. Alors que ces outils ont considérablement amélioré la productivité des développeurs, les variables qu'elles utilisent présentent un inconvénient majeur, à savoir qu'elles sont statiques et qu'elles ne peuvent pas modifiées au moment de l'exécution. Ajouter la possibilité de modifier des variables au moment de l'exécution ouvre la porte à des choses comme la thématisation d'application dynamique, mais présente également l'impact du responsive design et la possibilité de polyfill les futurs CSS caractéristiques. Avec le lancement de Chrome 49, ces fonctionnalités sont désormais disponibles dans sous la forme de propriétés CSS personnalisées.

Les propriétés personnalisées en bref

Les propriétés personnalisées ajoutent deux nouvelles fonctionnalités à notre boîte à outils CSS:

la possibilité pour un auteur d'attribuer des valeurs arbitraires à une propriété avec un choisi par l'auteur.
La fonction var(), qui permet à un auteur d'utiliser ces valeurs dans d'autres propriétés.

Voici un exemple rapide pour illustrer

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color est une propriété personnalisée définie par l'auteur et associée à la valeur #06c. Remarque que toutes les propriétés personnalisées commencent par deux tirets.

La fonction var() récupère et se remplace par la propriété personnalisée. valeur, ce qui donne color: #06c; tant que la propriété personnalisée est définie Dans votre feuille de style, la fonction var devrait pouvoir y accéder.

La syntaxe peut sembler un peu étrange au premier abord. De nombreux développeurs se demandent utilisez simplement $foo pour les noms de variables. L'approche a été spécifiquement choisie est aussi flexible que possible et permettra potentiellement d'utiliser des macros $foo à l'avenir. Pour en savoir plus sur l'histoire, vous pouvez lire cet article. de l'un des auteurs de la spécification, Tab Atkins.

Syntaxe des propriétés personnalisées

La syntaxe d'une propriété personnalisée est simple.

--header-color: #06c;

Notez que les propriétés personnalisées sont sensibles à la casse. Par conséquent, --header-color et --Header-Color sont des propriétés personnalisées différentes. Bien qu’ils puissent sembler simples à la syntaxe autorisée pour les propriétés personnalisées permissive. Voici un exemple de propriété personnalisée valide:

--foo: if(x > 5) this.width = 10;

Cette variable n'est pas utile, car elle ne peut pas être utilisée normale, il peut être lu et traité avec JavaScript au de l'environnement d'exécution. Cela signifie que les propriétés personnalisées peuvent exploiter toutes sortes de des techniques intéressantes qui ne sont actuellement pas possibles avec les préprocesseurs CSS actuels. Donc Si vous vous dites "bâillement, j'ai de la SASS, alors ça s'en préoccupe...", regardez à nouveau ! Ce ne sont pas les variables avec lesquelles vous êtes habitué à travailler.

La Cascade

Les propriétés personnalisées suivent les règles standards de cascade d'annonces. Vous pouvez donc définir à différents niveaux de spécificité

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
</div>

Cela signifie que vous pouvez exploiter les propriétés personnalisées dans les requêtes média grâce au responsive design. Un cas d'utilisation pourrait être d'étendre les marges autour vos principaux éléments de section à mesure que la taille de l'écran augmente:

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

Il est important de souligner que l'extrait de code ci-dessus n'est pas possible en utilisant les préprocesseurs CSS actuels, qui sont incapables de définir des variables à l'intérieur des médias requêtes. Cette capacité libère beaucoup de potentiel !

Il est également possible d'avoir des propriétés personnalisées qui tirent leur valeur d'autres propriétés personnalisées. Cela peut s'avérer très utile pour la thématisation:

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

La fonction var()

Pour récupérer et utiliser la valeur d'une propriété personnalisée, vous devez utiliser la propriété fonction var(). La syntaxe de la fonction var() se présente comme suit:

var(<custom-property-name> [, <declaration-value> ]? )

Où <custom-property-name> est le nom d'une propriété personnalisée définie par l'auteur, comme --foo, et <declaration-value> est une valeur de remplacement à utiliser lorsque le propriété personnalisée référencée n'est pas valide. Les valeurs de remplacement peuvent être séparées par une virgule , qui sera combinée en une seule valeur. Par exemple, var(--font-stack, "Roboto", "Helvetica"); définit une valeur de remplacement pour "Roboto", "Helvetica". Conserver dans à l'esprit que les valeurs abrégées, comme celles utilisées pour la marge et le remplissage, ne sont pas séparés par une virgule, donc une solution de remplacement appropriée pour la marge intérieure ressemblerait à ceci.

p {
    padding: var(--pad, 10px 15px 20px);
}

À l'aide de ces valeurs de remplacement, l'auteur d'un composant peut écrire des styles défensifs pour leur élément:

/* In the component’s style: */
.component .header {
    color: var(--header-color, blue);
}
.component .text {
    color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
    --text-color: #080;
    /* header-color isn’t set,
        and so remains blue,
        the fallback value */
}

Cette technique est particulièrement utile pour thématiser les composants Web qui utilisent des ombres. DOM, car les propriétés personnalisées peuvent traverser les limites de l'ombre. Un auteur de composant Web créer une conception initiale à l'aide de valeurs de remplacement et exposer des "hooks" de thématisation sous la forme de propriétés personnalisées.

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

Lorsque vous utilisez var(), vous devez faire attention à quelques erreurs. Les variables ne peuvent pas être les noms des propriétés. Par exemple :

.foo {
    --side: margin-top;
    var(--side): 20px;
}

Toutefois, cela n'équivaut pas à définir margin-top: 20px;. L'élément la deuxième déclaration n'est pas valide et est rejetée en tant qu'erreur.

De même, vous ne pouvez pas générer (naïvement) une valeur lorsqu'une partie de celle-ci est fournie par une variable:

.foo {
    --gap: 20;
    margin-top: var(--gap)px;
}

Là encore, cela n'équivaut pas à définir margin-top: 20px;. Pour créer une valeur, vous avez besoin d'autre chose: la fonction calc().

Créer des valeurs avec calc()

Si vous n'avez jamais travaillé avec elle, la fonction calc() est un peu qui vous permet d'effectuer des calculs pour déterminer des valeurs CSS. Il est compatible avec tous les navigateurs récents et peut être combiné avec des propriétés personnalisées pour créer des valeurs. Exemple :

.foo {
    --gap: 20;
    margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

Utiliser des propriétés personnalisées en JavaScript

Pour obtenir la valeur d'une propriété personnalisée au moment de l'exécution, utilisez getPropertyValue(). de l'objet CSSStyleDeclaration calculé.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

De même, pour définir la valeur de la propriété personnalisée au moment de l'exécution, utilisez la fonction Méthode setProperty() de l'objet CSSStyleDeclaration.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

Vous pouvez également définir la valeur de la propriété personnalisée pour faire référence à une autre propriété personnalisée lors de l'exécution en utilisant la fonction var() dans votre appel de setProperty()

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

Étant donné que les propriétés personnalisées peuvent faire référence à d'autres propriétés personnalisées dans votre dans les feuilles de style, vous pouvez imaginer comment cela pourrait vous donner toutes sortes de des effets d'exécution.

Prise en charge des navigateurs

Actuellement, Chrome 49, Firefox 42, Safari 9.1 et iOS Safari 9.3 acceptent les propriétés.

Démo

Essayez le exemple pour découvrir toutes les techniques intéressantes que vous pouvez utiliser, aux propriétés personnalisées.

Documentation complémentaire

Pour en savoir plus sur les propriétés personnalisées, L'équipe Google Analytics a rédigé un message de présentation expliquant pourquoi il est intéressé par les propriétés personnalisées. et vous pouvez suivre leur progression dans d'autres navigateurs. chromestatus.com.