Warunki CSS za pomocą nowej funkcji if()

Una Kravets

Data publikacji: 1 lipca 2025 r.

Od Chrome 137 możesz wypróbować warunki wbudowane CSS za pomocą funkcji if(). if() zapewnia przejrzystszy interfejs programisty w przypadku dynamicznych stylów, takich jak zapytania o style i zapytania o media, z kilkoma kluczowymi różnicami, o których możesz przeczytać w tym poście.

Funkcja CSS if() działa na podstawie serii par warunek–wartość, które są ustrukturyzowane w ten sposób:

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

Możesz podać else instrukcję, która będzie używana, jeśli żaden z pozostałych warunków nie zostanie spełniony:

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ługuje zapytania

Przyjrzyjmy się temu na kilku przykładach:

Prezentacja: zapytania o multimedia w tekście

Używanie if() to świetny sposób na uwzględnienie w stylach wbudowanych zapytań o media. Możesz na przykład sprawdzić preferencje użytkownika dotyczące motywu (jasny lub ciemny) lub wykonać wbudowane zapytania o media dotyczące szerokości obszaru wyświetlania. Poniżej znajduje się przykład zapytania o multimedia dotyczącego urządzeń wskazujących. Domyślny rozmiar przycisku to 30 pikseli na urządzeniu z precyzyjnym wskaźnikiem, np. myszką. W przypadku urządzeń z ekranem dotykowym, np. z grubym wskaźnikiem, rozmiar przycisku to co najmniej 44 piksele, aby zapewnić odpowiednie odstępy między elementami i ułatwić dostęp.

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

Powyższy kod daje taki sam wynik jak to zapytanie o media:

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

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

Użycie formatu if() pozwala umieścić logikę w kodzie bez konieczności umieszczania logiki stylów w dwóch różnych miejscach.

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

Innym sposobem użycia if() jest tworzenie zapytań do pomocy w tekście. Aby na przykład sprawdzić obsługę szerokiej gamy kolorów, np. OKLCH, możesz użyć tego kodu:

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ń kolorów oklch, użytkownik zobaczy bardziej żywy kolor i otrzyma komunikat „Twoja przeglądarka obsługuje OKLCH” w pseudo treści ::after.

Więcej informacji i różnice między RGB a bardziej zaawansowanymi przestrzeniami kolorów znajdziesz w selektorze kolorów i materiałach na stronie oklch.com.

Prezentacja: wizualizacja stanu interfejsu

Możesz też użyć if() do stylizacji opartej na stanie. Na przykład możesz dostosować styl kart postępu na podstawie ich stanu w interfejsie (oczekujący lub ukończony). Przechowuj stan bezpośrednio w atrybucie danych lub we właściwości niestandardowej, a następnie zastosuj style w wierszu do 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);
}

Za pomocą funkcji style() w funkcji if() możesz bezpośrednio określać styl elementu, na który kierujesz reklamy. Nie musisz używać elementu nadrzędnego, jak w przypadku zapytań o style CSS.

Ta wersja demonstracyjna pokazuje podstawowy przypadek użycia if() do obsługi nowego podejścia do architektury CSS. Jedną z zalet używania niestandardowych właściwości CSS zamiast klas jest łatwość ich aktualizacji w CSS. Można je na przykład aktualizować za pomocą zapytań o media lub pseudostanów, takich jak :hover.

Co dalej?

Dodanie if() otwiera przed deweloperami usług porównywania cen nowe możliwości w zakresie architektury. Wraz z rozwojem technologii takich jak zapytania o style zapytania zakresowe prawdopodobnie będą możliwe w ramach if() funkcji, a także przydatne w połączeniu z proponowanymi funkcjami niestandardowymi (CSS @function).

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

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