Können wir einen „Resize-Hack“ mit Container Queries erstellen?

Wenn Sie die neuesten Entwicklungen in CSS verfolgen, haben Sie wahrscheinlich von der bevorstehenden Einführung von Container Queries gehört. Hier werden wir uns mit den Grundlagen befassen, aber wenn Sie einen weiteren Blick darauf werfen möchten, schauen Sie sich Anas Artikel „Next Gen CSS: @container“ an. Nachdem wir uns selbst mit den Grundlagen beschäftigt haben, werden wir damit etwas super Lustiges bauen: eine frische Version des klassischen CSS-Memes mit Peter Griffin, der mit Fensterrollos herumfummelt. ;)

Was genau sind also Container Queries? Es ist… genau das. Ähnlich wie wir Media Queries haben, um Dinge wie die Viewport-Größe abzufragen, ermöglichen Container Queries das Abfragen der Größe eines Containers. Basierend darauf können wir dann unterschiedliche Stile auf die untergeordneten Elemente dieses Containers anwenden.

Wie sieht das aus? Es sieht ungefähr so aus:

.container {
  container-name: my-container;
  container-type: inline-size;
  /* or */
  container: my-container inline-size;
}

@container my-container (min-width: 768px) {
  .child { background: hotpink; }
}

Das Schlüsselwort my-container zielt auf den Container für die Container Query über container-name ab. inline-size ermöglicht es Benutzern, spezifischer bei der Containment zu sein. Das bedeutet derzeit, dass wir nur die width des Containers abfragen können. Mit size können wir die height des Containers abfragen.

Sie können Container Queries (ohne ein Polyfill) ab Chrome Version 105 und Safari 16 verwenden. Ich empfehle auf jeden Fall, die Entwürfe auf csswg.org kurz durchzulesen.

Der einfachste Weg, mit dem Spielen zu beginnen, wäre, ein paar schnelle Demos zu erstellen, die ein vergrößerbares Container-Element enthalten.

Versuchen Sie, die container-Werte zu ändern und sehen Sie, wie die Demos reagieren. Diese Demos verwenden container-type: size, was die Achsen nicht einschränkt. Wenn sowohl die height als auch die width der Container bestimmte Schwellenwerte erreichen, passt sich die Hemdgröße in der ersten Demo an. Die zweite Demo zeigt, wie die Achsen stattdessen einzeln funktionieren können, wobei sich die Bartfarbe ändert, aber nur, wenn die horizontale Achse angepasst wird.

@container (min-width: 400px) and (min-height: 400px) {
  .t-shirt__container {
    --size: "L";
    --scale: 2;
  }
}

Das ist alles, was Sie im Moment über Container Queries wissen müssen. Es sind wirklich nur ein paar neue Zeilen CSS.

Das Einzige ist, dass die meisten Demos für Container Queries, die ich bisher gesehen habe, ein ziemlich standardmäßiges „Karten“-Beispiel zur Demonstration des Konzepts verwenden. Verstehen Sie mich nicht falsch, denn Karten sind ein großartiger Anwendungsfall für Container Queries. Eine Kartenkomponente ist praktisch das Paradebeispiel für Container Queries. Betrachten Sie ein generisches Kartendesign und wie es sich verändern kann, wenn es in verschiedenen Layouts verwendet wird. Das ist ein häufiges Problem. Viele von uns haben an Projekten gearbeitet, bei denen wir verschiedene Kartenvarianten erstellen mussten, die alle auf die verschiedenen Layouts zugeschnitten waren, die sie verwendeten.

Aber Karten inspirieren nicht gerade dazu, mit Container Queries zu spielen. Ich möchte sehen, wie sie bis an ihre Grenzen getrieben werden, um interessante Dinge zu tun. Ich habe ein wenig damit in der T-Shirt-Größen-Demo herumgespielt. Und ich wollte warten, bis es eine bessere Browserunterstützung gibt, bevor ich tiefer grabe (ich bin derzeit ein Brave-Benutzer). Aber dann teilte Bramus mit, dass es ein Container Query Polyfill gibt!

Ein Dankeschön an @bramus, der neulich das Container Queries Polyfill von @jon_neal geteilt hat 👏

Das brachte mich zum „Hacken“! 😅https://#/Em5TLyslip

— Jhey 🐻🛠 (Erkundet Möglichkeiten ✨) (@jh3yy) 30. April 2021

Und das brachte mich zum Nachdenken über Wege, Container Queries zu „hacken“.

⚠️ Spoiler-Alarm: Mein Hack hat nicht funktioniert. Er hat es zumindest kurzzeitig getan, oder ich dachte, er hätte es getan. Aber das war eigentlich ein Segen, weil es mehr Gespräche über Container Queries angestoßen hat. Und jetzt gibt es ein neues Container Queries Polyfill.

Was war meine Idee? Ich wollte so etwas wie den „Checkbox-Hack“, aber für Container Queries erstellen.

<div class="container">
  <div class="container__resizer"></div>
  <div class="container__fixed-content"></div>
</div>

Die Idee ist, dass man einen Container mit einem vergrößerbaren Element darin haben könnte und dann ein weiteres Element, das außerhalb des Containers eine feste Position erhält. Das Vergrößern von Containern könnte Container Queries auslösen und die festen Elemente neu gestalten.

.container {
  container: layout size;
}

.container__resize {
  resize: vertical;
  overflow: hidden;
  width: 200px;
  min-height: 100px;
  max-height: 500px;
}

.container__fixed-content {
  position: fixed;
  left: 200%;
  top: 0;
  background: red;
}

@container(min-height: 300px) {
  .container__fixed-content {
    background: blue;
  }
}

Dies funktionierte mit diesen früheren Versionen des cqfill Polyfills.

Können wir ein klassisches CSS-Meme mit Container Queries widerlegen?

Das hat mich sehr gefreut. Endlich eine Gelegenheit, eine Version des Peter Griffin CSS-Memes mit CSS zu erstellen und es zu widerlegen!

Sie haben das Meme wahrscheinlich schon gesehen. Es ist eine Anspielung auf die Kaskade und wie schwierig es ist, sie zu verwalten. Ich habe die Demo mit [email protected] erstellt… mit meinen eigenen kleinen Kniffen, natürlich. 😅

3D CSS Peter's Blinds. Gefixt! Worum ging es bei dem ganzen Trubel? Diese Demo verwendet null JavaScript. Wie ist sie dann interaktiv? Ich „hacke“ die neuen Container Queries, um diese Jalousien zum Laufen zu bringen. Sehen Sie, wie? codepen.io/jh3y/pen/LYxKjKX via @CodePen

— Jhey Tompkins (@jh3yy) 30. Apr. 2021

Beim Bewegen des Kordels wurde ein Element vergrößert, das wiederum die Containergröße beeinflusste. Unterschiedliche Container-Breakpoints würden eine CSS-Variable, --open, von 0 auf 1 aktualisieren, wobei 1 einem „offenen“ und 0 einem „geschlossenen“ Zustand entspricht.

@container (min-height: 54px) {
  .blinds__blinds {
    --open: 0.1;
  }
}
@media --css-container and (min-height: 54px) {
  .blinds__blinds {
    --open: 0.1;
  }
}
@container (min-height: 58px) {
  .blinds__blinds {
    --open: 0.2;
  }
}
@media --css-container and (min-height: 58px) {
  .blinds__blinds {
    --open: 0.2;
  }
}
@container (min-height: 62px) {
  .blinds__blinds {
    --open: 0.3;
  }
}
@media --css-container and (min-height: 62px) {
  .blinds__blinds {
    --open: 0.3;
  }
}

Aber…. wie ich bereits erwähnte, ist dieser Hack nicht möglich.

Hmmm, die Beschränkung der Inline-Größe sollte keine Block-Abfragen (Höhe) zulassen. Sie hacken wahrscheinlich einen Fehler im JS-Polyfill.

Ich liebe die Idee, aber ich glaube nicht, dass dieser Ansatz mit Container Queries in CSS funktionieren wird.

— Miriam (Aber schrecklich) (@TerribleMia) 1. Mai 2021

Das Tolle daran ist, dass es zu Gesprächen darüber geführt hat, wie Container Queries funktionieren. Es hat auch einen Fehler im Container Query Polyfill hervorgehoben, der behoben wurde. Ich würde mir wünschen, dass dieser „Hack“ funktionieren würde.

Miriam Suzanne erstellt fantastische Inhalte zu Container Queries. Die Möglichkeiten ändern sich ständig. Das ist das Risiko, am Puls der Zeit zu leben. Einer ihrer neuesten Artikel fasst den aktuellen Stand zusammen.

Ich werde das bald beheben. Die Spezifikation zu befolgen ist KRITISCH.

Übrigens mache ich mir Sorgen, wie viele Videos & Demos bereits auf dem „Export“-Verhalten basieren. Der noch unveröffentlichte Code im Main-Branch lässt diese Anforderung fallen, sodass `import ‘/path/to/cqfill.js’` alles ist, was benötigt wird.

— Jonathan Neal (@jon_neal) 2. Mai 2021

Obwohl meine ursprüngliche Demo/mein Hack nicht funktioniert hat, können wir immer noch einen „Resize“-Hack verwenden, um diese Jalousien zu erstellen. Wiederum können wir height abfragen, wenn wir container-type: size verwenden.

Betrachten Sie diese Demo:

Der Pfeil dreht sich, wenn der Container vergrößert wird. Der Trick dabei ist, eine Container Query zu verwenden, um eine gekapselte CSS-Variable zu aktualisieren.

.container {
  container-type: size;
}

.arrow {
  transform: rotate(var(--rotate, 0deg));
}

@container(min-height: 200px) {
  .arrow {
    --rotate: 90deg;
  }
}

Wir haben hier also eine Art Container Query Trick. Der Nachteil, dass das erste Hack-Konzept nicht verwendet werden kann, ist, dass wir nicht komplett 3D gehen können. Overflow hidden wird das verhindern. Wir brauchen auch die Schnur unter dem Fenster, was bedeutet, dass die Fensterbank im Weg wäre.

Aber wir kommen fast dahin.

Diese Demo verwendet Container Query Steps. Bei jedem Schritt wird eine gekapselte benutzerdefinierte Eigenschaft aktualisiert. Dies enthüllt Peter und öffnet die Jalousien.

Der Trick hier ist, den Container zu skalieren, um den Größenänderungsgriff größer zu machen. Dann skaliere ich den Inhalt herunter, um ihn wieder dorthin zu bringen, wo er hingehört.

---

Diese unterhaltsame Demo, die „das Meme widerlegt“, ist noch nicht zu 100% da, aber wir kommen ihr nahe. Container Queries sind eine spannende Aussicht. Und es wird interessant sein zu sehen, wie sie sich verändern, wenn sich die Browserunterstützung weiterentwickelt. Es wird auch spannend sein zu sehen, wie die Leute die Grenzen mit ihnen ausreizen oder sie auf unterschiedliche Weise einsetzen.

Wer weiß? Der „Resize Hack“ könnte eines Tages gut neben dem berüchtigten „Checkbox Hack“ passen.