Lädt...

CSS Feature Queries (@supports)

Container Queries fragen, wie breit ein Eltern ist. Media Queries fragen nach dem Viewport. Feature Queries stellen eine ganz andere Frage: Versteht dieser Browser dieses CSS? Mit @supports lieferst du eine stabile Basis und schaltest modernes Layout oder Selektoren nur dort frei, wo sie funktionieren.

Progressive Enhancement, kein Glücksspiel

Eine Feature Query ist ein Fähigkeits-Tor. Alte Styles löschst du nicht — du behältst ein Layout, das überall funktioniert, und legst eine reichere Schicht in @supports, wenn die Engine das Feature parsen kann (zum Beispiel display: grid oder gap bei Flex).

Basis-@supports

Die übliche Form testet ein Eigenschaft–Wert-Paar. Kann der Browser diese Deklaration, greifen die verschachtelten Regeln:

Unlock Grid only when Grid is understood

css 
.card-list {
display: block;
}

.card-list .card {
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: #fff;
}

@supports (display: grid) {
.card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}

.card-list .card {
margin-bottom: 0;
}
}

Außerhalb des Blocks stapeln sich die Karten mit einfachem Abstand. Innerhalb von @supports (display: grid) wird dieselbe Liste zum responsiven Grid — ältere Engines behalten den Stack, moderne bekommen das Grid.

Bedingungen kombinieren: and, or, not

Du kannst mehrere Features verlangen, Alternativen zulassen oder einen Test umkehren:

and, or, and not in feature queries

css 
@supports (display: grid) and (gap: 1rem) {
.toolbar {
display: grid;
grid-auto-flow: column;
gap: 0.75rem;
align-items: center;
}
}

@supports (display: flex) or (display: grid) {
.cluster {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
}

@supports not (display: grid) {
.card-list .card {
max-width: 36rem;
}
}

and verengt das Tor (beide müssen passen). or öffnet es. not stylt den nicht unterstützten Pfad — nützlich als bewusster Fallback, solange dieser Fallback ehrlich und sichtbar bleibt.

Selektoren mit selector() prüfen

Manche Features sind Selektoren, keine Eigenschaften. Wickle sie in selector(), damit die Query fragt: „Kannst du diesen Selektor parsen?“

Gate styles that need :has()

css 
.nav a {
color: #0f172a;
text-decoration: none;
}

@supports selector(:has(*)) {
.nav:has(a:focus-visible) {
outline: 2px solid #2563eb;
outline-offset: 4px;
}

.card:has(img) .title {
font-weight: 700;
}
}

Ohne selector() ist ein nacktes :has() in @supports kein zuverlässiges Muster. Damit überspringen Browser ohne :has() nur die erweiterten Regeln und behalten die Basis-Linkstyles.

Wer stellt welche Frage?

📊 Media, container, and feature queries

Deine Frage Bevorzugt für Typisches Werkzeug
Wie breit ist der Viewport / Gerätekontext? Seitengerüst, Breakpoints @media (…)
Wie breit ist dieser Eltern um eine Komponente? Karten in ungleichen Slots @container (…) nach container-type
Unterstützt der Browser dieses CSS? Progressive Enhancement @supports (…) / selector(…)

Diese Werkzeuge stapeln sich sauber: Media für die Seite, Container für den Slot, @supports für Fähigkeit. Nutze @supports nicht als gefälschten Breakpoint und @media nicht als Feature-Check.

Zuerst Basis, dann Enhancement

Ein praktisches Muster hält gemeinsames Aussehen außerhalb des Tors und hebt das Layout innen an:

Shared skin outside; enhanced layout inside

css 
.feature-panel {
padding: 1.25rem;
border-radius: 0.75rem;
background: #f8fafc;
color: #0f172a;
}

.feature-panel .lead {
margin: 0 0 0.75rem;
font-size: 1.125rem;
line-height: 1.5;
}

.feature-panel .actions {
display: block;
}

.feature-panel .actions a {
display: inline-block;
margin: 0.25rem 0.5rem 0.25rem 0;
padding: 0.5rem 0.875rem;
border-radius: 0.5rem;
background: #e2e8f0;
color: inherit;
text-decoration: none;
}

@supports (display: flex) and (gap: 0.5rem) {
.feature-panel .actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.feature-panel .actions a {
margin: 0;
}
}

Jeder Browser bekommt Padding, Typo und tippbare Links. Flex + gap erscheinen nur, wenn beides verstanden wird — kein leeres Loch, wenn eines fehlt.

Nesting und @supports zusammen

Modern-Toolkit-Bausteine kombinieren sich. Nesting ordnet Selektoren; @supports bleibt Herr über das Fähigkeits-Tor:

Nesting inside a support block

css 
.pricing {
padding: 1rem;
border: 1px solid #e2e8f0;
}

@supports (display: grid) {
.pricing {
display: grid;
gap: 1rem;

& .tier {
padding: 1rem;
background: #fff;
}

& .tier .price {
font-size: 1.5rem;
font-weight: 700;
}
}
}

Ist Nesting selbst nicht unterstützt, behalte draußen eine flache Entsprechung oder akzeptiere die verschachtelte Form als Teil des Enhancement-Pfads — dieselbe Progressive-Enhancement-Denkweise.

Selbst ausprobieren

  1. Style eine Liste als einfachen vertikalen Stack, dann wickle ein Grid-Layout in @supports (display: grid).
  2. Verlange gap mit and, damit Flex-/Grid-Abstand nicht halb greift.
  3. Füge @supports not (display: grid) mit klarem max-width-Fallback hinzu — beide Pfade sollen absichtlich wirken.
  4. Schütze eine :has()-Regel mit @supports selector(:has(*)).
  5. Widerstehe dem Drang, alle visuellen Styles in @supports zu schieben; Markenfarbe und Typo bleiben in der Basis.

Typische Fehler

  • Das einzige brauchbare Layout nur in @supports ohne Basis — nicht unterstützte Browser sehen eine kaputte Seite
  • @supports (display) ohne Wert schreiben — Feature Queries brauchen ein Eigenschaft–Wert-Paar (oder selector(…))
  • @supports dort nutzen, wo @media hingehört (oder umgekehrt) — Fähigkeit ≠ Viewport-Breite
  • Eine Eigenschaft testen, die die Basis schon voraussetzt — nur das Enhancement toren
  • Tiefe Stapel verschachtelter @supports für kleine Gewinne — lieber eine klare Enhancement-Schicht

Kurz zusammengefasst

  • @supports toriert CSS nach Browser-Fähigkeit (Feature Queries)
  • Teste mit (property: value), kombiniere mit and / or / not, nutze selector() für Selektoren
  • Solide Basis behalten; enhancen, wenn Support da ist
  • Das Trio merken: @media → Viewport, @container → Elterngröße, @supports → Fähigkeit
  • Modern Toolkit endet hier — nächstes Modul: Accessibility & Wrap-up (accessibility)

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
6
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 67 von 72
Css Tutorial