M

MLOG

Polski

Odkryj regułę CSS @when, potężną funkcję umożliwiającą warunkowe stosowanie stylów w oparciu o wsparcie przeglądarki, rozmiar widoku i inne. Ucz się na praktycznych przykładach.

Reguła CSS @when: Opanowanie warunkowego stosowania stylów

Świat CSS nieustannie ewoluuje, oferując deweloperom coraz potężniejsze i bardziej elastyczne sposoby stylizowania stron internetowych. Jedną z takich funkcji zyskujących na popularności jest reguła @when, znana również jako CSS Conditional Rules Module Level 1. Reguła ta pozwala na warunkowe stosowanie stylów CSS, w oparciu o spełnienie określonych warunków. Jest to potężne narzędzie do responsywnego projektowania, wykrywania funkcji oraz tworzenia bardziej solidnych i adaptowalnych arkuszy stylów.

Czym jest reguła CSS @when?

Reguła @when to warunkowa dyrektywa (@-rule) w CSS, która pozwala definiować style stosowane tylko wtedy, gdy określone warunki są prawdziwe. Można o niej myśleć jak o instrukcji if dla CSS. W przeciwieństwie do zapytań o media (media queries), które koncentrują się głównie na charakterystyce widoku (rozmiar ekranu, orientacja itp.), @when zapewnia bardziej ogólny i rozszerzalny sposób obsługi stylizacji warunkowej. Rozszerza ona istniejące warunkowe dyrektywy, takie jak @supports i @media.

Kluczowe zalety używania @when

Składnia reguły @when

Podstawowa składnia reguły @when jest następująca: 
@when <condition> {
  /* Reguły CSS do zastosowania, gdy warunek jest prawdziwy */
}

<condition> może być dowolnym poprawnym wyrażeniem logicznym, które zwraca prawdę lub fałsz. Wyrażenie to często obejmuje:

Praktyczne przykłady użycia @when

Przyjrzyjmy się kilku praktycznym przykładom, aby zilustrować moc i wszechstronność reguły @when.

1. Responsywny design z @when i zapytaniami o media

Najczęstszym przypadkiem użycia @when jest responsywny design, w którym dostosowujesz style w zależności od rozmiaru ekranu. Chociaż zapytania o media mogą to osiągnąć samodzielnie, @when zapewnia bardziej ustrukturyzowane i czytelne podejście, zwłaszcza w przypadku złożonych warunków.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

W tym przykładzie style w bloku @when są stosowane tylko wtedy, gdy szerokość ekranu mieści się w przedziale od 768px do 1023px (typowy rozmiar tabletu). Zapewnia to jasny i zwięzły sposób definiowania stylów dla określonych zakresów widoku.

Uwaga dotycząca internacjonalizacji: Responsywny design jest kluczowy dla globalnej publiczności. Należy wziąć pod uwagę różne rozmiary ekranów w różnych regionach. Na przykład, w niektórych krajach wykorzystanie urządzeń mobilnych jest wyższe, co czyni projektowanie w podejściu mobile-first jeszcze ważniejszym.

2. Wykrywanie funkcji z @when i @supports

@when można łączyć z @supports, aby stosować style tylko wtedy, gdy dana funkcja CSS jest obsługiwana przez przeglądarkę. Pozwala to na stopniowe ulepszanie witryny, zapewniając lepsze doświadczenia użytkownikom z nowoczesnymi przeglądarkami, jednocześnie zachowując kompatybilność ze starszymi.

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Style zastępcze dla przeglądarek, które nie obsługują siatki */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Dostosuj szerokość dla starszych przeglądarek */
  }
}

Tutaj używamy @supports, aby sprawdzić, czy przeglądarka obsługuje CSS Grid Layout. Jeśli tak, stosujemy style oparte na siatce do kontenera .container. Jeśli nie, zapewniamy style zastępcze (fallback) przy użyciu flexbox, aby zapewnić podobny układ w starszych przeglądarkach.

Globalna uwaga dotycząca dostępności: Wykrywanie funkcji jest ważne dla dostępności. Starsze przeglądarki mogą nie obsługiwać nowszych atrybutów ARIA lub semantycznych elementów HTML5. Zapewnij odpowiednie style zastępcze, aby treść pozostała dostępna.

3. Łączenie zapytań o media i zapytań o funkcje

Prawdziwa moc @when pochodzi z jej zdolności do łączenia zapytań o media i zapytań o funkcje w celu tworzenia bardziej złożonych i zniuansowanych reguł stylizacji warunkowej.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

W tym przykładzie element .modal będzie miał rozmyte tło tylko wtedy, gdy szerokość ekranu wynosi co najmniej 768px oraz przeglądarka obsługuje właściwość backdrop-filter. Pozwala to na tworzenie atrakcyjnych wizualnie efektów w nowoczesnych przeglądarkach, unikając jednocześnie potencjalnych problemów z wydajnością lub błędów renderowania w starszych.

4. Stylizacja oparta na niestandardowych właściwościach (zmiennych CSS)

@when może być również używane w połączeniu z niestandardowymi właściwościami CSS (znanymi również jako zmienne CSS) do tworzenia dynamicznej i opartej na stanie stylizacji. Możesz użyć JavaScriptu do aktualizacji wartości niestandardowej właściwości, a następnie użyć @when do zastosowania różnych stylów w oparciu o tę wartość.

Najpierw zdefiniuj niestandardową właściwość:

:root {
  --theme-color: #007bff; /* Domyślny kolor motywu */
  --is-dark-mode: false;
}

Następnie użyj @when, aby zastosować style na podstawie wartości niestandardowej właściwości:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

Na koniec użyj JavaScriptu, aby przełączyć wartość niestandardowej właściwości --is-dark-mode:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

Pozwala to użytkownikom przełączać się między jasnym i ciemnym motywem, przy czym CSS dynamicznie aktualizuje się w oparciu o wartość niestandardowej właściwości. Należy pamiętać, że bezpośrednie porównywanie zmiennych CSS w @when może nie być powszechnie obsługiwane we wszystkich przeglądarkach. Zamiast tego może być konieczne użycie obejścia z zapytaniem o media sprawdzającym wartość niezerową: 

@when ( --is-dark-mode > 0 ) { ... }

Jednakże, upewnij się, że niestandardowa właściwość ma wartość numeryczną, aby to działało poprawnie.

Uwaga dotycząca dostępności: Zapewnienie alternatywnych motywów (np. trybu ciemnego) jest kluczowe dla dostępności. Użytkownicy z upośledzeniami wzroku mogą odnieść korzyści z motywów o wysokim kontraście. Upewnij się, że przełącznik motywu jest dostępny za pomocą klawiatury i czytników ekranu.

5. Stylizacja oparta na atrybutach danych

Możesz również używać @when z atrybutami danych, aby stylizować elementy na podstawie ich wartości. Może to być przydatne do tworzenia dynamicznych interfejsów, w których elementy zmieniają wygląd w zależności od interakcji użytkownika lub aktualizacji danych.

Załóżmy na przykład, że masz listę zadań, a każde zadanie ma atrybut data-status, który wskazuje jego status (np. "todo", "in-progress", "completed"). Możesz użyć @when, aby inaczej stylizować każde zadanie w zależności od jego statusu.

[data-status="todo"] {
  /* Domyślne style dla zadań do zrobienia */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

Uwaga: wsparcie dla warunku testowego attribute() może być obecnie ograniczone lub nie w pełni zaimplementowane we wszystkich przeglądarkach. Zawsze dokładnie testuj.

Kompatybilność z przeglądarkami i polyfille

Pod koniec 2024 roku wsparcie przeglądarek dla reguły @when wciąż ewoluuje. Chociaż wiele nowoczesnych przeglądarek obsługuje podstawową funkcjonalność, niektóre starsze mogą tego nie robić. Dlatego kluczowe jest sprawdzanie tabel kompatybilności i stosowanie odpowiednich stylów zastępczych lub polyfilli tam, gdzie to konieczne.

Zawsze konsultuj źródła takie jak Can I use..., aby sprawdzić aktualny stan wsparcia przeglądarek dla @when i powiązanych funkcji.

Najlepsze praktyki używania @when

Wnioski

Reguła @when jest potężnym dodatkiem do zestawu narzędzi CSS, oferującym deweloperom bardziej elastyczny i wyrazisty sposób na warunkowe stosowanie stylów. Łącząc ją z zapytaniami o media, zapytaniami o funkcje i niestandardowymi właściwościami CSS, możesz tworzyć bardziej solidne, adaptowalne i łatwiejsze w utrzymaniu arkusze stylów. Chociaż wsparcie przeglądarek wciąż ewoluuje, @when to funkcja warta zbadania i włączenia do nowoczesnego przepływu pracy przy tworzeniu stron internetowych.

W miarę jak sieć internetowa wciąż się rozwija, opanowanie funkcji takich jak @when będzie kluczowe do tworzenia angażujących, dostępnych i wydajnych doświadczeń dla użytkowników na całym świecie. Wykorzystaj moc stylizacji warunkowej i odblokuj nowe możliwości w tworzeniu CSS.