Initial - przydatna mała wartość z CSS3 Values

Wiele razy taka wartość znacznie ułatwiłaby mi pracę, ale dopiero niedawno dowiedziałem się, że w ogóle istnieje. Wsparcie przez przeglądarki jest całkiem dobre, więc nie pozostaje nic innego, jak ją opisać i zacząć z niej korzystać. Chodzi o initial - już tłumaczę jak to działa.

Czasami zdarza się, że chcecie schować dany element na stronie - pomijając metody show, hide czy toggle z jQuery wystarczy użyć stylu CSS display: none. Jeśli chcecie spowrotem pokazać dany element, wtedy po prostu przypisujecie mu (czy to bezpośrednio, czy zmieniając klasę z danym stylem) display: block. Brzmi sensownie. Co natomiast w sytuacji, gdy dany element miał wcześniej zdefiniowany display: inline zamiast block? Psujemy cały układ, a być może przy okazji layout strony. Albo sami będziemy pamiętać co było wcześniej zdefiniowane, żeby ręcznie ustawić to ponownie, albo skorzystamy z wartości initial, której krótki opis znajdziemy w dokumentacji CSS3 Values:

Słowo kluczowe initial reprezentuje podaną wartość, która jest wartością początkową.

Kolejny trop znajdziemy w dokumentacji CSS Cascade definiującej kaskadowość arkuszy stylów. Oczywiście nie tylko display może korzystać z tego udogodnienia. Zobaczmy (lekko zmodyfikowany) przykład z dokumentacji MDN odnoszący się do atrybutu color:

body {

	color: black;

}

.red {

	color: red;

}

.initial {

	color: initial;

}

<p class="red">

	ten tekst jest czerwony

		<em class="initial">

			a ten używa koloru początkowego

			(w tym wypadku czarnego)

		</em>

	ten tekst jest znowu czerwony

</p>

Jak widać najpierw definiujemy kolor czerwony dla tekstu, a następnie korzystając z initial wracamy do wartości zdefiniowanej na początku. Późniejszy tekst znowu korzysta z klasy .red, dzięki czemu ma czerwony kolor.

Wsparcie przeglądarek jest całkiem dobre: Chrome i Safari interpretują initial "od zawsze", natomiast Firefox korzystał z wersji z prefiksem -moz-, który został usunięty wraz z wydaniem najnowszej, 19 wersji przeglądarki. Internet Explorer i Opera nie wspierają w ogóle tej wartości.