SELF-Wiki: Container Queries-Tutorial - halbwegs fertig

[Matthias Scharwies]

Guten Morgen,

nachdem es immer wieder Fragen zu den Kurzübersichten in der Referenz bezüglich der neuen Containerabfragen gab, hier nun ein Tutorial mit vorerst 3 Beispielen:

CSS/Media_Queries/Container_Queries

• Der Seitentitel mag ein wenig komisch klingen - inhaltlich passt es eben zu den Medienabfragen.
• Die Grafiken zeigen, woum es geht: Es wird nicht mehr der Viewport abgefragt und dann für jedes Element je nach Position in der Seite eine eigene Deklaration womögich gar mit festen magic numbers festgelegt. Eine Festlegung für alle Gelegenheiten!

Karten

Das erste Beispiel scheint logisch: Mit resize können wir den Container umschalten und die Ansicht für die card ändert sich.

Kompizierter wird es weiter unten. Hier muss ich, wie auf dem Stammtisch schon erwähnt, wrapper-Elemente einziehen uund die klare Struktur, die ich mir in den letzten Jahren mit Grid angewöhnt habe, aufgeben.

Fazit: Das würde ich so nicht verwenden!

Hat jemand andere Beispiele / Vorschläge?

Fluide Typografie

Container-Query-Einheiten

Da hatte mich @nix mit seiner Frage nach der Berechnung der neuen cqi-Einheit angestupst.

• Innerhalb eines Containers entspricht 1cqi 1% der Container-Abmessung in Inline-Richtung (bei horizontaler Schrift: cqw; bei vertikaler Schrift: cqh)
• Wenn sie sich nicht innerhalb eines Containers befinden, verwenden sie Werte der Viewport-Abmessungen, aso hier 1vi oder 1vw.

Wofür braucht man das?

In diesem Beispiel wächst die Schriftgröße mit, so dass die Überschrift immer den verfügbaren Raum einimmt. Das finde ich cool!

Bitte kommentiert oder - noch besser - zeigt eigene Entwürfe, die wir in das Tutorial einbauen können.

Herzliche Grüße

Matthias Scharwies