Heydons <watched-box> ist ein verdammt fantastisches Werkzeug. Es ist ein Custom Element, das im Grunde Container Queries über Klassennamen implementiert, die basierend auf Größen-Breakpoints, die mit ResizeObserver berechnet werden, zur Box hinzugefügt werden. Es ist wie eine sauberere Version von dem, worüber Philip vor ein paar Jahren gesprochen hat.
Ich bin sicher, ich wäre glücklich, <watched-box> in der Produktion zu verwenden, da es leichtgewichtig ist, keine Abhängigkeiten hat und einen geradlinigen Ansatz verfolgt.
Für die Entwicklung hatte ich die Idee, Zachs interessantes kleines Web Component <resize-asaurus> zu verwenden. Es umschließt Elemente in einer anderen Box, die über CSS skalierbar ist und sie mit der aktuellen Breite beschriftet. Auf diese Weise müssen Sie nicht das gesamte Browserfenster manipulieren, um Dinge zu skalieren – jedes gegebene Element wird skalierbar. Wieder nur aus Entwicklungs- und Testgründen.
Sie würden sie zusammen verpacken wie…
<resize-asaurus>
<watched-box widthBreaks="320px, 600px">
<div class="card">
...
</div>
</watched-box>
</resize-asaurus>Was Ihnen erlaubt, CSS an Breakpoints zu schreiben wie…
.card {
.w-gt-320px & { }
.w-gt-600px & { }
}Das ist sicher nicht das, was die CSS-Syntax für Container Queries sein wird, aber es erreicht dasselbe mit klaren und verständlichen generierten Klassennamen.
Beispiel!
Live-Demo!
Ich liebe diese neueren Erkundungen, die ResizeObserver verwenden, um Aktualisierungen zu verarbeiten, wenn sich das Element selbst ändert. Es scheint eine leicht aktualisierte Version meiner
<style-container>Idee zu sein, bei der ich jedes<style-container>Element als seinen eigenen „Viewport“ behandelte und alle darin enthaltenen@mediaAbfragen so interpretierte, als wären es Elementabfragen, die auf den Dimensionen dieses<style-container>Elements basieren! Es macht Spaß, die deklarative Seite davon auch in HTML zu erkunden, Custom Elements wie dieses passen natürlich dazu! https://twitter.com/innovati/status/1086472249660637184Der Code für watched-box hat Raum für Verbesserungen. Zum Beispiel werden N Divs hinzugefügt, um die Größe zu überprüfen, wenn N Breakpoints existieren. Ich wäre ziemlich unbehaglich, wenn 10-20 Elemente jedes Mal 2-3 Divs hinzufügen und entfernen würden, wenn sich die Abmessungen ändern.