Heiße Neuigkeiten von Brian Kardell, bezüglich dessen, was wir bisher als „Container Queries“ bezeichnet haben, dem am meisten nachgefragten Feature in CSS.
Es scheint eine allgemeine Einigung zu mindestens einem Teil dessen zu geben, was ich stattdessen „Responsive Design für Komponenten“ nennen werde, und das ist, dass es besser ist, das Problem auf den Kopf zu stellen.
Das Umdrehen hier klingt so, als ob wir es statt über Media Queries auf Property-Ebene umsetzen würden.
.foo {
display: grid;
grid-template-columns: switch(
(available-inline-size > 1024px) 1fr 4fr 1fr;
(available-inline-size > 400px) 2fr 1fr;
(available-inline-size > 100px) 1fr;
default 1fr;
);
}Ich denke, dies befindet sich noch in der Ideenfindungsphase, und andere Leute haben Ideen für verschiedene Ansätze. Aber es ist teilenswert, da es anscheinend an Zugkraft gewinnt und machbar ist, weil es nicht von dem Problem geplagt wird, dass nun ja, das ist einfach nicht so, wie Browser funktionieren, was bei Container Queries oft aufkam.
Brian spricht auch von „Lichtgeschwindigkeitsfortschritt“ in letzter Zeit, zum Beispiel
Man bedenke, dass wir die Pattsituation verändert haben und der
ResizeObserverentworfen, inkubiert, spezifiziert, getestet, vereinbart, iteriert (wir haben Dinge falsch gemacht!) und in allen Browsern implementiert wurde, und das in etwa 2 Jahren.
Zwei Jahre sind rasend schnell für Standards.
Ich mag diese Idee!
Ich denke, das könnte etwas kürzer sein. Stattdessen
Etwas wie das
(Dies könnte einfach eine zusätzliche Abkürzung für Leute sein, die in trivialen Situationen keinen selbsterklärenden Code benötigen).
Und der Teil (> Breite) könnte auch die Höhe des Viewports einschließen (> Breite, > Höhe).