Kurs HTML

Wprowadzenie: Więcej kontroli nad wartościami CSS

Oprócz standardowych wartości, które możemy przypisać właściwościom CSS (jak kolory, jednostki długości, słowa kluczowe), istnieje kilka specjalnych, globalnych słów kluczowych, które pozwalają nam precyzyjniej kontrolować mechanizmy kaskady i dziedziczenia. Są to: inherit, initial, unset i revert.

Zrozumienie ich działania pozwala na bardziej świadome zarządzanie stylami i resetowanie wartości do określonych stanów.

1. inherit - Jawne dziedziczenie

Jak już wspomnieliśmy w poprzedniej lekcji, wartość inherit **wymusza dziedziczenie** obliczonej wartości danej właściwości od elementu nadrzędnego. Można jej użyć dla **każdej** właściwości CSS, nawet tej, która domyślnie nie jest dziedziczona.

.rodzic {
  color: blue;
  border: 1px solid green;
}

.dziecko {
  /* Jawne odziedziczenie koloru (choć color dziedziczy domyślnie) */
  color: inherit; 

  /* Jawne odziedziczenie obramowania (border normalnie nie dziedziczy) */
  border: inherit; 
}Kopiuj

W tym przypadku, .dziecko otrzyma zarówno niebieski kolor tekstu, jak i zielone obramowanie od .rodzic.

Zastosowanie: Przydatne, gdy chcemy, aby element potomny dokładnie naśladował styl rodzica dla właściwości niedziedziczonej domyślnie, lub gdy chcemy nadpisać inną regułę i jawnie wskazać na dziedziczenie.

2. initial - Reset do wartości początkowej

Wartość initial ustawia właściwość elementu na jej **wartość początkową (initial value)** zdefiniowaną w specyfikacji CSS dla tej właściwości. Ignoruje ona zarówno wartość odziedziczoną, jak i jakąkolwiek inną wartość wynikającą z kaskady dla tego elementu.

body {
  color: blue;
}

.reset-koloru {
  /* Ustawia kolor na wartość początkową (zazwyczaj czarny dla 'color') */
  color: initial; 
}

.reset-wyswietlania {
  /* Ustawia display na wartość początkową (zazwyczaj 'inline' dla ) */
  display: initial; 
}Kopiuj

Wartość początkowa jest specyficzna dla każdej właściwości (np. dla color to zazwyczaj czarny, dla background-color to transparent, dla display zależy od elementu, ale często inline).

Zastosowanie: Przydatne, gdy chcemy całkowicie zresetować styl elementu do jego absolutnie domyślnego stanu zdefiniowanego w standardzie CSS, ignorując wszelkie inne style (w tym style przeglądarki czy odziedziczone).

3. unset - Reset "inteligentny"

Wartość unset działa nieco inaczej w zależności od tego, czy dana właściwość jest **dziedziczona domyślnie**, czy nie:

• Jeśli właściwość jest **dziedziczona** (np. color, font-family), unset działa jak inherit. Element przejmie wartość od rodzica.
• Jeśli właściwość **nie jest dziedziczona** (np. border, margin, background-color), unset działa jak initial. Element przyjmie wartość początkową właściwości.

Można myśleć o unset jako o "naturalnym" resecie – przywraca domyślne zachowanie kaskady dla danej właściwości.

.rodzic {
  color: green;
  border: 1px solid blue;
}

.dziecko-unset {
  /* color jest dziedziczony, więc unset działa jak inherit -> green */
  color: unset; 

  /* border nie jest dziedziczony, więc unset działa jak initial -> brak obramowania */
  border: unset; 
}Kopiuj

Zastosowanie: Bardzo użyteczne, gdy chcemy usunąć wszystkie style zastosowane do elementu przez wcześniejsze reguły i przywrócić jego "naturalne" zachowanie w kontekście dziedziczenia i wartości początkowych, bez konieczności jawnego ustawiania inherit lub initial w zależności od właściwości.

4. revert - Reset do stylu z poprzedniego źródła

Wartość revert jest nowsza i cofa wartość właściwości do tej, która byłaby zastosowana, gdyby nie było żadnych stylów autora dla tego elementu. Oznacza to, że przywraca wartość ze stylów **użytkownika** lub, jeśli ich nie ma, ze stylów **przeglądarki (user-agent)**.

Działa podobnie do unset, ale zamiast resetować do wartości początkowej (initial) dla właściwości niedziedziczonych, resetuje do wartości domyślnej przeglądarki lub użytkownika.

/* Styl autora */
a {
  color: red; /* Nadpisanie domyślnego niebieskiego */
  display: block; /* Nadpisanie domyślnego inline */
}

.link-domyslny {
  /* Przywraca kolor zdefiniowany przez użytkownika lub przeglądarkę (zazwyczaj niebieski) */
  color: revert; 

  /* Przywraca display zdefiniowany przez użytkownika lub przeglądarkę (zazwyczaj inline) */
  display: revert; 
}Kopiuj

Zastosowanie: Przydatne, gdy chcemy wycofać style wprowadzone przez nasz własny arkusz (autora) i wrócić do domyślnego wyglądu elementu zdefiniowanego przez przeglądarkę lub użytkownika, bez konieczności jawnego zgadywania, jaka to była wartość.

Podsumowanie wartości