Neu in Chrome 88: Aspect-ratio

Und es wurde gestern veröffentlicht! Die große Neuigkeit für uns in der CSS-Welt ist, dass die neue Version die aspect-ratio-Eigenschaft unterstützt. Dies geschieht kurz nach der Ankündigung der Unterstützung durch Safari in Safari Technology Preview 118, die am 6. Januar veröffentlicht wurde. Das gibt uns etwas, worauf wir uns freuen können, wenn es in Edge, Firefox und anderen Browsern eingeführt wird.

Hier ist das Veröffentlichungs-Video, vorgespult zur aspect-ratio-Unterstützung

Für diejenigen, die aufholen

Ein Seitenverhältnis (Aspect Ratio) definiert das Verhältnis der Abmessungen eines Elements. Zum Beispiel ist eine Box mit einem Seitenverhältnis von 1/1 ein perfektes Quadrat. Ein Seitenverhältnis von 3/1 ist ein breites Rechteck. Viele Videos streben ein Seitenverhältnis von 16/9 an.
Einige Elemente, wie Bilder und Iframes, haben ein *intrinsisches* Seitenverhältnis. Das bedeutet, wenn entweder die Breite *oder* die Höhe deklariert wird, wird die andere automatisch so berechnet, dass ihre Proportion beibehalten wird.
Nicht-ersetzte Elemente, wie Divs, haben kein intrinsisches Seitenverhältnis. Wir haben uns mit einem Padding-Hack beholfen, um denselben Effekt zu erzielen.
Die Unterstützung für eine aspect-ratio-Eigenschaft in CSS ermöglicht es uns, das Seitenverhältnis von nicht-ersetzten Elementen beizubehalten.
Es gibt einige Tricks, um sie zu verwenden. Zum Beispiel führt die Definition von width für ein Element mit aspect-ratio dazu, dass die Eigenschaft diesen width-Wert verwendet, um die Höhe des Elements zu berechnen. Dasselbe gilt, wenn stattdessen die Höhe definiert wird. Und wenn wir *sowohl* die width als auch die height eines Elements definieren? aspect-ratio wird komplett ignoriert.

Es scheint, als wäre jetzt ein guter Zeitpunkt, sich damit vertraut zu machen!