Właściwości: initial, unset i revert

Wstęp

W CSS istnieją 4 wartości, które możesz przypisać do każdej właściwości. Są to: initial, inherit, unset, revert.

Przykłady: display: unset, background: revert, font-size: initial, border: inherit i tak w nieskończoność (prawie). Wszystkie te deklaracje są jak najbardziej prawidłowe.

W tym artykule wyjaśnię działanie 3 z nich: initial, unset i revert. O inherit wspominam w osobnym artykule.

Wartości initial, unset i revert

initial

Wartość initial dla wybranej właściwości oznacza domyślną wartość określoną w specyfikacji CSS, nie zwracając zupełnie uwagi na typ elementu HTML.

Zatem jeśli ustawisz wartość initial dla właściwości display to tak jakbyś napisał display: inline, ponieważ inline jest domyślną wartością dla display!

Nie ma znaczenia czy dotyczy to elementu div czy span, które w normalnych warunkach mają różne wartości kolejno: block oraz inline. Te różne wartości pochodzą od domyślnych styli dostarczonych przez przeglądarkę.

Zatem style przeglądarki są całkowicie pomijane w przypadku initial!

unset

Wartość unset zachowuje się tak samo, jak initial, ale tylko w przypadku właściwości niedziedzicznych.

Zatem dla display, position, background, margin, border itd. efekt będzie identyczny jak przy wartości initial.

Dla właściwości dziedzicznych, takich jak font-size, font-family, color itd., ustawi się inherit. Czyli te właściwości, które normalnie są dziedzicznie, nie utracą tej cechy!

Jakie jeszcze właściwości są dziedziczne? Dowiesz się tutaj: lista wszystkich właściwości dziedzicznych w CSS

revert

Wartość revert dla właściwości dziedzicznych działa podobnie jak unset, czyli dziedziczenie jest zachowane. Dla pozostałych właściwości wracamy do styli serwowanych nam domyślnie przez przeglądarkę (czyli trochę taki reset).

Zatem deklaracja display: revert na elemencie div oznacza block, a na elemencie span oznacza inline. Dzieje się tak dlatego, że właśnie takie wartości są ustawiane przez przeglądarkę dla elementów div i span.

Z kolei właściwości dziedziczne jak color, font-size itd. będą nadal dziedziczone od rodzica, nawet jeśli przeglądarka ustala swoją wartość dla takiej właściwości.

Zastosowanie w praktyce

Uważam, że najbardziej użyteczną wartością jest revert, w szczególności w parze z właściwością all, czyli all: revert.

Jak się pewnie domyślasz, właściwość all zastępuje wszystkie inne właściwości, zatem jeśli użyjesz all: revert w swojej regule to tak jak byś wymienił po kolei wszystkie istniejące właściwości CSS (setki) i nadał im wartość revert. Czyli bardzo przyjemny skrót!

Spójrz na przykład poniżej:

W pierwszej regule dla paragrafu p ... ustawiłem obramowanie, padding oraz tło. Dla body ustawiłem niebieski kolor tekstu, dlatego paragrafy mają także niebieski kolor (dziedziczą).

Dla drugiego paragrafu ustawiłem all: revert i efekt jest zgodny z oczekiwaniem.

Kolor i wielkość czcionki - bez zmian ze względu na to, że są dziedziczone od body.

Zniknęło za to obramowanie, padding i różowe tło. Te właściwości nie są ustawiane przez przeglądarkę dla elementu p, więc te właściwości tak de facto otrzymały wartość initial.

Co bardzo istotne, drugi paragraf (ten z revert) utrzymał swoje naturalne ustawienie display: block. Przy initial zmieniłoby się na display: inline.

Spójrz jeszcze na przykład guzika, który pokazuje zachowanie wszystkich trzech właściwości: initial, unset i revert. Przykład guzika lepiej zilustruje ci przede wszystkim działanie all: revert.

Dla body ponownie ustawiłem niebieski kolor tekstu oraz większy niż domyślnie rozmiar czcionki.

Przeanalizujmy po kolei:

Normalny guzik

Na to jak się prezentuje, wpływa styl narzucony przez przeglądarkę oraz odziedziczony od body kolor i rozmiar czcionki. Nic poza tym, żadnych więcej modyfikacji z mojej strony.

Guzik z all: initial

Zmiany w stosunki do normalnego guzika są przeogromne:

• zniknęło tło i obramowanie, które dla guzika ustawiają style przeglądarki
• kolor i rozmiar czcionki wróciły do domyślnych wartości

Wartość initial działa trochę jak bomba atomowa 💣, kamień na kamieniu się nie ostał.

Guzik z all: unset

Unset był trochę delikatniejszy od initial:

• zachował się kolor i rozmiar czcionki (wartości dziedziczne)
• zniknęło tło i obramowanie, jako że to nie są dziedziczne właściwości

Guzik z all: revert

Revert był najbardziej wyrozumiały, bo guzik z revert jako jedyny w ogóle przypomina guzik:

• zachowało się tło i obramowanie nadawane przez style przeglądarki
• kolor i rozmiar czcionki wróciły do domyślnych wartości

Gdybym nie ustawił dla body innego koloru i rozmiaru czcionki, to "Guzik z revert" wyglądałby dokładnie tak samo jak "Normalny guzik".