Co to jest atrybut all (CSS)?

Atrybutem „all” najczęściej nazywa się w praktyce CSS-ową, skrótową właściwość all. Służy ona do jednorazowego zresetowania wartości prawie wszystkich właściwości CSS elementu. Działa jak „twardy reset” – zamiast nadpisywać pojedyncze reguły, możesz jednym zapisem przywrócić stan bazowy i zbudować styl od zera.

Jak działa właściwość all?

Właściwość all przyjmuje wyłącznie specjalne słowa kluczowe kaskady:

• initial – ustawia każdą właściwość na jej wartość początkową zdefiniowaną w specyfikacji (ignoruje domyślne style przeglądarki).
• inherit – wymusza dziedziczenie wszystkich właściwości z elementu nadrzędnego (także tych, które zwykle nie dziedziczą).
• unset – hybryda: dla właściwości dziedziczonych zachowuje się jak inherit, dla pozostałych jak initial.
• revert – cofa do wartości, jaka obowiązywałaby bez reguł autora (wraca do stylów użytkownika lub domyślnych przeglądarki).
• revert-layer – cofa tylko deklaracje z bieżącej warstwy kaskady (CSS Cascade Layers).

Wyjątek: all nie obejmuje właściwości direction i unicode-bidi (z powodów związanych z kierunkiem pisma i dwukierunkowością tekstu).

W praktyce:

• all: unset często „czyści” komponent z przypadkowego dziedziczenia (np. kolorów, fontów, marginów), ale sprawi też, że właściwości niedziedziczone wrócą do wartości początkowych (np. display przejdzie na inline).
• all: revert przywraca zdrowe, przeglądarkowe domyślne zachowania (np. domyślne marginesy nagłówków, wygląd kontrolek formularzy), co bywa lepszym punktem wyjścia niż „goła” specyfikacja.

Zastosowania w codziennej pracy

• Izolacja komponentów (design systems): Gdy element ma wyglądać tak samo niezależnie od kontekstu, all: unset pozwala zerwać niechciane dziedziczenie i zdefiniować styl od nowa.
• Cofnięcie zbyt agresywnych resetów: Jeśli globalny reset „spłaszczył” typografię, all: revert na nagłówkach i listach szybko przywróci sensowne domyślne odstępy.
• Integracje zewnętrzne: Osadzone widżety potrafią wprowadzać kolizje CSS. Zastosowanie all: revert lub warstw kaskady z revert-layer pomaga ograniczyć wpływ globalnych reguł.

Przykłady:

/* Komponent startujący „na czysto” */
.card {
  all: unset;
  display: block;       /* trzeba jawnie przywrócić */
  box-sizing: border-box;
  font: inherit;        /* choć font jest dziedziczony, warto być explicite */
  color: inherit;
}

/* Przywrócenie sensownych domyślnych styli dla treści */
.prose h1, .prose h2, .prose h3, .prose ul, .prose ol {
  all: revert;
}

/* W warstwach kaskady (nowoczesne przeglądarki) */
@layer base, components;

@layer components {
  .btn--plain {
    all: revert-layer; /* cofnie tylko deklaracje z warstwy 'components' */
    padding: .5rem 1rem;
  }
}

Znaczenie dla UX i SEO

Sama właściwość all nie wpływa bezpośrednio na ranking. Ma jednak realny wpływ pośredni:

• Stabilność układu (CLS): Nieostrożne użycie all: unset na dużych kontenerach może zmienić display, marginesy czy rozmiary, wywołując skoki layoutu.
• Czytelność i dostępność: Zbyt agresywny reset może usunąć obramowania focusa, style linków czy domyślne interakcje formularzy, pogarszając doświadczenia i dostępność – co finalnie wpływa na zaangażowanie użytkowników i konwersje.
• Wydajność: Nadmierne poleganie na globalnych resetach i „naprawianiu” ich lokalnie zwiększa złożoność CSS. Krótsze, bardziej przewidywalne style ułatwiają utrzymanie i mogą skrócić czas renderowania.

Dobre praktyki:

• Stosuj all punktowo, głównie do izolacji komponentów albo cofania nadpisanych styli.
• Po all: unset zawsze jawnie ustaw display, kluczowe metryki typograficzne i focus styles.
• Rozważ revert zamiast initial, jeśli chcesz wrócić do sensownych domyślnych zachowań przeglądarki.
• Testuj w nowoczesnych przeglądarkach; revert-layer wymaga wsparcia warstw kaskady.

Właściwość all to precyzyjny „wyłącznik” kaskady: potrafi szybko zresetować element do stanu bazowego, ale wymaga świadomości, co dokładnie resetujesz. Używana rozważnie pozwala budować przewidywalne komponenty, poprawiać kompatybilność stylów i utrzymać kontrolę nad interfejsem bez nadpisywania dziesiątek pojedynczych reguł.

Agata

Dzięki wieloletniemu doświadczeniu, zdobytemu przy współpracy z różnymi branżami, potrafię dostosowywać podejście do indywidualnych potrzeb każdego klienta. Na stronie Biznesuj.pl dzielę się wiedzą oraz praktycznymi poradami na temat prowadzenia biznesu, aby inspirować i wspierać przedsiębiorców w ich codziennych wyzwaniach. Zapraszam do lektury moich artykułów, które mogą stać się drogowskazem w dążeniu do sukcesu.”

Polecane -  Co to jest influencer?