Responsive Design 2.0: Container Queries

Container Queries sind eine noch relative neue Möglichkeit beim Stylen von Responsive Webseiten vorzugehen. Bei Media Queries sind wir nach der Mediengröße vorgegangen, um ein entsprechendes Styling für verschiedene Größen zu erstellen. Die größte Problematik dabei war immer, wenn wir eine Box gestaltet haben, die wir auf verschiedenen Größen benötigt haben, auch wenn diese vom Styling ähnlich war, mussten wir immer eine komplette Seite Responsive gestalten. Haben wir die Komponente (die Box) an einer anderen Stellen verwendet, mussten wir wieder einiges neu gestalten, genauer gesagt die CSS Regeln neu definieren. Mit Systemen wie Vue.js, Svelt, Angular 2 und React wurde immer mehr in sogenannten Komponenten gedacht und immer weniger in kompletten Seiten, umso schwieriger wurde es globale Styles für eine Seite zu definieren. All diese Frameworks haben sogenannte Scoped Styles implementiert, um das Styling von Komponenten zu vereinfachen.

Daraus resultierend war eigentlich immer der nächste sinvolle Schritt eine einfachen weg bereitzustellen Styles responsiv innerhalb einer Komponente zu definieren. Wir haben etwa eine Box für ein Produkt, um diese darzustellen. In einem Szenario wollen wir 3 untereinander in der Sidebar von 200px breite darstellen und in einem anderen 3 Stück nebeneinander auf 1200px breite. Dieser Platz kann sehr unterschiedlich genutzt werden. Um diese nun effizent zu erledigen wäre es am sinnvollsten die Komponente in sich geschlossen Responsive zu gestalten, um sie immer wieder verwenden zu können. Ohne jeweilige Anpassungen an die Geräte größe machen zu müssen, allein dadurch das wir Einzelende Komponenten z. B. von einer Breite von 200px bis 1200px Breite gestalteten. Wissen wir immer, wenn wir sie in einer Größe dazwischen verwenden, dass sie funktionieren wird, ohne sie noch mal in verschiedenen Gerätebreiten durchtesten zu müssen – wie bei den Media Queries.

Etwa der folgende Aufbau besteht aus denselben Klassen und Elementen und nur durch den Container Query wurde das Design verändert.

Durch dieses kleinteilige Denken in Komponenten, die in sich geschlossen funktionieren, können größere Bereiche einer Webseite schnell zusammengesetzt werden. Ich denke, es sollte hier aber auch etwas differenziert werden, ob man eine kleine Portfolioseite umsetzt oder ein Shop System mit 1000 unterschiedlichen Komponenten, die häufig wieder verwendet werden. Die Portfoliowebseite wird in der Regel einmal erstellt und danach nicht häufig wieder verändert im größeren Stile. Der Onlineshop wird so viele Änderungen erfahren und kann so viele verschiedenen Seiten Templates haben, dass es einfacher ist, mit Container Queries zu arbeiten.

Daraus resultierend solltest du gut nachdenken, ob es für dich wirklich das richtig ist. Denn mit Container Queries bringst du sicherlich eine komplexere Ebene noch einmal in deine Webseite/Anwendung.

Der Browser Support ist schon recht gut, dennoch kann ich empfehlen, wenn ihr noch ältere Browser von vor 2–3 Jahren unterstützten wollt und auch einige Mobile Browser unterstützen Container Queries noch nicht 100 % kann es sich lohnen, ein sogenannten Polyfill einzusetzen.

Anwendung von Container Queries

Die größten Unterschiede zwischen Media Queries und Container Queries ergeben sich daraus, dass Container Queries Elementen Größen bezogen sind und Media Queries sich auf den Viewport beziehen. Bei Container Queries müssen wir also definieren, welches Element unser Container ist. Dafür haben wir zwei Eigenschaften als Möglichkeit zur Definition container-type

und container-name wobei wir den Container Namen nur dann benötigen, wenn wir mehren, Container verschachtelt nutzen wollen und ein inneres Element soll sich nicht auf den nächsten Elterncontainer beziehen, sondern auf einen, der weiter außen liegt.

container-type: inline-size
container-name: header

Zusätzlich gibt es noch den Shorthand der die Type Property mit der Namen Property kombiniert.

container: header / inline-size

Die folgenden Eigenschaften gibt es für den container-type :

• size: Der Query basiert auf den inline und block Dimensionen des Containers.
• inline-size: Der Query basiert nur auf den inline Dimensionen des Containers.
• normal: Das Element wird nicht als Query-Container für Größenabfragen verwendet, bleibt aber ein Query-Container für Style-Queries.

In der Regel verwendet man immer den inline-size Typen, da der size Type nicht die höhe des inneren Elements verwendet.

Der HTML-Aufbau für einen Container

Der Aufbau für einen Container könnte zum Beispiel wie folgt aussehen, wir haben ein äußerer Container, der die Größe vorgibt. Und dort drinnen haben wir die Eigenschaften unseres Teasers. In diesem Fall hat die Class Container nur die inline-size Eigenschaft, in den meisten Fällen kommt man mit einer globalen Klasse für den Container aus. Und der jeweilige Teaser wird dann nur noch innerhalb des Container Queries gestylte.

<div class="container">
  <div class="product">
          <img src="https://hellocoding.de/assets/placeholder/pic-8.jpg">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
     </div>
</div>

Der Container Query

Der Container Query verhält sich komplett ähnlich wie der Media Query, mit dem Unterschied das noch ein Name angegeben werden kann, ist aber nur notwendig wenn ihr auch die Eigenschaft container-name verwendet habt. Ansonst gibt es keine größeren Veränderungen. In dem Beispiel habe ich noch die neue Syntax für die Größe vergleich verwendet. Alternative kannst du auch mit min-width: 700px arbeiten.

@container platzhalterName (width > 700px) {
  .product{
    background: #2f2f2f;
    flex-direction: row;
  }

  .product p{
    color: white;
    font-size: 18px;
    line-height: 1.5em;
    padding: 0px;
    margin-right: 16px;
  }

  .product img{
    display: block;
    height: 100%;
    width: 300px;
  }
}

Container Size – Größen, Eigenschaften

Zusätzlich gibt es noch neue Größen Eigenschaften für Container, allerdings kann ich euch nicht empfehlen diese bereits zu verwenden, da der Support auch mit Polyfill noch nicht gut gewährleistet ist zum aktuellen Zeitpunkt (August, 2023).

Beispiel

Fazit

Für kleinere Projekte wird es sich wahrscheinlich zukünftig noch nicht lohnen, mit Container Queries zu arbeiten, für größere Projekte sehe ich in Container Queries ein großes Potenzial, um die Arbeit zu erleichtern. Gerade im Zusammenhang mit JS Frameworks wie Vue.js, Svelt, Angular 2 und React denke ich, dass Container Queries ein großes Potenzial haben.

Natürlich darf man auch die Nachteile nicht aus den Augen verlieren, Entwickler, die bereits viel mit Media Queries arbeiten, kann die Umgewöhnung und das Denken in Komponenten schwerfallen. Das Wichtigste ist, dranzubleiben und immer wieder daran zu arbeiten, das Konzept entsprechend umzusetzen und dafür braucht es auch kein JS Framework.

Nicht immer ist der Container Query die Lösung und es sollte auch dran gedacht werden, dass die Komplexität steigt und auch mehr Ressourcen im Browser für das Rendering benötigt werden als bei Media Queries. In den meisten modernen Browsern sollte das sich aber im Maßen halten und keine nennenswerte Auswirkung haben.