CSS-Containerabfragen prüfen und debuggen

Sofia Emelianova

GitHub

Jecelyn Yeen

Twitter GitHub Startseite

In diesem Leitfaden erfahren Sie, wie Sie CSS-Containerabfragen im Bereich Elemente der Chrome-Entwicklertools untersuchen und debuggen.

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

Die Screenshots in diesem Leitfaden stammen von dieser Demoseite.

Container und ihre Nachfolger ermitteln

Neben jedem als Abfragecontainer definierten Element wird im Steuerfeld Elemente das Badge container angezeigt. Über das Badge wird zwischen einem Overlay mit gestrichelten Linien des Containers und seiner untergeordneten Elemente gewechselt.

So blenden Sie die Überlagerung ein:

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

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

Containerabfragen prüfen

Im Bereich Elemente werden @container-Abfragedeklarationen angezeigt, wenn sie auf ein untergeordnetes Element angewendet werden, der Container die Bedingung der Abfrage erfüllt.

Das folgende Codebeispiel zeigt, 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 in diesem Beispiel die Breite des Containers die folgende Anzahl von Pixeln überschreitet, werden die entsprechenden Stile angewendet:

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

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

1. Legen Sie im Steuerfeld Elemente 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. Sehen Sie sich @container-Deklarationen an, die ein horizontales Layout implementieren.

   

Containerelemente suchen

Wenn Sie ein Containerelement finden und auswählen möchten, das die Abfrage ausgelöst hat, bewegen Sie den Mauszeiger auf den Elementnamen über der @container-Deklaration und klicken Sie darauf.

Wenn Sie die Maus darüber bewegen, wird der Name in einen Link zum Element im Steuerfeld Elemente umgewandelt. Im Bereich Stile werden die abgefragte Eigenschaft und ihr aktueller Wert angezeigt.

Containerabfragen ändern

Wenn Sie Fehler in einer Abfrage beheben möchten, 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 beträgt die Breite des Containers 500px. Das Absatzelement (p) wird auf der Seite angezeigt.

1. Wählen Sie das Element p aus. Im Bereich Styles: Die Deklaration @container (inline-size > 400px) wird angezeigt.
2. Ändern Sie inline-size von 400px in 520px.
3. Das Absatzelement (p) verschwindet von der Seite, weil es die Abfragekriterien nicht erfüllt.