Gestaltung einer Seitenverhältnis-Einheit für CSS

Rachel Andrew sagt, dass die CSS Working Group eine Seitenverhältnis-Einheit entworfen hat bei einem kürzlichen Treffen. Die Idee ist, eine elegante Lösung für jene Zeiten zu finden, in denen wir möchten, dass die Höhe eines Elements als Reaktion auf die Breite des Elements berechnet wird, oder umgekehrt.

Nehmen wir zum Beispiel ein Grid-Layout mit einer Reihe von Elementen, die ein quadratisches Verhältnis (1:1) beibehalten sollen. Es gibt einige bestehende, aber weniger ideale Möglichkeiten, wie wir vorgehen können

• Eine explizite Dimension definieren. Wenn wir die Höhe der Elemente im Grid definieren, aber einen intrinsischen Wert für die Vorlagen-Spalten verwenden (z.B. auto-fill), dann kennen wir die Breite des Elements nicht mehr, wenn sich der Container an das Browser-Viewport anpasst. Die Elemente werden wachsen und schrumpfen, aber nie dieses perfekte Quadrat beibehalten.
• Explizite Dimensionen definieren. Sicher, wir können einem Element sagen, es soll 200px breit und 200px hoch sein, aber was passiert, wenn mehr Inhalt zu einem Element hinzugefügt wird, als Platz vorhanden ist? Jetzt haben wir ein Überlaufproblem.
• Den Padding-Hack verwenden. Der prozentuale Block-Padding (von oben nach unten) eines Elements wird anhand der Inline-Breite des Elements berechnet, und wir können dies zur Höhenberechnung verwenden. Aber, wie Rachel vorschlägt, ist es völlig un-intuitiv und schwer zu warten.

Chris hat eine vollständige Zusammenfassung der möglichen Wege zur Beibehaltung des Seitenverhältnisses geschrieben, aber keiner davon ist so elegant wie die vorgeschlagene Lösung der CSS Working Group.

.box {
  width: 400px;
  height: auto;
  aspect-ratio: 1/1;
}

Sehen Sie das? Eine aspect-ratio-Eigenschaft mit einer Seitenverhältnis-Einheit würde die Höhe des Elements basierend auf dem Wert der width-Eigenschaft berechnen.

Oder im Falle eines Grid-Layouts, bei dem die Spalten auf auto-fill eingestellt sind.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.item {
  aspect-ratio: 1/1;
}

Sehr cool! Aber wohin geht der Vorschlag von hier aus? Das aspect-ratio ist im Rohentwurf der CSS Sizing 4 Spezifikation enthalten. Erstellen Sie ein Issue im CSSWG GitHub Repo, wenn Sie Ideen oder Vorschläge haben. Oder, wie Rachel vorschlägt, kommentieren Sie ihren Smashing Magazine Beitrag oder schreiben Sie Ihren eigenen Beitrag und senden Sie ihn weiter. Dies ist eine großartige Gelegenheit, Ihre Stimme zu einer möglichen neuen Funktion beizusteuern.

Direkter Link →