Ripristina la proprietà di visualizzazione CSS sul valore predefinito

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

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

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

Non impostato display:

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

display: unset;

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

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.

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'

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.