Container-Abfragen werden dieses langjährige Problem im Webdesign lösen, bei dem wir Designentscheidungen basierend auf der Größe eines Elements (des Containers) und nicht auf der Größe der gesamten Seite treffen möchten. Wenn ein Container also 600 Pixel breit ist, hat er vielleicht ein zeilenartiges Design, aber wenn er schmaler ist, hat er ein spaltenartiges Design, und wir werden diese Art von Kontrolle haben. Das ist viel anders als der Übergang zwischen Layouts basierend auf der Bildschirmgröße.
Dank der %-Einheit können wir einige Dinge bereits basierend auf der Größe eines Elements skalieren. Zum Beispiel sind all diese Container 50 % so breit wie ihr übergeordneter Container.
Das % hier ist 1 zu 1 mit der verwendeten Eigenschaft, also ist width ein % von width. Ebenso könnte ich % für font-size verwenden, aber es wird ein % der font-size des übergeordneten Containers sein. Es gibt nichts, das es mir ermöglicht, Eigenschaften zu kombinieren und die font-size als % der width eines Containers festzulegen.
Das heißt, es sei denn, wir bekommen Container-Einheiten! Hier ist die Tabelle der Einheiten gemäß dem Entwurf der Spezifikation
| Einheit | relativ zu |
|---|---|
qw | 1% der Breite eines Abfragecontainers |
qh | 1% der Höhe eines Abfragecontainers |
qi | 1% der Inline-Größe eines Abfragecontainers |
qb | 1% der Blockgröße eines Abfragecontainers |
qmin | Der kleinere Wert von qi oder qb |
qmax | Der größere Wert von qi oder qb |
Damit könnte ich problemlos die font-size auf einen Prozentsatz der width des übergeordneten Containers setzen. Oder line-height! Oder gap! Oder margin! Oder whatever!
Miriam merkt an, dass wir diese Einheiten derzeit in Chrome Canary ausprobieren können, solange das Flag für Container-Abfragen aktiviert ist.
🥳 Oh, und außerdem hat Chrome Canary (mit dem Container-Abfrage-Flag) jetzt Unterstützung für Query Units:https://#/GkIbLFW5C6
— Mia, on Bass (@TerribleMia) 9. September 2021
Ich bin mir nicht sicher, wann das passiert ist – bisher habe ich nur qi getestet, da das am nützlichsten ist.
Wenn ich @chriscoyier zitieren darf… "CSS kommt schnell auf dich zu"
Ich habe auch kurz damit herumgespielt. Ich werde hier einfach ein Video einfügen, da es in diesen sehr frühen Tagen einfacher zu sehen sein wird.
Und hier auch einige großartige explorative Arbeiten von Scott
Ahmad Shadeed ist ebenfalls voll dabei!
Abfrageeinheiten können uns Aufwand und Zeit sparen, wenn wir mit Dingen wie
Ahmad Shadeed, „CSS Container Query Units“font-size,paddingundmargininnerhalb einer Komponente umgehen. Anstatt die Schriftgröße manuell zu erhöhen, können wir stattdessen Abfrageeinheiten verwenden.
Vielleicht werden Container-Abfragen und Container-Einheiten gleichzeitig wirklich veröffentlicht. 🤷
Normalerweise würde man clamp mit Viewport-Breiten-vw-Einheiten verwenden. Wie macht die Verwendung von qw oder qi es besser?
Es geht nicht um einen Viewport, sondern um einen Container – einen Layout-bezogenen Elternknoten. Ansonsten gilt dieselbe Logik.
Wie werden diese mit Browser-Zooms funktionieren? Das Problem, das ich mit Viewport-Größen hatte, war, dass sie es dem Benutzer nicht erlaubten, Schriftarten mit Browser-Zoom zu skalieren. Wenn der Container hier mit vw-Größe versehen ist, werden wir wahrscheinlich dasselbe Problem haben?