Przywrócenie wartości pierwotnej {...: revert}

Jak przywrócić pierwotny wygląd wybranemu elementowi na stronie?

CSS 3

selektor { cecha: revert }

Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach.

Każda przeglądarka ma wbudowany domyślny arkusz stylów. Dzięki niemu nawet jeśli nie dołączymy żadnych własnych stylów do dokumentu, to np. tekst zawarty w znaczniku B i tak będzie pogrubiony. To bardzo przydatna funkcja, bo przeglądarka w ten sposób załatwia za nas sporo pracy.

Może się jednak zdarzyć, że w naszym arkuszu stylów zmienimy sposób formatowania jakiegoś elementu, ale potem będziemy chcieli przywrócić mu pierwotny wygląd. Oczywiście najprostszym sposobem byłoby po prostu usunięcie wybranych deklaracji z naszych stylów, ale nie zawsze jest to możliwe. Czasem mogłoby to wymagać przebudowania całego arkusza od początku albo po prostu byłoby niewygodne. W takim przypadku pomocna okazuje się specjalna wartość revert, którą można przypisać do dowolnej cechy CSS. Dzięki niej element może w każdej chwili wrócić do swojego pierwotnego wyglądu - tzn. takiego, jak został określony we wbudowanym arkuszu stylów przeglądarki.

Działanie wartości revert może się wydawać nieco podobne do initial. Istnieje jednak zasadnicza różnica: initial zawsze ustawia domyślną wartość wybranej cechy CSS (zobacz sekcje "inicjalizacja" w rozdziałach: Komendy CSS 2 i Komendy CSS3) bez względu na element, do którego zostanie przypisana. Oznacza to, że np. przypisanie stylu "font-weight: initial" do znacznika B spowoduje, że tekst w nim zawarty nie będzie pogrubiony - ponieważ właśnie taka jest wartość domyślna dla własności wagi czcionki. Natomiast użycie w tym przypadku wartości revert przywróci wytłuszczenie tekstu.

Przykład {...: revert}

To jest akapit koloru zielonego. Do jego elementów podrzędnych został przypisany specjalny styl powodujący, że każde pogrubienie, które się znajduje wewnątrz niego, przyjmie atrybut koloru czcionki (biały) oraz koloru tła (niebieski), ale tekst nie będzie wytłuszczony.
Do elementów podrzędnych tego akapitu został jednak przypisany drugi styl. Dzięki niemu jeśli umieścimy pogrubienie wewnątrz pochylenia, jego kolor tekstu oraz tła, a także waga czcionki przyjmą wartość "revert". Zatem kolory zostaną odziedziczone z akapitu (tekst będzie zielony), natomiast sama treść zostanie standardowo wytłuszczona.

Dla zainteresowanych
Powyższy efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów:

p { color: green; }
p b { color: white; background-color: blue; font-weight: normal; }
p i b { color: revert; background-color: revert; font-weight: revert; }