CSS-Containerabfragen prüfen und debuggen

Sofia Emelianova

Jecelyn Yeen

In diesem Leitfaden erfahren Sie, wie Sie CSS-Containerabfragen im Bereich Elements der Chrome-Entwicklertools überprüfen und debuggen.

Mit CSS-Containerabfragen können Sie die Stile des Elements basierend auf den Eigenschaften des übergeordneten Containers bearbeiten. Dadurch wird das Konzept des responsiven Webdesigns von seitenbasiert auf containerbasiert umgestellt.

Die Screenshots in diesem Leitfaden stammen von dieser Demoseite.

Container und ihre Nachfolger erkennen

Neben jedem Element, das als Abfragecontainer definiert ist, wird im Bereich Elements das Logo container angezeigt. Das Logo schaltet ein gepunktetes Linien-Overlay zwischen dem Container und seinen Nachfolgern um.

So blenden Sie das Overlay ein und aus:

1. Öffnen Sie die Entwicklertools.
2. Klicken Sie im Steuerfeld Elements auf das container-Symbol neben dem als Container definierten Element.

In diesem Beispiel definiert das Attribut container-type: inline-size das Containerelement. Die Nachfolgerelemente können ihre Inline-Dimension (horizontale Achse) abfragen und ihre Stile basierend auf der Breite des Containers ändern.

Containerabfragen prüfen

Im Steuerfeld Elements werden @container-Abfragedeklarationen angezeigt, wenn sie auf ein untergeordnetes Element angewendet werden, d. h. wenn der Container die Abfragebedingung erfüllt.

Anhand des folgenden Codebeispiels können Sie nachvollziehen, wann Sie @container-Deklarationen auf dieser Demoseite prüfen können:

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

Wenn die Breite des Containers in diesem Beispiel die folgende Pixelanzahl überschreitet, werden die entsprechenden Stile angewendet:

• Mehr als 400px: Das Absatzelement (p) wird auf der Seite als Block angezeigt, beginnt auf einer neuen Zeile und nimmt die gesamte Breite ein.
• Mehr als 600px: Nachfolgerelemente verwenden ein horizontales Rasterlayout mit dem Titel (h1) oben und dem Bild (img) auf der linken Seite.

So prüfen Sie die erste @container-Deklaration:

1. Legen Sie im Steuerfeld Elements die Breite des Containers auf 500px fest. Das Element p wird angezeigt.

2. Wählen Sie das Element p aus. Im Bereich Stile sehen Sie die Deklaration @container zusammen mit einem Link zum übergeordneten Container article.card.

   

3. Legen Sie die Breite auf mehr als 600px fest und wählen Sie dann eines der betroffenen Elemente aus. Beachten Sie @container-Deklarationen, die ein horizontales Layout implementieren.

   

Containerelemente suchen

Um ein Containerelement, das die Abfrage ausgelöst hat, zu finden und auszuwählen, bewegen Sie den Mauszeiger auf den Elementnamen über der Deklaration @container und klicken Sie darauf.

Wenn Sie den Mauszeiger darauf bewegen, wird der Name zu einem Link zum Element im Steuerfeld Elements. Im Bereich Elements werden die abgefragte Eigenschaft und ihr aktueller Wert angezeigt.

Containerabfragen ändern

Zum Debuggen einer Abfrage können Sie sie wie jede andere CSS-Deklaration im Bereich Styles ändern. Eine Beschreibung hierzu finden Sie unter CSS ansehen und ändern.

In diesem Beispiel ist die Breite des Containers 500px. Das Absatzelement (p) wird auf der Seite angezeigt.

1. Wählen Sie das Element p aus. Im Bereich Stile: Hier siehst du die Erklärung zu @container (inline-size > 400px).
2. Ändern Sie inline-size von 400px in 520px.
3. Das Absatzelement (p) verschwindet von der Seite, da es die Abfragekriterien nicht erfüllt.