Przywrócenie wartości domyślnej {...: initial}
Jak przywrócić domyślne formatowanie elementów na stronie?
CSS 3
selektor { cecha: initial }
Dziedziczenie stylów to bardzo przydatna funkcja w języku CSS. Dzięki niej nie musimy definiować np. koloru tekstu dla każdego elementu strony osobno. Zdarzają się jednak przypadki, kiedy takie zachowanie może nie być dla nas pożądane. Na szczęście istnieje sposób na odwołanie jego efektów dla wybranych sytuacji.
Każda cecha CSS ma określoną wartość domyślną, która zostanie przyjęta, jeśli nie określimy inaczej. Na przykład dla wartości koloru tekstu może to być barwa czarna, a dla koloru tła - biała. Wartości domyślne są przypisywane podczas tzw. procesu inicjalizacji.
Wartości domyślne (inicjalizacja) dla poszczególnych cech CSS możesz sprawdzić w rozdziałach: Komendy CSS 2 oraz Komendy CSS3.
Specjalna wartość initial, którą można przypisać do dowolnej cechy CSS, pozwala przywrócić wartość domyślną bez względu na dziedziczenie stylów.
Jeśli chcesz przywrócić pierwotny wygląd elementowi - tzn. zawsze jaki był przed dołączeniem naszych stylów do dokumentu - sprawdź, czy w takim przypadku bardziej odpowiednie nie będzie użycie wartości revert.
Przykład {...: initial}
To jest akapit koloru zielonego, wewnątrz którego znajduje się: pochylenie oraz podkreślenie, którym nie zostały nadane żadne style, a więc dziedziczą je po przodku, czyli po akapicie (są również zielone).
A to jest pogrubienie, które znajduje się także wewnątrz tego samego akapitu, ale został mu nadany atrybut koloru czcionki oraz koloru tła jako "initial" i dlatego nie odziedziczył stylu po przodku.
Oczywiście w powyższym przykładzie moglibyśmy po prostu ustawić kolor tekstu pogrubienia na czarny, a tło na białe. Jednak warto pamiętać, że nie w każdej sytuacji odpowiadałoby to wartościom domyślnym. Na przykład jeśli użytkownik ustawi ciemny motyw w swoim systemie operacyjnym, domyślnym kolorem tekstu może być biały, a tła - czarny. Dzięki użyciu wartości initial mamy pewność, że tekst wyświetli się w odpowiedni sposób.
Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | |
---|---|---|---|---|---|
initial | 1 2008-12-11 | 19 2013-02-19 | 13 2015-11-12 | 15 2013-07-02 | 1.2 2004-02-02 |