Anfragen im Containerstil

Containeranfragen stehen noch in den Kinderschuhen und fehlen weit verbreitete Browserunterstützung. Während Chromium sie bereits unterstützt, begann die Unterstützung von Safari mit Version 16 und die Implementierung von Firefox wird in Kürze erwartet.

Frühe Diskussionen ziehen häufig Parallelen zwischen Containerabfrage und Medienabfrage -Syntax. Betrachten Sie diese Beispiele:

<code>/* 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;
  }
}</code>

<code>/* 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;
  }
}</code>

Beide Beispiele zielen auf min-width: 600px. Die Medienabfrage reagiert jedoch auf die Ansichtsfensterbreite, während die Containerabfrage auf die berechnete Breite des .posts -Elements reagiert.

Aufbauend in diesem CSS Containment Modul Level 3 Spec führt die Abfragen im Containerstil ein und ermöglicht Abfragen der berechneten Styles des Containers. Die Spezifikation beschreibt sie als Boolesche Kombinationen von Funktionen individueller Stilfunktionen, die jeweils eine bestimmte Eigenschaft abfragen. Die Syntax, die CSS -Deklarationen spiegeln, bewertet true, wenn der berechnete Eigenschaftswert mit dem angegebenen Wert übereinstimmt (auch in Bezug auf den Container berechnet), unbekannt, wenn sie ungültig oder nicht unterstützt und sonst falsch falsch sind. Die Boolesche Logik ähnelt den Abfragen der CSS -Funktion (). @supports

Ein hypothetisches Beispiel:

<code>.posts {
  container-name: posts;
}

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

Beachten Sie, dass

(oder seine Abwesenheit) impliziert ist; Alle Containerabfragen werden standardmäßig (derzeit) zu Stilabfragen. Die Arbeit von Miriam Suzannes zeigt potenzielle Herausforderungen mit diesem Ansatz. container-type: style

Die praktischen Anwendungen von Abfragebehälterstilen sind immer noch auftauchen. Zu den potenziellen Verwendungen gehören jedoch:

• benutzerdefinierte Eigenschaftswerte: auf Änderungen der benutzerdefinierten Eigenschaften reagieren, die als Zustandsindikatoren verwendet werden.
• Implementierung des Dunklen Modus: Farbpaletten schalten basierend auf Änderungen des Körperhintergrunds.
• Komplexe Abfragebedingungen: Kombination von Größe und Stilbedingungen.

Container -Stil -Abfragen können sich auch mit Komplexitäten des Stylings befassen, wie z.

Das obige ist der detaillierte Inhalt vonAnfragen im Containerstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!