Proprietà CSS all

La proprietà CSS all è una shorthand che reimposta tutte le proprietà di un elemento in una sola volta, ad eccezione di unicode-bidi e direction, che controllano la direzione del testo e vengono deliberatamente lasciate invariate.

Non accetta un elenco di valori di proprietà. Al contrario, si specifica una singola parola chiave CSS globale (initial, inherit, unset, revert o revert-layer) e questa viene applicata a ogni proprietà dell'elemento. È quindi un modo rapido per eliminare stili ereditati o dichiarati in precedenza in una sola riga.

Questa pagina tratta la sintassi, tutti i valori accettati, esempi eseguibili e quando ha davvero senso usare all.

Perché e quando usarla

Il motivo più comune per usare all è creare una base di stile pulita. Ad esempio, quando si incorpora un widget o un componente di terze parti in una pagina, gli stili ereditati (font, color, line-height) possono infiltrarsi. Impostare all: initial o all: revert sul wrapper elimina quell'ereditarietà, in modo che il componente parta da uno stato prevedibile.

Tieni presenti questi punti:

È pesante. all tocca ogni proprietà, quindi usala su sottoalberi piccoli e contenuti anziché su body o contenitori grandi.
Non reimposta direction né unicode-bidi. Questo è intenzionale, in modo che la direzione del testo non venga mai accidentalmente interrotta.
I figli non vengono reimpostati automaticamente. all reimposta l'elemento di destinazione. Le proprietà ereditabili (come color) continuano a cascadare verso i figli, a meno che anche i figli non eseguano un reset.

Questa proprietà è considerata una shorthand di reset. A differenza delle shorthand con più valori come margin o background, non ha una versione longhand né sotto-proprietà.

Valore iniziale	normal
Si applica a	Tutti gli elementi.
Ereditata	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.all = "inherit";

Sintassi

Sintassi della proprietà CSS all

all: initial | inherit | unset | revert | revert-layer;

Esempio della proprietà all con il valore revert:

Esempio della proprietà CSS all con il valore revert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        color: #666;
        all: revert;
      }
    </style>
  </head>
  <body>
    <h2>All property example</h2>
    <p>Here the all: revert; is set.</p>
    <div class="example"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà all con i valori inherit, initial e unset:

Esempio della proprietà CSS all con i valori inherit, initial e unset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-size: 15px;
        color: #1c87c9;
      }
      .example1 {
        background-color: #8ebf42;
        color: #666;
      }
      .example2 {
        background-color: #8ebf42;
        color: #666;
        all: inherit;
      }
      .example3 {
        background-color: #8ebf42;
        color: #666;
        all: initial;
      }
      .example4 {
        background-color: #8ebf42;
        color: #666;
        all: unset;
      }
    </style>
  </head>
  <body>
    <h2>All property example</h2>
    <hr />
    <p>No all property:</p>
    <div class="example1"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: inherit:</p>
    <div class="example2"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: initial:</p>
    <div class="example3"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: unset:</p>
    <div class="example4"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr /> 
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione
initial	Imposta ogni proprietà al valore iniziale definito dalla specifica, ignorando l'ereditarietà.
inherit	Fa sì che ogni proprietà assuma il valore calcolato dall'elemento padre.
unset	Si comporta come `inherit` per le proprietà ereditabili (come `color`) e come `initial` per quelle non ereditabili (come `border`).
revert	Ripristina ogni proprietà al valore che avrebbe dal foglio di stile dell'agente utente o dell'utente, ignorando gli stili dell'autore definiti in precedenza.
revert-layer	Ripristina ogni proprietà al valore impostato nel precedente cascade layer.

`unset` vs `revert`

Questi due valori si confondono facilmente:

unset rimuove il valore dell'autore e ricade sull'ereditarietà o sul valore iniziale della specifica — non sa nulla del foglio di stile predefinito del browser.
revert ripristina attivamente allo stile predefinito del browser. Quindi all: revert su un <h2> lo fa apparire come una normale intestazione in grassetto, mentre all: unset lo riduce a testo semplice simile a inline.

Supporto browser

all è supportata in tutti i browser moderni (Chrome, Firefox, Safari, Edge). La parola chiave revert è arrivata più tardi rispetto a initial/inherit/unset, e revert-layer richiede il supporto dei cascade layer, quindi verifica la copertura se devi supportare versioni di browser meno recenti.

Esercizio

Pratica

Quali affermazioni sulla proprietà CSS all sono vere?

all reimposta ogni proprietà di un elemento eccetto direction e unicode-bidi.all accetta un elenco separato da virgole di valori di proprietà individuali.all: revert ripristina le proprietà allo stile predefinito del browser.all ha sotto-proprietà longhand come margin.all: unset usa inherit per le proprietà ereditabili e initial per le altre.