CSS
Propriétés personnalisées (variables)

Introduction

Syntaxe

• : pseudo-classe root {} / * permettant une définition plus globale des variables * /
• - nom-variable: valeur ; / * définir la variable * /
• var (- nom-variable, valeur par défaut ) / * utilise une variable définie avec une valeur par défaut repli * /

Remarques

Couleur variable

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
  border: 1px solid var(--red);
}

Dimensions variables

:root {
  --W200: 200px;
  --W10: 10px;
}
.Bx2 {
  width: var(--W200);
  height: var(--W200);
  margin: var(--W10);
}

Variable en cascade

Les variables CSS se répercutent de la même manière que les autres propriétés et peuvent être retraitées en toute sécurité.

Vous pouvez définir des variables plusieurs fois et seule la définition avec la spécificité la plus élevée s'appliquera à l'élément sélectionné.

En supposant ce HTML:

<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>

Nous pouvons écrire ce CSS:

.button {
  --color: green;
  padding: .5rem;
  border: 1px solid var(--color);
  color: var(--color);
}

.button:hover {
  --color: blue;
}

.button_red {
  --color: red;
}

Et obtenez ce résultat:

Valide / Invalides

Nommer Lorsque vous nommez des variables CSS, il ne contient que des lettres et des tirets, comme les autres propriétés CSS (ex: line-height, -moz-box-sizing), mais il doit commencer par des doubles tirets (-).

//These are Invalids variable names
--123color: blue;
--#color: red;
--bg_color: yellow
--$width: 100px;

//Valid variable names
--color: red;
--bg-color: yellow
--width: 100px;

Les variables CSS sont sensibles à la casse.

/* The variable names below are all different variables */
--pcolor: ;
--Pcolor: ;
--pColor: ;

Vs Space vide

/* Invalid */
    --color:;

/* Valid */
  --color: ; /* space is assigned */

Concaténations

    /* Invalid - CSS doesn't support concatenation*/
    .logo{
        --logo-url: 'logo';
        background: url('assets/img/' var(--logo-url) '.png');
    }

    /* Invalid - CSS bug */
    .logo{
        --logo-url: 'assets/img/logo.png';
        background: url(var(--logo-url));
    }

    /* Valid */
    .logo{
        --logo-url: url('assets/img/logo.png');
        background: var(--logo-url);
    }

Attention lorsque vous utilisez des unités

    /* Invalid */
    --width: 10;
    width: var(--width)px;

    /* Valid */
    --width: 10px;
    width: var(--width);

    /* Valid */
    --width: 10;
    width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
    width: calc(1em * var(--width));

Avec des requêtes médiatiques

Vous pouvez redéfinir les variables dans les requêtes multimédias et faire en sorte qu'elles soient utilisées en cascade, ce qui n'est pas possible avec les variables de préprocesseur.

Ici, une requête média modifie les variables utilisées pour configurer une grille très simple:

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

:root{
    --width: 25%;
    --content: 'This is desktop';
}
@media only screen and (max-width: 767px){
    :root{
        --width:50%;
        --content: 'This is mobile';
    }
}
@media only screen and (max-width: 480px){
    :root{
        --width:100%;
    }
}

div{
    width: calc(var(--width) - 20px);
    height: 100px;
}
div:before{
    content: var(--content);
}

/* Other Styles */
body {
    padding: 10px;
}

div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight:bold;
    float:left;
    margin: 10px;
    border: 4px solid black;
    background: red;
}

Vous pouvez essayer de redimensionner la fenêtre dans cette démonstration CodePen

Voici une capture d'écran animée du redimensionnement en action: