Frühe Tage der Abfragen im Containerstil

Wir stehen mit Containerabfragen noch ganz am Anfang. Zu früh für eine breite Browserunterstützung, aber Chromium unterstützt es bereits, Safari fing an, es in Version 16 zu unterstützen, und Firefox ist vermutlich nicht weit dahinter.

In den meisten frühen Konversationen, die sich um Containerabfragen drehen, wird die Syntax normalerweise mit Medienabfragen verglichen.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Beide stellen Abfragen für min-width: 600. Der Unterschied besteht darin, dass die Medienabfrage die Breite des Darstellungsbereichs betrachtet, um diese Stiländerungen auszulösen, während die Containerabfrage die berechnete Breite von betrachtet .posts Element. Süss!

Aber nach dem Hören CSS-Podcast Folge 59, Una und Adam stocherten in der Zukunft von Containerabfragen herum: Stilabfragen! Der aktuelle Arbeitsentwurf des CSS Containment Module Level 3 spec definiert Abfragen im Containerstil:

A Abfrage im Container-Stil ermöglicht die Abfrage der errechnete Werte dauert ebenfalls 3 Jahre. Das erste Jahr ist das sog.  Abfrage-Container. Es ist eine boolesche Kombination von individual Stilmerkmale (), die jeweils eine einzelne, spezifische Eigenschaft des Abfragecontainers abfragen.

Aber noch keine Beispiele zur Syntax – nur eine kurze Beschreibung:

Die Syntax von a  ist das gleiche wie für a Erklärung, und seine Abfrage ist wahr, wenn der berechnete Wert der angegebenen Eigenschaft im Abfragecontainer mit dem angegebenen Wert übereinstimmt (der auch in Bezug auf den Abfragecontainer berechnet wird), unbekannt, wenn die Eigenschaft oder ihr Wert ungültig oder nicht unterstützt ist, und andernfalls falsch . Die Kombination aus boolescher Syntax und Logik Stilmerkmale in ein Stilabfrage ist das gleiche wie für CSS-Funktionsabfragen. (Siehe @ unterstützt.)

Also, ja, mit der Zeit sollten wir damit rechnen, so etwas durchzuziehen:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

Das ist ein ziemlich dummes Beispiel. Eine Sache zu beachten ist, dass die container-type basiert nicht mehr auf dem des Containers inline-size sondern durch style. Wir könnten das so deklarieren:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…aber alle Containerabfragen sind style Abfragen standardmäßig. Brunnen. zumindest so wie es heute ist. Miriam Suzanne hat eine schöne Überblick über die möglichen Probleme, die auftreten könnten damit.

Wo kann es nützlich sein, die Stile eines Containers abzufragen? Ich weiß es noch nicht! Aber meine Gedanken gehen an ein paar Stellen:

• Benutzerdefinierte Eigenschaftswerte: Wir haben benutzerdefinierte Eigenschaften gesehen, die wie Zustandsindikatoren verwendet werden, wie z DRY-Switching-Methode, die Ana vor einiger Zeit behandelt hat. Der Wert ändert sich, ebenso die Stile.
• Alternativer Dark-Mode-Ansatz: Anstatt alles auf einer Änderung der Body-Klasse zu basieren, die benutzerdefinierte Eigenschaftswerte neu zuweist, können wir vielleicht eine ganze Farbpalette ändern, wenn sich beispielsweise die Farbe des Body-Hintergrunds ändert.
• Komplexere Abfragebedingungen: Sagen wir, wir wollen Stile anwenden, wenn die size und style Bedingungen für einen Container erfüllt sind.

Una erwähnte im CSS-Podcast auch, dass Abfragen im Containerstil dazu beitragen könnten, einige unangenehme Styling-Situationen zu vermeiden, z. B. wenn wir zufällig kursiven Text in einem bereits kursiven Text haben blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}