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 “NON” requirejs!

Il y a beaucoup de répétitions 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’inheritance CSS résoudre ce problème naturellement.

Pour les projets non sortingviaux, ce n’est pas toujours possible. En déclarant une variable sur le pseudo-élément :root , un auteur CSS peut arrêter certaines instances de répétition en utilisant la variable.

Comment ça marche

Définissez votre variable en haut de votre feuille de style:

CSS

Créez une classe racine:

 :root { } 

Créer des variables (- [Ssortingng] : [value] )

 :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 DE NAVIGATEUR / COMPATIBILITÉ

Voir caniuse.com pour la compatibilité actuelle.

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

(Montrer la voie comme d’habitude.) Plus d'infos sur 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 de la plate-forme Web . Entrez chrome://flags/ dans votre barre d’adresse Chrome pour accéder à ce paramètre.”

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: ça n’arrivera jamais.

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

Les propriétés CSS personnalisées ont été détectées dans la version 14986 de Windows Insider Preview

W3C SPEC

Spécification complète pour les prochaines variables CSS

Lire la suite

ESSAYE LE

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

(Cela ne fonctionnera qu’avec les navigateurs pris en charge.)

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); } 

 
If you see four square boxes then variables are working as expected.
 
I should be red text on grey background.
 
I should be grey text on black background.
 
I should be grey text on blue background.
 
I should be grey text on red background. 

Vous ne pouvez pas créer de variables CSS dès maintenant. Si vous voulez ce type de fonctionnalité, vous devrez utiliser un préprocesseur CSS tel que SASS ou LESS . Voici vos styles tels qu’ils apparaîtront 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 les sélecteurs d’imbrication:

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

Cela comstackrait à:

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

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

Mettre à jour

A partir de juillet / août 2014, Firefox a implémenté le brouillon de spécification 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); } 

Ce n’est pas possible en utilisant CSS, mais en utilisant un préprocesseur CSS comme less ou SASS .

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

J’adore SASS et je l’utilise pour tous mes projets.

Je le fais de cette façon:

Le html:

Le xCss.php:

  button { border: solid 1px ; border-radius:4px; font: ; background-color:; } 

Vous aurez besoin de MOINS ou de SASS pour le même ..

Mais voici une autre alternative qui, selon moi, fonctionnera en CSS3.

http://css3.bradshawentersockets.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); }