Resetuj właściwość wyświetlania CSS do wartości domyślnej

Czy można zastąpić właściwość display wartością domyślną? Na przykład, jeśli ustawiłem go na none w jednym stylu i chcę zastąpić go w innym stylu domyślnym.

A może to jedyny sposób, aby dowiedzieć się, jaka jest wartość domyślna tego elementu, a następnie ustawić go na taki? Chciałbym nie wiedzieć, czy element jest zwykle blokowy, wbudowany czy cokolwiek ...

Domyślne style przeglądarki są zdefiniowane w arkuszu stylów agenta użytkownika, którego źródła można znaleźć tutaj . Niestety, specyfikacja kaskadowania i dziedziczenia poziomu 3 nie wydaje się proponować sposobu zresetowania właściwości stylu do wartości domyślnej przeglądarki. Istnieją jednak plany ponownego wprowadzenia tego słowa kluczowego na poziomie kaskadowania i dziedziczenia na poziomie 4 - grupa robocza po prostu nie ustaliła jeszcze nazwy dla tego słowa kluczowego (link obecnie podaje revert, ale nie jest ostateczny). Informacje na temat obsługi przeglądarek revertmożna znaleźć na caniuse.com .

Podczas gdy specyfikacja poziomu 3 wprowadza initialsłowo kluczowe , ustawienie właściwości na jej wartość początkową resetuje ją do wartości domyślnej zdefiniowanej przez CSS , a nie zdefiniowanej przez przeglądarkę . Początkowa wartość displayto inline; jest to określone tutaj . Słowo initialkluczowe odnosi się do tej wartości, a nie do wartości domyślnej przeglądarki. Sama specyfikacja umieszcza tę notatkę pod allwłaściwością :

Na przykład, jeśli autor określi all: initialelement w elemencie, zablokuje to dziedziczenie i zresetuje wszystkie właściwości, tak jakby żadne reguły nie pojawiały się na poziomach autora, użytkownika lub klienta użytkownika w kaskadzie.

Może to być przydatne w przypadku głównego elementu „widżetu” zawartego na stronie, który nie chce dziedziczyć stylów strony zewnętrznej. Należy jednak pamiętać, że każdy „domyślny” styl zastosowany do tego elementu (taki jak np. display: blockZ arkusza stylów UA w elementach blokowych, takich jak <div>) również zostanie zdmuchnięty.

Więc wydaje mi się, że jedynym sposobem w tej chwili przy użyciu czystego CSS jest wyszukanie domyślnej wartości przeglądarki i ustawienie jej ręcznie:

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

(Alternatywą dla powyższego byłoby div.foo:not(.bar) { display: inline-block; }, ale wiąże się to raczej z modyfikacją oryginalnego selektora niż nadpisaniem).

Jeśli używanie javascript jest dozwolone , możesz ustawić displaywłaściwość na pusty ciąg. Spowoduje to, że użyje wartości domyślnej dla tego konkretnego elementu.

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

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

Oto link do pliku jsbin .

To jest dobre, bo nie trzeba się martwić o różnych typach, aby powrócić do ekranu ( block, inline, inline-block, table-cell, etc).

Ale wymaga javascript, więc jeśli szukasz rozwiązania tylko dla CSS, to nie jest to rozwiązanie dla Ciebie.

Uwaga: zastępuje style wbudowane, ale nie style ustawione w css

Nieskonfigurowany display:

Możesz użyć wartości, unsetktóra działa zarówno w przeglądarce Firefox, jak i Chrome .

display: unset;

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

Nie, generalnie nie jest to możliwe. Gdy jakiś kod CSS (lub HTML) ustawi wartość właściwości elementu, nie ma sposobu, aby to cofnąć i powiedzieć przeglądarce, aby użyła jej wartości domyślnej.

Jest oczywiście możliwe, aby ustawić właściwość wartość, że spodziewać się wartość domyślna. Może to działać dość szeroko, jeśli sprawdzisz sekcję Rendering w HTML5 CR, głównie odzwierciedlającą to, co faktycznie robią przeglądarki.

Mimo to odpowiedź brzmi „nie”, ponieważ przeglądarki mogą mieć dowolne wartości domyślne. Powinieneś przeanalizować, jaki był powód chęci przywrócenia ustawień domyślnych; oryginalny problem może nadal być rozwiązywalne.

Jeśli masz dostęp do JavaScript , możesz utworzyć element i odczytać jego wyliczony styl.

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'

Jeśli chodzi o odpowiedź BoltClock i Johna, osobiście miałem problemy z początkowym słowem kluczowym podczas korzystania z IE11. Działa dobrze w Chrome, ale w IE wydaje się nie mieć żadnego efektu.

Zgodnie z tą odpowiedzią IE nie obsługuje początkowego słowa kluczowego: wyświetlanie Div: początkowe nie działa zgodnie z przeznaczeniem w ie10 i chrome 29

Zamiast tego próbowałem ustawić go jako pusty, jak sugerowano tutaj: jak wrócić do normalnego stanu po wyświetleniu: brak dla wiersza tabeli

To zadziałało i było wystarczająco dobre dla mojego scenariusza. Oczywiście, aby ustawić prawdziwą wartość początkową, powyższa odpowiedź jest jedyną dobrą, jaką udało mi się znaleźć.