[David Barons] Gedanken zu einem umsetzbaren Weg für Container Queries

Das ist der Titel eines öffentlichen Beitrags von David Baron, Principal Engineer bei Firefox, mit Gedanken zu Container Queries. Ich weiß, dass viele Leute die Luft angehalten haben und auf Davids Ideen warten, da er einer der wenigen ist, der sich in diesem Bereich bestens auskennt und über die Umsetzbarkeit sprechen kann.

Wir befinden uns noch in den Anfängen der Container Queries. Jeder Webdesigner und Entwickler wünscht sie sich, die Browser wissen das, aber es ist eine sehr komplizierte Situation. Es war im Februar 2020 sehr ermutigend, positive Signale bezüglich einer möglichen Switch-Statement-Syntax zu hören, die uns Zugriff auf eine available-inline-size geben würde, um einzelne Werte bedingt festzulegen.

Jetzt sehen wir eine zweite Idee, die ebenfalls im Bereich des Möglichen liegt.

Diese Idee nutzt stattdessen eine @regel für die Syntax. Aus dem Dokument

@container <selector> (<container-media-query>)? {
  // ... rules ...
}

Ich stelle mir das also so vor:

.parent {
  contain: layout inline-size;
  display: grid;
  grid-template-columns: 100%;
  gap: 1rem;
}
@container .parent (min-width: 400px) {
  grid-template-columns: 1fr 1fr;

  .child::before {
     content: "Hello from container query land!";
   }
}

Außer…

1. Ich bin mir nicht sicher, ob man den Selektor auch innen wiederholen müsste? Oder ob das Einfügen von Eigenschaft/Wert-Paaren automatisch für den Selektor in der @regel gilt.
2. David sagt: „Die Regeln können nur die Nachfahren dieses Containers treffen. Wahrscheinlich bräuchten wir Unterstützung für einige Eigenschaften, die auf den Container selbst angewendet werden, aber andere können das definitiv nicht.“ Ich hoffe, dass Grid-Eigenschaften ein starker Kandidat für etwas sind, das man ändern kann, aber ich habe keine Ahnung. Andernfalls sehe ich Leute, die Elemente mit <div class="container-query"> umschließen, um die Einschränkung „nur Nachfahren“ zu umgehen.

Containment scheint ein sehr wichtiger Teil davon zu sein. Wenn das Element nicht richtig enthalten ist, funktioniert die Container Query einfach nicht. Ich weiß nicht viel über Containment, aber Rachel hat einen großartigen Deep Dive vom letzten Jahr.

Nochmal, das ist alles noch ganz am Anfang, ich habe nur Spaß daran, das zu beobachten, und keiner von uns hat wirklich eine Ahnung, was es tatsächlich in die Browser schaffen wird.

Direkter Link →