Ripristina la proprietà di visualizzazione CSS sul valore predefinito


172

È possibile sovrascrivere la proprietà display con il suo valore predefinito? Ad esempio, se non l'ho impostato su nessuno in uno stile e voglio sovrascriverlo in modo diverso con il suo valore predefinito.

O è l'unico modo per scoprire qual è il valore predefinito di quell'elemento e quindi impostarlo su quello? Vorrei non sapere se l'elemento è di solito blocco, in linea o qualunque ...


5
Ora è possibile utilizzare unset.
minuti


1
So che questa domanda chiede solo che il display sia ripristinato ai valori predefiniti del browser ma per le molte persone che visiteranno questa pagina cercando di ripristinare tutti gli attributi ai valori predefiniti del browser usano: .myclass {all: unset; } div {all: unset; } ecc.
user1254723

Risposte:


155

Gli stili predefiniti di un browser sono definiti nel relativo foglio di stile dell'agente utente, le cui fonti sono disponibili qui . Sfortunatamente, la specifica Cascading and Inheritance livello 3 non sembra proporre un modo per ripristinare una proprietà di stile al suo valore predefinito del browser. Tuttavia, ci sono piani per reintrodurre una parola chiave per questo in Cascading e Inheritance livello 4 - il gruppo di lavoro semplicemente non ha ancora deciso un nome per questa parola chiave (il link attualmente dice revert, ma non è definitivo). Informazioni sul supporto del browser per revertsono disponibili su caniuse.com .

Mentre la specifica di livello 3 introduce una initialparola chiave , l'impostazione di una proprietà sul suo valore iniziale la ripristina al suo valore predefinito come definito da CSS , non come definito dal browser . Il valore iniziale di displayè inline; questo è specificato qui . La initialparola chiave si riferisce a quel valore, non al valore predefinito del browser. La specifica stessa rende questa nota sotto la allproprietà :

Ad esempio, se un autore specifica all: initialun elemento, bloccherà tutta l'ereditarietà e ripristinerà tutte le proprietà, come se non apparissero regole nei livelli dell'autore, dell'utente o dell'agente utente della cascata.

Questo può essere utile per l'elemento radice di un "widget" incluso in una pagina, che non desidera ereditare gli stili della pagina esterna. Si noti, tuttavia, che qualsiasi stile "predefinito" applicato a quell'elemento (come, ad esempio, display: blockdal foglio di stile UA su elementi di blocco come <div>) verrà spazzato via.

Quindi suppongo che l'unico modo per usare CSS puro sia cercare il valore predefinito del browser e impostarlo manualmente su quello:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(Un'alternativa a quanto sopra sarebbe div.foo:not(.bar) { display: inline-block; }, ma ciò comporta la modifica del selettore originale piuttosto che una sostituzione.)


5
Ah, perché i browser devono essere sempre così lenti per ottenere le cose utili e utili: p E perché gli utenti devono essere così lenti ad aggiornare ... comunque, è esattamente quello che volevo!
Svish,

1
@Svish: A quanto pare ho frainteso ciò che initialeffettivamente fa. Ho aggiornato la mia risposta.
BoltClock

14
@Svish: CSS definisce i valori iniziali a livello di proprietà, non in base agli elementi, come inizialmente pensavo. In questo esempio, il valore iniziale di displayè sempre inline( w3.org/TR/CSS21/visuren.html#display-prop ), indipendentemente dal fatto che sia su a divo a span. Un divelemento è display: blockdi default secondo HTML , e non CSS, quindi dipende dal foglio di stile UA del browser da dire div { display: block; }.
BoltClock

1
"I CSS definiscono i valori iniziali a livello di proprietà, non in base agli elementi per come pensavo inizialmente." - Ho dovuto rileggerlo alcune volte per crederci. (Dato che il CSS sembra sempre essere applicato in (una sorta di) contesto di elementi, non supportarlo qui suggerisce qualcosa di non banale da imparare - qualcuno conosce la logica?)
Sz.

1
defaultè stato rinominato in revert.
Oriol,

29

Se è consentito l'uso di JavaScript , è possibile impostare la displayproprietà su una stringa vuota. Ciò farà sì che utilizzi l'impostazione predefinita per quel particolare elemento.

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

Ecco un link a un jsbin .

Questo è bello perché non c'è bisogno di preoccuparsi per i diversi tipi di visualizzazione per ripristinare ( block, inline, inline-block, table-cell, ecc).

Ma richiede javascript, quindi se stai cercando una soluzione solo per CSS, questa non è la soluzione per te.

Nota: questo sostituisce gli stili incorporati, ma non quelli impostati in CSS


11
Si noti che questo funziona solo se lo stile è stato impostato utilizzando JavaScript o un styleattributo inline in primo luogo. Non puoi sostituire o rimuovere una dichiarazione da un foglio di stile usando questo metodo.
BoltClock

1
@BoltClock Non sono d'accordo. Ecco un jsfiddle che penso smentisca ciò che stai dicendo. jsfiddle.net/g45qagt3
thetallweeks,

8
Mi dispiace, il mio uso della parola override era confuso. Voglio dire, l'impostazione di uno stile sulla stringa vuota rimuoverà solo uno stile che è stato applicato tramite l' styleattributo o il setter JavaScript. Puoi comunque sostituire una dichiarazione del foglio di stile se imposti un valore specifico tramite JS, ma impostarlo su vuoto equivale a non impostarlo affatto: la dichiarazione del foglio di stile rimarrà intatta. Guarda il violino modificato: jsfiddle.net/BoltClock/g45qagt3/1
BoltClock

1
Vale la pena notare che quella stringa vuota funziona per qualsiasi proprietà, non solo per "display"
Artur Beljajev,

11

Non impostato display:

Puoi utilizzare il valore unsetche funziona sia in Firefox che in Chrome .

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }

5
unsetha gli stessi problemi di initial. Il valore di displaydiventerà inline. Vedi codepen.io/Gidgidonihah/pen/mwWxEq
Gidgidonihah

L'OP vuole chiaramente ripristinare il valore predefinito per elemento, ad es. Per resettare lo span su inline e un div su block. unsetnon sarà di aiuto in quanto è per proprietà e reimposterà sempre il display su inline. Ti preghiamo di considerare l'aggiornamento della tua risposta.
Krulik

6

No, generalmente non è possibile. Una volta che un codice CSS (o HTML) imposta un valore per una proprietà su un elemento, non c'è modo di annullarlo e dire al browser di utilizzare il suo valore predefinito.

È ovviamente possibile impostare una proprietà su un valore che si prevede sia il valore predefinito. Questo potrebbe funzionare piuttosto ampiamente se controlli la sezione Rendering di HTML5 CR, riflettendo principalmente ciò che i browser effettivamente fanno.

Tuttavia, la risposta è "No", perché i browser potrebbero avere qualsiasi valore predefinito che preferiscono. È necessario analizzare qual è stata la ragione per voler ripristinare le impostazioni predefinite; il problema originale potrebbe essere ancora risolvibile.


5

Se hai accesso a JavaScript , puoi creare un elemento e leggere il suo stile calcolato.

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

1
È apparso che devi effettivamente aggiungere l'elemento generato al tag <body> per ottenere lo stile calcolato, almeno in Chrome.
dimplex,

4

Per quanto riguarda la risposta di BoltClock e John, ho avuto personalmente problemi con la parola chiave iniziale durante l'utilizzo di IE11. Funziona bene in Chrome, ma in IE sembra non avere alcun effetto.

Secondo questa risposta IE non supporta la parola chiave iniziale: Div display: iniziale non funziona come previsto in ie10 e chrome 29

Ho provato a impostarlo vuoto come suggerito qui: come tornare alla normalità dopo la visualizzazione: nessuno per la riga della tabella

Questo ha funzionato ed è stato abbastanza buono per il mio scenario. Naturalmente per impostare il valore iniziale reale la risposta sopra è l'unica buona che ho trovato.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.