web-dev-qa-db-fra.com

Création de variables globales CSS: Gestion des thèmes de la feuille de style

Est-il possible de définir des variables globales dans CSS telles que:

@Color1 = #fff;
@Color2 = #b00;

h1 {
  color:@Color1;
  background:@Color2;
}
cssvariables
57
DreamTeK

Dernière mise à jour: 03/04/2018

Les variables CSS (Propriétés personnalisées) sont arrivées!

Une autre année, un autre navigateur. Edge a maintenant rejoint Mozilla et Google en prenant en charge cette fonctionnalité vraiment géniale.

Préprocesseur "PAS" requis!

Il y a beaucoup de répétition en CSS. Une seule couleur peut être utilisée à plusieurs endroits.

Pour certaines déclarations CSS, il est possible de déclarer cela plus haut dans la cascade et de laisser l'héritage CSS résoudre ce problème naturellement.

Pour des projets non triviaux, cela n'est pas toujours possible. En déclarant une variable sur le :root pseudo-élément, un auteur CSS peut arrêter certaines occurrences de répétition en utilisant la variable.

Comment ça marche

Placez votre variable en haut de votre feuille de style:

[~ # ~] css [~ # ~]

Créez une classe racine:

:root {
}

Créer des variables (- [String]: [valeur])

:root {
  --red: #b00;
  --blue: #00b;
  --fullwidth: 100%;
}

Définissez vos variables n'importe où dans votre document CSS:

h1 {
  color: var(--red);
}
#MyText {
  color: var(--blue);
  width: var(--fullwidth);
}

SUPPORT/COMPATIBILITÉ DU NAVIGATEUR

Voir caniuse.com pour la compatibilité actuelle.

![supported browsers

FIREFOX: Version 31 + (activé par défaut)

(montrant le chemin comme d'habitude.) More info from Mozilla

CHROME: Version 49 + (activé par défaut) .

"Cette fonctionnalité peut être activée dans Chrome Version 48 pour les tests en activant la fonctionnalité expérimentale Web Platform . Entrer chrome://flags/ dans votre Chrome pour accéder à ce réglage. "

Safari/IOS Safari: Version 9.1/9.3 (activé par défaut).

Opera: Version 39 + (activé par défaut) .

Android: Version 52 + (activé par défaut) .

IE: Cela n'arrivera jamais.

Edge: Version 15 + (activé par défaut) .

Propriétés personnalisées CSS débarquées dans Windows Insider Preview build 14986

SPEC W3C

Spécification complète pour les variables CSS à venir

Read more

ESSAYE LE

Un violon et un extrait sont joints ci-dessous pour les tests:

(Cela ne fonctionnera qu'avec les navigateurs compatibles.)

DEMO FIDDLE

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
  --W200: 200px;
  --Lft: left;
}
.Bx1,
.Bx2,
.Bx3,
.Bx4 {
  float: var(--Lft);
  width: var(--W200);
  height: var(--W200);
  margin: 10px;
  padding: 10px;
  border: 1px solid var(--red);
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
}
.Bx2 {
  color: var(--grey);
  background: black;
}
.Bx3 {
  color: var(--grey);
  background: var(--blue);
}
.Bx4 {
  color: var(--grey);
  background: var(--red);
}
<p>If you see four square boxes then variables are working as expected.</p>

<div class="Bx1">I should be red text on grey background.</div>
<div class="Bx2">I should be grey text on black background.</div>
<div class="Bx3">I should be grey text on blue background.</div>
<div class="Bx4">I should be grey text on red background.</div>
100
DreamTeK

Vous ne pouvez pas créer de variables en CSS pour le moment. Si vous voulez ce genre de fonctionnalité, vous devrez utiliser un préprocesseur CSS comme SASS ou MOINS . Voici vos styles tels qu'ils apparaissent dans SASS:

$Color1:#fff;
$Color2:#b00;
$Color3:#050;

h1 {
    color:$Color1;
    background:$Color2;
}

Ils vous permettent également de faire d'autres choses (géniales) comme des sélecteurs imbriqués:

#some-id {
    color:red;

    &:hover {
        cursor:pointer;
    }
}

Ceci compilerait pour:

#some-id { color:red; }
#some-id:hover { cursor:pointer; }

Consultez le tutoriel officiel SASS pour obtenir des instructions de configuration et plus sur la syntaxe/les fonctionnalités. Personnellement, j'utilise une extension Visual Studio appelée Web Workbench de Mindscape pour faciliter le développement, il existe également de nombreux plugins pour d'autres IDE.

Mise à jour

Depuis juillet/août 2014, Firefox a implémenté le draft spec pour les variables CSS, voici la syntaxe:

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}
26
Daniel Imms

Ce n'est pas possible avec CSS, mais avec un préprocesseur CSS comme less ou SASS .

6
deceze

Essayez SASS http://sass-lang.com/ ou MOINS http://lesscss.org/

J'aime SASS et l'utilise pour tous mes projets.

3
joshuahornby10

Je le fais de cette façon:

Le HTML:

<head>
    <style type="text/css"> <? require_once('xCss.php'); ?> </style>
</head>

Le xCss.php:

<? // place here your vars
$fntBtn = 'bold 14px  Arial'
$colBorder  = '#556677' ;
$colBG0     = '#dddddd' ;
$colBG1     = '#44dddd' ;
$colBtn     = '#aadddd' ;

// here goes your css after the php-close tag: 
?>
button { border: solid 1px <?= $colBorder; ?>; border-radius:4px; font: <?= $fntBtn; ?>; background-color:<?= $colBtn; ?>; }
3
Helmo56

Vous aurez soit besoin de MOINS ou de SASS pour les mêmes ..

Mais voici une autre alternative qui, à mon avis, fonctionnera dans CSS3.

http://css3.bradshawenterprises.com/blog/css-variables/

Exemple :

 :root {
    -webkit-var-beautifulColor: rgba(255,40,100, 0.8);
    -moz-var-beautifulColor: rgba(255,40,100, 0.8);
    -ms-var-beautifulColor: rgba(255,40,100, 0.8);
    -o-var-beautifulColor: rgba(255,40,100, 0.8);
    var-beautifulColor: rgba(255,40,100, 0.8);
 }
  .example1 h1 {
    color: -webkit-var(beautifulColor);
    color: -moz-var(beautifulColor);
    color: -ms-var(beautifulColor);
    color: -o-var(beautifulColor);
    color: var(beautifulColor);
 }
1
Rahul Patil