CSS Container Abfragen: repolutionieren reaktionsschnell design

Dieser Auszug von entfaltet die Kraft 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, können Containerfragen das Styling basierend auf der verfügbaren Space ermöglichen, um die Reaktionsfähigkeit auf wirklich Komponentenebene zu ermöglichen.

containerfragen vs. Ansichtsport Medienqueries

Traditionelles Ansichtsfenster-basiertes Responsive Design 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.

Containerfragen 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 dynamisch an seinen verfügbaren Raum an.

Hinweis: Breitbrowser -Unterstützung für Containerfragen existiert, da Firefox 110. Polyfills für ältere Browser verfügbar sind.

Definieren von Containerfragen

Um Containerabfragen zu verwenden, deklarieren Sie zunächst ein Element als Container mit der Eigenschaft Container-Typ . inline-size (entsprechend der Breite in horizontalen Schreibmodi) ist der häufigste und am häufigsten unterstützte Wert:

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

Setzen Sie als nächstes die @container AT-RULE, um die Abfrage zu definieren. Das folgende Beispiel legt die h2 Farbe auf blau fest, wenn sein Container 40Ch breit oder größer ist:

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

für eine breitere Kompatibilität über Schreibmodi hinweg logische Eigenschaften:

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

Beyond inline-size , Optionen include blocksize und Aspekt-ratio . Weitere Informationen finden Sie in der offiziellen Spezifikation.

Upgrade einer Kartenkomponente: Ein praktisches Beispiel

Ohne Containerfragen würden Kartenvariationen in der Regel Modifikatorklassen mit Ansichtsfenster -Haltepunkten beinhalten. Das Bild unten zeigt drei Kartengrößen und ihre entsprechenden Klassen.

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

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

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

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

Dieser Auszug stammt von die Macht von CSS: Erweiterte Techniken für reaktionsschnelle Benutzeroberflächen , verfügbar auf SitePoint Premium.

Key Takeaways:

• Containerfragen bieten die Reaktionsfähigkeit auf Komponentenebene an.
• Sie werden mit container-type und @container definiert.
.
• Logische Eigenschaften verbessern die Kompatibilität des Cross-Schreibmodus.
• Sie bieten einen flexibleren und detaillierteren Ansatz für reaktionsschnelles Design als Ansichtsmittel -Medienfragen.

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