„Weak declaration“

PPK schaut sich aspect-ratio an, eine CSS-Eigenschaft für Layout, die im Großen und Ganzen genau das tut, was man erwarten würde. Sie wird interessanter, da sie in Firefox und Safari jetzt hinter einem Flag steckt, sodass wir bald universellen Support haben werden. Mir gefiel, wie er sie als "schwache Deklaration" bezeichnete, was sicher kein offizieller Begriff ist, aber eine gute Art, darüber nachzudenken.

Dies erzeugt ein Element im Verhältnis 16 / 9

.movie-card {
  aspect-ratio: 16 / 9;
}

Dies auch

.movie-card {
  width: 50%;
  aspect-ratio: 16 / 9;
}

Aber das hier nicht

.movie-card {
  width: 150px;
  height: 150px;
  aspect-ratio: 16 / 9;
}

Da Sie height und width explizit gesetzt haben, wird dies beachtet. Das aspect-ratio ist schwach, da es niemals eine auf andere Weise gesetzte Dimension überschreiben wird.

Und nicht nur height und width, es könnte auch max-height sein, das greift. Das Element folgt also manchmal dem Seitenverhältnis, beachtet aber immer einen max-*-Wert und bricht das Seitenverhältnis, wenn es sein muss.

Es ist *so schwach*, dass nicht nur andere CSS das Seitenverhältnis brechen können, sondern auch der Inhalt innerhalb des Elements. Wenn Sie zum Beispiel eine Menge Text in einem Element haben, dessen Höhe nur durch aspect-ratio begrenzt ist, wird es tatsächlich nicht begrenzt; der Inhalt erweitert das Element.

Ich finde das alles... gut. Es fühlt sich intuitiv an. Es fühlt sich wie ein gutes Standardverhalten an, das unerwünschte Nebenwirkungen verhindert. Wenn Sie wirklich ein Seitenverhältnis für eine Box mit Inhalt erzwingen müssen, funktioniert der Padding-Trick dafür immer noch. Dies ist nur eine *viel* schönere Syntax, die die sicheren Wege ersetzt, um den Padding-Trick anzuwenden.

PPKs Artikel geht auf das Verhalten von aspect-ratio in Flexbox und Grid ein, was definitiv einige Tücken birgt. Wenn Sie zum Beispiel align-content: stretch; verwenden – das ist eines dieser Dinge, die ein Seitenverhältnis brechen können. Wie er sagte: schwache Deklaration.