Größenabhängiges Styling

Übersicht

Mit größenabhängigem Styling können Komponenten ihr Layout oder Erscheinungsbild basierend auf dem verfügbaren Platz ändern, anstatt auf der Größe des gesamten Bildschirms. Das ist nützlich für Komponenten wie Karten oder Navigationsleisten, die an verschiedenen Stellen eines Layouts platziert werden können (z. B. in einer schmalen Seitenleiste oder einem breiten Hauptbereich).

Die Verwendung von Containerabfragen wird empfohlen, da Komponenten dadurch wirklich modular werden. Sie müssen nicht wissen, wo die Komponente platziert wird, und keine komplexen Medienabfragen schreiben, um jedes mögliche Layout zu berücksichtigen.

Implementierung

1. Container definieren

OBLIGATORISCH: Sie müssen dem Browser zuerst mitteilen, welches Element der zu messende Container ist.

.card-container {
  /* Define the container type. Use 'inline-size' for width-based queries. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
}

2. Stile basierend auf der Containergröße anwenden

Verwenden Sie die Regel @container, um Stile anzuwenden, wenn der Container eine bestimmte Größe erreicht.

/* Default styles for small containers (stacked layout) */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card-image {
    width: 150px;
    height: 150px;
  }
}

3. Inhalte bedingt anzeigen

Sie können Containerabfragen auch verwenden, um zusätzliche Details ein- oder auszublenden, wenn mehr Platz vorhanden ist.

.card-details {
  /* Hide extra details by default in small spaces */
  display: none;
}

@container (min-width: 600px) {
  .card-details {
    /* Show details when there is plenty of room */
    display: block;
  }
}

Fallback-Strategien

Bei Browsern, die Containerabfragen nicht unterstützen, ist es am besten, ein sicheres Standardlayout (z. B. das gestapelte vertikale Layout) zu verwenden und es schrittweise mithilfe von Medienabfragen zu verbessern, wenn die allgemeine Bildschirmgröße dies zulässt.

/* Default safe stacked layout */
.card {
  display: flex;
  flex-direction: column;
}

/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
  @media (min-width: 600px) {
    .card {
      /* Reset media query fallback if needed, or let container query handle it */
      flex-direction: column;
    }
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

So erhalten Nutzer mit älteren Browsern ein nutzbares Layout, auch wenn es sich nicht perfekt an jede Containerbreite anpasst.