Ultimo aggiornamento: 03/04/2018

Sono arrivate le variabili CSS (Proprietà personalizzate)!

Un altro anno un altro browser. Edge ha ora aderito a Mozilla e Google supportando questa funzionalità davvero eccezionale.

Necessario il preprocessore “NOT” !

C’è molta ripetizione nei CSS. Un singolo colore può essere utilizzato in più punti.

Per alcune dichiarazioni CSS, è ansible dichiararlo più in alto nella cascata e lasciare che l’ereditarietà CSS risolva questo problema in modo naturale.

Per progetti non banali, questo non è sempre ansible. Dichiarando una variabile sullo pseudo-elemento :root , un autore CSS può fermare alcune istanze di ripetizione usando la variabile.

Come funziona

Imposta la tua variabile nella parte superiore del tuo foglio di stile:

CSS

Crea una class radice:

 :root { } 

Crea variabili (- [String] : [valore] )

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

Imposta le tue variabili ovunque nel tuo documento CSS:

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

SUPPORTO AL BROWSER / COMPATIBILITÀ

Vedi caniuse.com per la compatibilità attuale.

FIREFOX: versione 31 + (abilitata per impostazione predefinita)

( Sempre come al solito.) Ulteriori informazioni da Mozilla

CHROME: versione 49 + (abilitata di default) .

“Questa funzione può essere abilitata nella versione 48 di Chrome per i test abilitando la funzionalità sperimentale della piattaforma Web . Inserisci chrome://flags/ nella barra degli indirizzi di Chrome per accedere a questa impostazione.”

Safari / IOS Safari: versione 9.1 / 9.3 (abilitato per impostazione predefinita) .

Opera: versione 39 + (abilitata per impostazione predefinita) .

Android: versione 52 + (abilitata per impostazione predefinita) .

IE: Non succederà mai.

Edge: versione 15 + (abilitata per impostazione predefinita) .

Proprietà personalizzate CSS sbarcate in Windows Insider Preview build 14986

W3C SPEC

Specifica completa per le prossime variabili CSS

Leggi di più

PROVALO

Un violino e uno snippet sono allegati sotto per il test:

(Funzionerà solo con i browser supportati).

FIDDLE DEMO

 :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. 

Non è ansible creare variabili in CSS in questo momento. Se vuoi questo tipo di funzionalità dovrai usare un preprocessore CSS come SASS o LESS . Ecco i tuoi stili come apparirebbero in SASS:

 $Color1:#fff; $Color2:#b00; $Color3:#050; h1 { color:$Color1; background:$Color2; } 

Inoltre ti permettono di fare altre (fantastiche) cose come i selettori di nidificazione:

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

Questo si compilerebbe per:

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

Guarda il tutorial SASS ufficiale per le istruzioni di configurazione e altro su syntax / funzionalità. Personalmente io uso un’estensione di Visual Studio chiamata Web Workbench di Mindscape per un facile sviluppo, ci sono anche molti plugin per altri IDE.

Aggiornare

A partire da luglio / agosto 2014, Firefox ha implementato la bozza delle specifiche per le variabili CSS, ecco la syntax:

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

Non è ansible usare i CSS, ma usando un preprocessore CSS come less o SASS .

Prova SASS http://sass-lang.com/ o MENO http://lesscss.org/

Adoro SASS e lo uso per tutti i miei progetti.

Lo faccio in questo modo:

L’html:

Il xCss.php:

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

Avrai bisogno di LESS o SASS per lo stesso ..

Ma ecco un’altra alternativa che credo funzionerà nel CSS3 ..

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

Esempio :

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