Caratteristiche del linguaggio CSS

In aggiunta alle coppie di proprietà / valore che il CSS offre, c'è anche una piccola manciata di caratteristiche del linguaggio che possono dimostrarsi utili, incluse alcune che sono nuove di zecca nelle specifiche.
Caratteristiche del linguaggio CSS

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “The Minimum Code for a CSS Transition” di Louis Lazaris.

Scaviamo più a fondo

In aggiunta alle coppie di proprietà / valore che il CSS offre, c’è anche una piccola manciata di caratteristiche del linguaggio che possono dimostrarsi utili, incluse alcune che sono nuove di zecca nelle specifiche.

Queste spesso passano inosservate, soprattutto dai principianti, perchè quando vengono discusse le proprietà CSS e i loro possibili valori (nei tutorials, nei libri, o perfino nelle specifiche), queste caratteristiche vengono spesso omesse per abbreviare.

Ecco un riassunto di quattro caratteristiche del linguaggio CSS.

Keyword: “inherit”

Ogni proprietà CSS può accettare, come proprio valore, la keyword “inherit”. Come in questo caso:

span {
    font-size: inherit;
}

Ciò che questo provoca è che l’elemento oggetto del selettore eredita dal suo elemento genitore il valore della proprietà specificata. Se l’elemento genitore non ha quella specifica proprietà definita in CSS, erediterà il valore computato del genitore (che può essere il valore iniziale o qualunque cosa sia ereditata dal genitore di quell’elemento).

La keyword “inherit” può dimostrarsi utile quando volete assegnare lo stesso valore a un gruppo di elementi figli per proprietà che normalmente non ereditano. Per esempio:

.module {
    box-shadow:  0px 0px 11px rgba(0, 0, 0, 0.4);
}

.module div {
    box-shadow: inherit;
}

Adesso tutti gli elementi

dentro all’elemento principale .module erediteranno il suo valore “box shadow”.

Il supporto browser per “inherit” è eccellente. Per molto tempo, nessuno ha usato “inherit” perchË IE6/7 non lo supportavano, ad eccezione della proprietà “direction”. Adesso che quei browsers sono per lo più fuori scena, la maggior parte degli sviluppatori dovrebbe trovarsi bene nell’usarlo.

Keyword: ‘initial’

Questa è semplice da capire ed è stata aggiunta recentemente alle specifiche CSS3 (sebbene, tecnicamente, come per molte caratteristiche CSS3, sia stata in lavorazione per un periodo).

Ogni proprietà CSS ha un valore iniziale o di default. Definendo il valore con la keyword “initial”, state dicendo al browser di settare la proprietà utilizzando il valore predefinito per quella proprietà.

Fondamentalmente è la stessa cosa che non definire del tutto la proprietà, quindi potreste pensare che sia inutile. Questo è parzialmente vero, perchè probabilmente non la userete molto. Ma quando lo fate, può esservi utile.

Per esempio, potreste voler usare “initial” su una proprietà che viene ereditata dal suo genitore di default, come “color”:

body {
    color: aquamarine;
}

.example {
    color: initial;
}

L’elemento “example” avrà di norma lo stesso colore di quello impostato nel body. Ma in questo caso, noi lo disabilitiamo lasciando che il colore sia resettato al suo stato iniziale (che probabilmente è nero).

Inoltre, questo può dimostrarsi utile quando si cambiano gli stili dinamicamente con JavaScript. Tramite un’interazione dell’utente o un’altra modifica, una proprietà può essere impostata al suo stato iniziale, anche se potrebbe essere definita specificamente come default.

Per quanto riguarda il supporto browser, non sono molto sicuro. Sembra funzionare sull’ultimo Chrome e Firefox, ma non negli ultimi Opera o IE10.

Keyword: “Unset”

Questo valore veniva chiamato “default” e ora è stato cambiato in “unset”. E’ molto simile alla keyword “initial”. In sostanza, usando “unset” come valore si cancellerà ogni valore definito esplicitamente che può essere stato passato all’elemento per quella proprietà, o precedentemente definito altrove.

body {
    font-size: 1.5em;
}

.module {
    font-size: unset;
}

La differenza tra “unset” e “initial” consiste nel fatto che il valore unset può essere un valore ereditato. Quindi, in qualche modo, è una sorta di combinazione delle due precedenti keywords. Quando si “unsetta” un valore, per prima cosa il browser cerca un valore ereditato. Se non ne trova nessuno (per esempio, per una proprietà che non si eredita, come “border-color”), allora lo imposta al valore iniziale o default.

Dato che è nuovo, non credo che abbia ancora un supporto browser.

Property: “all”

Infine, questa è un’altra novità: la proprietà “all”. Naturalmente, questa non potrà avere valori custom, quindi ha tre possibili valori di keyword: “inherit”, “initial”, e “unset” – le tre keywords di cui abbiamo appena parlato.

La proprietà “all” resetta tutte le proprietà sull’elemento oggetto del selettore, con l’eccezione di “direction” e “unicode-bidi”.

.example {
    all: initial;
}

La specifica evidenzia un interessante caso d’uso per “all” quando dice:

“Ciò può essere utile per l’elemento radice di un widget incluso in una pagina, che non desidera ereditare gli stili della pagina esterna”.

Per quanto riguarda il supporto browser, a causa del fatto che le tre keyword che accetta non sono ancora supportate tra i browsers, questa proprietà probabilmente non sarà utilizzabile per un po’ di tempo.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github