Questa pagina è stata tradotta dall'API Cloud Translation.

Variabili CSS: perché dovrebbero interessarti?

Rob Dodson

le variabili CSS, dette in modo più preciso come proprietà personalizzate CSS, di Chrome 49. Possono essere utili per ridurre le ripetizioni in CSS. anche per effetti di runtime potenti, come il cambio di tema e, l'estensione/il polyfill delle future funzionalità CSS.

Disordine CSS

Quando si progetta un'applicazione, è pratica comune mettere da parte un insieme di colori che verranno riutilizzati per mantenere l'aspetto dell'app coerente. Purtroppo, la ripetizione continua di questi valori nel CSS non solo un compito noioso, ma anche soggetto a errori. Se, a un certo punto, uno dei colori non deve essere modificata, si può andare prudente e "trovare e sostituire" su tutto, ma su un progetto abbastanza grande potrebbe facilmente diventare pericoloso.

Di recente, molti sviluppatori si sono rivolti ai preprocessori CSS come SASS o MENO che risolvono il problema attraverso l'uso delle variabili del preprocessore. Mentre questi strumenti hanno incrementato enormemente la produttività degli sviluppatori, le variabili che che usano soffrono di uno svantaggio importante, ovvero che sono statici e non possono è cambiato in fase di esecuzione. Aggiungere la possibilità di modificare le variabili in fase di runtime, non solo apre le porte a cose come la tematizzazione dinamica dell'applicazione, ma presenta anche ramificazioni per il responsive design e la possibilità di eseguire il polyfill di CSS futuri le funzionalità di machine learning. Con il rilascio di Chrome 49, queste funzionalità sono ora disponibili in sotto forma di proprietà CSS personalizzate.

Proprietà personalizzate in breve

Le proprietà personalizzate aggiungono due nuove funzionalità agli strumenti CSS:

La possibilità per un autore di assegnare valori arbitrari a una proprietà con un scelto dall'autore.
La funzione var(), che consente a un autore di utilizzare questi valori in altre proprietà.

Ecco un breve esempio per dimostrare

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

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

--main-color è una proprietà personalizzata definita dall'autore con il valore #06c. Nota che tutte le proprietà personalizzate inizino con due trattini.

La funzione var() recupera e sostituisce la proprietà personalizzata generando un valore di color: #06c;, purché la proprietà personalizzata sia definita in qualche punto del foglio di stile dovrebbe essere disponibile per la funzione var.

La sintassi può sembrare un po' strana all'inizio. Molti sviluppatori chiedono: usare solo $foo per i nomi delle variabili?" L'approccio è stato scelto specificamente per il più flessibile possibile e consentire l'inserimento di macro $foo in futuro. Per i retroscena, puoi leggere questo post di uno degli autori delle specifiche, Tab Atkins.

Sintassi delle proprietà personalizzate

La sintassi di una proprietà personalizzata è semplice.

--header-color: #06c;

Tieni presente che le proprietà personalizzate sono sensibili alle maiuscole, pertanto --header-color e --Header-Color sono proprietà personalizzate diverse. Anche se possono sembrare semplici , la sintassi consentita per le proprietà personalizzate è abbastanza permissiva. Ad esempio, la seguente è una proprietà personalizzata valida:

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

Sebbene non sia utile come variabile, non sarebbe valida in qualsiasi proprietà normale, potrebbe potenzialmente essere letta e applicata con JavaScript runtime. Ciò significa che le proprietà personalizzate hanno il potenziale per sbloccare tutti i tipi di tecniche interessanti attualmente impossibili con gli odierni preprocessori CSS. Quindi... se pensi "yawn ho SASS quindi chi se ne frega...", poi dai un'altra occhiata! Queste non sono le variabili con cui sei abituato a lavorare.

Cascade

Le proprietà personalizzate seguono le regole a cascata standard, quindi puoi definire le stesse la proprietà a diversi livelli di specificità

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

Ciò significa che è possibile sfruttare le proprietà personalizzate all'interno delle query supporti per con il responsive design. Un caso d'uso potrebbe essere quello di espandere i margini attorno gli elementi di sezionamento principali man mano che aumenta le dimensioni dello schermo:

:root {
    --gutter: 4px;
}

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

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

È importante sottolineare che lo snippet di codice riportato sopra non è possibile utilizzando gli attuali preprocessori CSS che non sono in grado di definire variabili all'interno dei contenuti multimediali query. Questa abilità ti consente di sfruttare un grande potenziale.

È anche possibile avere proprietà personalizzate che derivano il loro valore da altre proprietà personalizzate. Questo può essere estremamente utile per i temi:

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

La funzione var()

Per recuperare e utilizzare il valore di una proprietà personalizzata, devi utilizzare la proprietà Funzione var(). La sintassi per la funzione var() è simile alla seguente:

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

Dove <custom-property-name> è il nome di una proprietà personalizzata definita dall'autore, come --foo, mentre <declaration-value> è un valore di riserva da utilizzare quando la proprietà personalizzata di riferimento non è valida. I valori di riserva possono essere separati da virgole che verrà combinato in un unico valore. Ad esempio, var(--font-stack, "Roboto", "Helvetica"); definisce un elemento di riserva "Roboto", "Helvetica". Conserva tieni presente che i valori abbreviati, come quelli utilizzati per margine e spaziatura interna, non sono separate da virgole, quindi un'alternativa appropriata per la spaziatura interna sarebbe simile a questa.

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

Utilizzando questi valori di riserva, l'autore di un componente può scrivere stili difensivi per il relativo elemento:

/* 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 */
}

Questa tecnica è particolarmente utile per la tematizzazione dei componenti web che utilizzano Shadow DOM, poiché le proprietà personalizzate possono oltrepassare i confini delle ombre. Autore di un componente web possono creare un progetto iniziale utilizzando valori di fallback ed esporre gli "hook" sotto forma di proprietà personalizzate.

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

Quando usi var(), ci sono alcune cose a cui fare attenzione. Le variabili non possono essere i nomi delle proprietà. Ad esempio:

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

Tuttavia, non equivale a impostare margin-top: 20px;. Invece, la seconda dichiarazione non è valida e viene restituita come errore.

Analogamente, non puoi (ingenuamente) generare un valore se una parte di questo viene fornita una variabile:

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

Anche in questo caso, non equivale a impostare margin-top: 20px;. Per creare un hai bisogno di qualcos'altro: la funzione calc().

Creazione di valori con calc()

Se non hai mai lavorato prima, la funzione calc() è poco costosa che ti consente di eseguire calcoli per determinare i valori CSS. È supportata da tutti i browser moderni e può essere combinata con proprietà personalizzate per creare nuovi valori. Ad esempio:

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

Utilizzare le proprietà personalizzate in JavaScript

Per ottenere il valore di una proprietà personalizzata in fase di runtime, utilizza getPropertyValue() dell'oggetto CSSStyleDeclaration calcolato.

/* 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'

Analogamente, per impostare il valore della proprietà personalizzata in fase di runtime, utilizza il metodo Metodo setProperty() dell'oggetto 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');

Puoi anche impostare il valore della proprietà personalizzata in modo che faccia riferimento a un'altra proprietà personalizzata in fase di runtime utilizzando la funzione var() nella chiamata a 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)');

Poiché le proprietà personalizzate possono fare riferimento ad altre proprietà personalizzate nel tuo fogli di stile, si potrebbe immaginare come questo possa generare gli effetti di runtime.

Supporto browser

Attualmente Chrome 49, Firefox 42, Safari 9.1 e iOS Safari 9.3 supportano le proprietà.

Demo

Prova la esempio per dare un'occhiata a tutte le interessanti tecniche che puoi usare ora, grazie alle proprietà personalizzate.

Per approfondire

Se ti interessa saperne di più sulle proprietà personalizzate, Philip Walton di Il team di Google Analytics ha scritto un'introduzione al motivo per cui è entusiasta delle proprietà personalizzate e tenere traccia dei progressi in altri browser chromestatus.com.