Jen hat gerade getwittert, dass die neueste Safari Technical Preview aspect-ratio hat. Es sieht so aus, als hätten Chrome und Firefox es beide hinter einem Flag, also mit Safari im Boot werden wir es bald alle haben.
Ich habe es schon vor einiger Zeit ausprobiert. Es ist großartig und wird dringend benötigt. Es gibt zwar Möglichkeiten, `aspect-ratio`-Boxen zu erstellen, diese basieren jedoch weitgehend auf „Padding-Hacks“.
Dave freut sich über seine Freilassung aus dem Gefängnis
Sobald wir uns darauf verlassen können, kann FitVids (das ich in jeder von mir erstellten Website in irgendeiner Form verwende) vollständig wegfallen und durch eine Handvoll CSS ersetzt werden, die direkt auf die Elemente angewendet werden (normalerweise Videos in <iframe>s).
FitVids 2021
Ich frage mich immer noch, warum das nicht mit einer zuverlässigen Einheit relativ zur Breite eines Elements (nennen wir es elw) gemacht wurde, wie hier
height: 60elw;
Gibt es Vorteile, wenn stattdessen eine neue Eigenschaft dafür verwendet wird?
Ich denke, der Vorteil wäre, dass die meisten Videos in definierten „Standardverhältnissen“ gedreht werden und Verhältnisse auch ein gängiges Konzept sind, das Kindern in der Grundrechenart beigebracht wird. Die Verwendung dessen anstelle einer einzelnen Maßeinheit reduziert das Rätselraten und macht die Sprache transparenter.
Meine Vermutung ist, dass Breite und Höhe als Referenz auf externe Abmessungen gedacht sind – Breite/Höhe des nächstgelegenen relativen Elternelements –, sodass die Möglichkeit, sie relativ zur Einheit selbst festzulegen, diese Konvention durchbricht. Es eröffnet auch die Möglichkeit widersprüchlicher Deklarationen, die zwangsläufig zu Verwirrung und Inkonsistenzen führen werden. Eine separate Deklaration, die durch deklarierte Breiten- und Höhenwerte überschrieben werden kann, stellt sicher, dass nichts kaputtgeht, wenn ein Element überdefiniert ist, und ändert die Konventionen bestehender Attribute nicht.
Verschiedene Videos haben unterschiedliche Seitenverhältnisse. Ich glaube nicht, dass wir einfach
aspect-ratio: 16/9;auf alle Video-Embeds von YouTube und Vimeo anwenden können, es sei denn, Sie möchten zum Beispiel große schwarze Balken bei einem vertikalen Video.Wäre es stattdessen möglich, so etwas zu tun?
width: 100%;
height: auto;
aspect-ratio: attr(width) / attr(height);
Man könnte ganz einfach einen Inline-Stil
style="aspect-ratio:x/y;"hinzufügen.Sei vorsichtig, Chris! Denken Sie an die Seitenaufrufe, die Sie verlieren werden, wenn die Leute aufhören, nach dem Padding-Aspect-Ratio-Hack zu googeln!
Wir haben all das auch im neuesten Newsletter besprochen: https://css-tricks.de/newsletter/233-css-as-a-content-api-no-but-also-sort-of-yes/
Wenn wir jemals typisierte Attribute bekommen würden, wie
attr(width number), könnten wir wahrscheinlich letztendlichWas eine schöne Einrichtung für all die vorhandenen iframes wäre, die diese Attribute haben.
Aber wäre es nicht auch schön, wenn es durch eine benutzerdefinierte Eigenschaft überschreibbar wäre?
Wie
<iframe style="--aspect-ratio: 1/1;" ... >und dannaspect-ratio: var(--aspect-ratio, 16 / 9);.