Warunki CSS za pomocą nowej funkcji if()

Una Kravets

Data publikacji: 1 lipca 2025 r.

Od wersji 137 przeglądarki Chrome możesz wypróbować warunki wstawiane w kodzie CSS za pomocą funkcji if(). if() zapewnia czystszy interfejs dla programistów, który umożliwia stosowanie dynamicznych stylów, takich jak zapytania o styl i zapytania o multimedia. W tym poście znajdziesz informacje o głównych różnicach.

Funkcja CSS if() działa na podstawie serii par warunek–wartość, które mają następującą strukturę:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

Możesz podać instrukcję else, która jest używana, gdy nie jest spełniony żaden z innych warunków:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

Obecnie if() obsługuje 3 rodzaje zapytań:

• style(): zapytania dotyczące stylu
• media(): zapytania o multimedia
• supports(): obsługa zapytań

Oto kilka przykładów:

Prezentacja: zapytania o multimedia w tekście

Użycie if() to świetny sposób na umieszczanie w stylach zapytań dotyczących multimediów. Możesz na przykład sprawdzić preferencje użytkownika dotyczące motywu (jasny lub ciemny) lub użyć zapytań medialnych wbudowanych w szerokość widoku. Ten przykład pokazuje zapytanie o media dotyczące urządzeń wskazujących. Domyślny rozmiar przycisku to 30 pikseli na urządzeniu z precyzyjnym wskaźnikiem, takim jak mysz, ale w przypadku urządzeń z ekranem dotykowym, np. z grubym wskaźnikiem, rozmiar przycisku powinien wynosić co najmniej zalecane 44 piksele, aby zapewnić odpowiedni odstęp między punktami dotykowymi i ułatwić dostęp.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

Powyższy kod daje ten sam wynik co zapytanie o media:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

Korzystanie z formatu if() pozwala na umieszczenie logiki w kodze HTML, bez konieczności umieszczania logiki stylów w 2 miejscach.

Prezentacja: zapytania do zespołu pomocy w tekście

Innym sposobem korzystania z if() jest tworzenie zapytań do zespołu pomocy w ramach wiadomości. Aby na przykład sprawdzić obsługę kolorów o szerokim zakresie, takich jak OKLCH, możesz użyć:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Jeśli przeglądarka obsługuje przestrzeń barw oklch, użytkownik zobaczy bardziej żywe kolory i zobaczy komunikat „Twoja przeglądarka obsługuje OKLCH” w pseudotreści ::after.

Aby dowiedzieć się więcej i zobaczyć różnicę między przestrzenią kolorów RGB a bardziej zaawansowanymi przestrzeniami kolorów, skorzystaj z selektora kolorów i zasobów na stronie oklch.com.

Prezentacja: wizualizacja stanu interfejsu

Do stylizacji opartej na stanie możesz też użyć atrybutu if(). Na przykład stylizacja kart postępu na podstawie stanu interfejsu (oczekujące lub ukończone). Przechowuj stan w atrybucie danych lub bezpośrednio w właściwości niestandardowej, a następnie zastosuj style wbudowane w tej właściwości za pomocą if().

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

Dzięki funkcji style() wewnątrz funkcji if() możesz bezpośrednio nadawać styl elementom, które kierujesz, bez konieczności korzystania z elementu nadrzędnego, jak to ma miejsce w przypadku zapytań o styl CSS.

To demo pokazuje podstawowy sposób używania if() do obsługi nowego podejścia do architektury CSS. Jedną z zalet korzystania z właściwości niestandardowych w CSS zamiast klas jest łatwość ich aktualizowania w CSS. Mogą one na przykład być aktualizowane za pomocą zapytań o multimedia lub pseudostanów, takich jak :hover.

Co dalej?

Dodanie if() daje deweloperom CSS nowe możliwości w zakresie architektury. Wraz z rozwojem technologii takich jak zapytania dotyczące stylu zapytania dotyczące zakresu będą prawdopodobnie możliwe w ramach funkcji if(). Będą też przydatne w połączeniu z nadchodzącą propozycją funkcji niestandardowych (CSS @function).

Więcej informacji o tych funkcjach znajdziesz w tych artykułach:

• 3-minutowy film z prezentacją wersji demonstracyjnej 3
• Artykuł autorstwa Lea Verou