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

172

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

Svish
źródło
5
Teraz jest to możliwe przy użyciu unset.
min
1
Wiem, że to pytanie dotyczy tylko resetowania wyświetlania do domyślnych ustawień przeglądarki, ale dla wielu osób, które będą odwiedzać tę stronę, chcąc zresetować wszystkie atrybuty z powrotem do domyślnych ustawień przeglądarki, użyj: .myclass {all: unset; } div {all: unset; } itp.
user1254723

Odpowiedzi:

155

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

BoltClock
źródło
5
Ach, dlaczego przeglądarki muszą zawsze być tak wolne, aby dostać się do dobrych i przydatnych rzeczy: p I dlaczego użytkownicy muszą tak wolno aktualizować ... w każdym razie, właśnie tego chciałem!
Svish
1
@Svish: Okazuje się, że źle zinterpretowałem, co initialtak naprawdę działa. Zaktualizowałem moją odpowiedź.
BoltClock
14
@Svish: CSS definiuje wartości początkowe na poziomie właściwości, a nie na podstawie poszczególnych elementów, jak początkowo sądziłem. W tym przykładzie początkowa wartość displayto zawsze inline( w3.org/TR/CSS21/visuren.html#display-prop ), niezależnie od tego, czy znajduje się na diva span. divElementem jest display: blockdomyślnie zgodnie z HTML , CSS i nie, więc jest to do UA stylów znaczy przeglądarki div { display: block; }.
BoltClock
1
„CSS definiuje początkowe wartości na poziomie właściwości, a nie na podstawie poszczególnych elementów, jak początkowo sądziłem”. - Właściwie musiałem to przeczytać kilka razy, żeby w to uwierzyć. (Ponieważ CSS wydaje się być zawsze stosowany w (jakimś) kontekście elementarnym, brak wsparcia w tym miejscu sugeruje coś nietrywialnego do nauczenia - czy ktoś zna uzasadnienie?)
Sz.
1
defaultzostała zmieniona na revert.
Oriol
29

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

thetallweeks
źródło
11
Zauważ, że działa to tylko wtedy, gdy styl został ustawiony przy użyciu JavaScript lub styleatrybutu wbudowanego w pierwszej kolejności. Nie można przesłonić ani usunąć deklaracji z arkusza stylów przy użyciu tej metody.
BoltClock
1
@BoltClock Nie zgadzam się. Oto jsfiddle, który moim zdaniem obala to, co mówisz. jsfiddle.net/g45qagt3
thetallweeks
8
Przepraszamy, użycie słowa „override” było mylące. Chodzi mi o to, że ustawienie stylu na pusty ciąg spowoduje usunięcie tylko stylu, który został zastosowany za pośrednictwem styleatrybutu lub ustawiającego JavaScript. Nadal możesz nadpisać deklarację arkusza stylów, jeśli ustawisz określoną wartość za pomocą JS, ale ustawienie jej na pustą jest równoznaczne z całkowitym nie ustawieniem jej - deklaracja arkusza stylów pozostanie nienaruszona. Zobacz zmodyfikowane skrzypce: jsfiddle.net/BoltClock/g45qagt3/1
BoltClock
1
Warto zauważyć, że pusty ciąg znaków działa dla każdej właściwości, nie tylko "display"
Artur Beljajev
11

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; }
Sheharyar
źródło
5
unsetma takie same problemy jak initial. Wartość displaybędzie inline. Zobacz codepen.io/Gidgidonihah/pen/mwWxEq
Gidgidonihah
OP wyraźnie chce zresetować do wartości domyślnych dla każdego elementu, np. Aby zresetować span do inline i div do block. unsetnie pomoże w tym, ponieważ jest na właściwość i zawsze zresetuje wyświetlacz do inline. Rozważ aktualizację swojej odpowiedzi.
krulik
6

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.

Jukka K. Korpela
źródło
5

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'
Frederik Krautwald
źródło
1
Okazało się, że musisz faktycznie dołączyć wygenerowany element do tagu <body>, aby uzyskać obliczony styl, przynajmniej w Chrome.
dimplex,
4

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źć.

Søren Ullidtz
źródło