Eine Einführung in Containeranfragen in CSS

CSS Container Abfragen: repolutioniert reaktionsschnelles Design

Dieser Auszug aus entfaltet die Leistung von CSS das transformative Potenzial von Containerabfragen bei der Erstellung anpassungsfähiger und belastbarer Webkomponenten. Im Gegensatz zu Ansichtsfenster-Medienabfragen, die auf die gesamte Browser-Fenstergröße reagieren, ermöglichen Containerabfragen das Styling basierend auf dem verfügbaren Speicherplatz , um die Reaktionsfähigkeit auf Komponentenebene zu ermöglichen.

Containerabfragen vs. Ansichtsfenster Medienabfragen

traditionelles Responsive-Design von Ansichtsfenster basiert auf Haltepunkten, die an vereinfachte Gerätegrößen (Mobile, Tablet, Desktop) gebunden sind und häufig mit einem Layout-Raster gekoppelt sind. Dieser Ansatz kämpft mit der Anpassungsfähigkeit der individuellen Komponenten. Größere Elemente können sich getrennt anpassen, folgen jedoch im Allgemeinen den globalen Haltepunkten.

Containeranfragen bieten eine überlegene Lösung. Das folgende Bild zeigt eine Kartenkomponente mit Containerabfragen, die völlig unabhängig von der Ansichtsfenstergröße ist. Das Erscheinungsbild der Karte passt sich dynamisch an seinen verfügbaren Raum an.

Hinweis: Die Unterstützung von Containerabfragen aus breit

Definieren von Containerabfragen

Deklarieren Sie zuerst ein Element als Container mit der Eigenschaft

, um Containerabfragen zu verwenden.

(entspricht der Breite in horizontalen Schreibmodi) ist der häufigste und am häufigsten unterstützte Wert: container-type inline-size

Verwenden Sie als nächstes das

.container {
  container-type: inline-size;
}

AT-RULE, um die Abfrage zu definieren. Das folgende Beispiel legt die

Farbe auf blau fest, wenn sein Behälter 40Ch breit oder größer ist: @container h2

Verwenden Sie für die breitere Kompatibilität über Schreibmodi logische Eigenschaften:

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

jenseits

@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}

umfassen Optionen

und inline-size. Weitere Informationen finden Sie in der offiziellen Spezifikation. block-size aspect-ratio

Aktualisieren einer Kartenkomponente: Ein praktisches Beispiel

ohne Containeranfragen würden Kartenvariationen in der Regel Modifikatorklassen mit Ansichtsfenster -Haltepunkten beinhalten. Das Bild unten zeigt drei Kartengrößen und deren entsprechende Klassen.

[Codepen Demo: Ansichtsfenster Medienanfrageberechnung] (Link zu CodePen)

Verwenden von Containerabfragen behalten wir einen Standardkartenstil (für nicht unterstützte Browser) und definieren zusätzliche Stile basierend auf der Containerbreite:

• 350px oder größer: Horizontales Layout
• 600px oder höher: Bild als Hintergrund

[CodePen Demo: Containerabfragen für Karten] (Link zu CodePen)

Dieser Auszug stammt aus , um die Leistung von CSS zu entfesseln: Erweiterte Techniken für reaktionsschnelle Benutzeroberflächen , verfügbar auf SitePoint Premium.

Key Takeaways:

• Containerabfragen bieten die Reaktionsfähigkeit auf Komponentenebene.
• Sie werden mit container-type und @container.
definiert
• logische Eigenschaften verbessern die Kompatibilität des Cross-Writing-Modus.
• Sie bieten einen flexibleren und detaillierteren Ansatz für reaktionsschnelles Design als Ansichtsfenster -Medienabfragen.

(Hinweis: Ersetzen Sie "Link zu CodePen" durch tatsächliche Codepen -Links, falls verfügbar.)

Das obige ist der detaillierte Inhalt vonEine Einführung in Containeranfragen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!