Reguła CSSReguły @

@supports

Włącza style tylko w przeglądarkach, które obsługują daną właściwość, wartość albo selektor. Pozwala bezpiecznie korzystać z nowości.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Rodzaje warunków
Rodzaje warunków w praktyce
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.header {
  background: rgb(24 24 27 / 0.95);
}

@supports (backdrop-filter: blur(8px)) {
  .header {
    background: rgb(24 24 27 / 0.55);
    backdrop-filter: blur(8px);
  }
}

HTML przykładu

<style>
  .page { position: relative; height: 130px; overflow: hidden; border-radius: 12px; background: #0c0c10; }
  .header { position: absolute; inset: 0 0 auto; padding: 12px 16px; font-weight: 600; }
  .tiles { display: flex; gap: 10px; padding: 24px 16px; }
  .tiles .box { flex: 1; min-height: 76px; }
</style>
<div class="page">
  <div class="tiles"><div class="box">HTML</div><div class="box">CSS</div><div class="box">JS</div></div>
  <header class="header">CodeWorlds · Dokumentacja</header>
</div>

Podgląd

Pasek jest półprzezroczysty i rozmywa kafelki pod spodem tylko tam, gdzie działa backdrop-filter. Przeglądarka bez tej funkcji pokaże pasek prawie nieprzezroczysty, więc tekst i tak będzie czytelny.

Definicja i zastosowanie

Reguła @supports pyta przeglądarkę, czy rozumie dany zapis. W nawiasie podajesz deklarację, np. (display: grid), a przeglądarka sprawdza, czy zna zarówno właściwość, jak i tę wartość. Jeśli tak, style z bloku działają. Jeśli nie, cały blok zostaje pominięty.

Typowy wzorzec to stopniowe ulepszanie. Poza regułą piszesz prosty styl, który działa wszędzie, a w @supports dokładasz nowszą wersję. Odwrotny wariant, @supports not (…), zawiera plan awaryjny tylko dla przeglądarek, które danej funkcji nie znają.

Warunki łączysz słowami and i or, a każdy musi stać w osobnych nawiasach. Funkcja selector() sprawdza obsługę selektora, np. selector(:has(img)). To ważne, bo jeden nieznany selektor na liście unieważnia całą regułę, a w @supports możesz przygotować dla niego zastępstwo.

Pamiętaj, że @supports sprawdza tylko, czy przeglądarka rozpoznaje zapis, a nie czy funkcja działa bez błędów w każdym szczególe. Nie potrzebujesz go też przy każdej nowości: nieznaną deklarację przeglądarka i tak po cichu pomija. Reguła przydaje się dopiero wtedy, gdy od obsługi zależą inne style.

Składnia

@supports (<właściwość>: <wartość>) {
  selektor { właściwość: wartość; }
}

@supports not (<warunek>) { … }
@supports (<warunek>) and (<warunek>) { … }
@supports (<warunek>) or (<warunek>) { … }
@supports selector(<selektor>) { … }

Rodzaje warunków

(display: grid)
właściwość i wartość
Każda współczesna przeglądarka zna siatkę, więc blok działa i kafelki stają w trzech kolumnach. Bez niego zostałyby jeden pod drugim.
not (display: grid)
brak obsługi
Blok działa tylko tam, gdzie siatki brak, czyli w bardzo starych przeglądarkach. Tutaj się nie włącza, więc kafelki zostają jeden pod drugim, jak w stylu bazowym.
selector(:has(*))
obsługę selektora
Sprawdza selektor zamiast deklaracji. Najedź kursorem na kafelek: pozostałe przygasają. Reguła z :has() działa tylko w przeglądarkach, które ten selektor znają.
(…) and (…)
oba warunki naraz
Blok działa tylko wtedy, gdy przeglądarka obsługuje siatkę i aspect-ratio. Kafelki stają w rzędzie i robią się kwadratowe.
(…) or (…)
co najmniej jeden warunek
Wystarczy jeden spełniony warunek. Tak sprawdza się właściwości z przedrostkiem: szkło rozmywa kafelki pod spodem, jeśli przeglądarka zna backdrop-filter w którejkolwiek wersji.

Warunek	Sprawdza	Opis
(display: grid)	właściwość i wartość	Każda współczesna przeglądarka zna siatkę, więc blok działa i kafelki stają w trzech kolumnach. Bez niego zostałyby jeden pod drugim.
not (display: grid)	brak obsługi	Blok działa tylko tam, gdzie siatki brak, czyli w bardzo starych przeglądarkach. Tutaj się nie włącza, więc kafelki zostają jeden pod drugim, jak w stylu bazowym.
selector(:has(*))	obsługę selektora	Sprawdza selektor zamiast deklaracji. Najedź kursorem na kafelek: pozostałe przygasają. Reguła z `:has()` działa tylko w przeglądarkach, które ten selektor znają.
(…) and (…)	oba warunki naraz	Blok działa tylko wtedy, gdy przeglądarka obsługuje siatkę i `aspect-ratio`. Kafelki stają w rzędzie i robią się kwadratowe.
(…) or (…)	co najmniej jeden warunek	Wystarczy jeden spełniony warunek. Tak sprawdza się właściwości z przedrostkiem: szkło rozmywa kafelki pod spodem, jeśli przeglądarka zna `backdrop-filter` w którejkolwiek wersji.

Rodzaje warunków w praktyce

(display: grid)

Każda współczesna przeglądarka zna siatkę, więc blok działa i kafelki stają w trzech kolumnach. Bez niego zostałyby jeden pod drugim.

@supports (display: grid) {
  .demo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

not (display: grid)

Blok działa tylko tam, gdzie siatki brak, czyli w bardzo starych przeglądarkach. Tutaj się nie włącza, więc kafelki zostają jeden pod drugim, jak w stylu bazowym.

@supports not (display: grid) {
  .demo { flex-direction: row; }
}

selector(:has(*))

Sprawdza selektor zamiast deklaracji. Najedź kursorem na kafelek: pozostałe przygasają. Reguła z :has() działa tylko w przeglądarkach, które ten selektor znają.

@supports selector(:has(*)) {
  .demo:has(.box:hover) .box:not(:hover) {
    opacity: 0.3;
  }
}

(…) and (…)

Blok działa tylko wtedy, gdy przeglądarka obsługuje siatkę i aspect-ratio. Kafelki stają w rzędzie i robią się kwadratowe.

@supports (display: grid) and (aspect-ratio: 1) {
  .demo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .demo .box { aspect-ratio: 1; }
}

(…) or (…)

Wystarczy jeden spełniony warunek. Tak sprawdza się właściwości z przedrostkiem: szkło rozmywa kafelki pod spodem, jeśli przeglądarka zna backdrop-filter w którejkolwiek wersji.

@supports (backdrop-filter: blur(6px))
  or (-webkit-backdrop-filter: blur(6px)) {
  .glass {
    background: rgb(255 255 255 / 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

Więcej przykładów

Zapytania o kontener z planem awaryjnym

CSS

.card {
  display: grid;
  gap: 10px;
}

@supports (container-type: inline-size) {
  .slot {
    container-type: inline-size;
  }

  @container (width >= 300px) {
    .card {
      grid-template-columns: 80px 1fr;
      align-items: center;
    }
  }
}

HTML przykładu

<style>
  .card { padding: 10px; border: 1px solid #27272a; border-radius: 12px; background: #18181b; }
  .thumb { height: 56px; border-radius: 8px; background: linear-gradient(135deg, #10b981, #0ea5e9); }
  .card p { margin: 2px 0 0; color: #a1a1aa; font-size: 13px; }
</style>
<div class="slot">
  <article class="card"><div class="thumb"></div><div><strong>Siatka CSS</strong><p>Moduł 8 · 10 lekcji</p></div></article>
</div>

Podgląd

Obsługę zapytań o kontener najprościej sprawdzić przez właściwość container-type, która pojawiła się razem z nimi. Przeglądarka bez tej funkcji pokaże po prostu kartę pionową.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Styl bazowy pisz poza regułą, a w @supports tylko to, co wymaga nowej funkcji. Starsza przeglądarka dostanie prostszy, ale działający wygląd.
Obsługę reguły @ sprawdzisz przez właściwość, która przyszła razem z nią, np. @supports (container-type: inline-size) przed użyciem @container.
Przy właściwościach z przedrostkiem sprawdzaj obie wersje przez or, np. (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)).

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs