Container Queries

Contanier Queries sind relativ neu (seit 2023 gut unterstützt) und ähnlich wie Media Queries.

Während Media Queries sich auf die Fensterbreite bezieht, fragen Container Queries die Breite des beinhaltenden Containers ab.

Deklaration

Nehmen wir eine Navigation an:

<nav>
  <ul>
    <li><a href="page-1.html">Menu 1</a></li>
    <li><a href="page-2.html">Menu 2</a></li>
    <li><a href="page-3.html">Menu 3</a></li>
  </ul>
</nav>

Es gibt anonyme Container:

/* Anonymen Container deklarieren */
nav {
  container-type: inline-size;
}
/* Default: Mobile first = Vertikale Anordnung */
nav ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Container query */
@container (width >= 800px) {
  /* Desktop: Horizontale Anordnung */
  nav ul {
    flex-direction: row;
  }
}

Container sollten einen Namen haben, falls es mehrere verschachtelte gibt:

/* Benannter Container deklarieren */
nav {
  container-type: inline-size;
  container-name: navigation; /* Beliebiger Name */
  /* Oder in 1 Zeile: */
  container: navigation / inline-size;
}
/* Default: Mobile first = Vertikale Anordnung */
nav ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Container mit Namen */
@container navigation (width >= 800px) {
  nav ul {
    flex-direction: row;
  }
}

🛠️ Aufgabe

Wende die Container Queries auf deine Navigation auf "Über mich" an:

• "Mobile first" heisst, dass die Standard-Anordnung der Menülinks vertikal (übereinander) ist.

• Entscheide, ab welcher Containerbreite auf horizontale Anordnung umgeschaltet werden soll.