Jen was just tweetin’ about how the latest Safari Technical Preview has aspect-ratio. Looks like Chrome and Firefox both have it behind a flag, so with Safari joining the party, we’ll all have it soon.
I played with it a while back. It’s awesome and much needed. There are ways to make `aspect-ratio` boxes, but they largely revolve around “padding hacks.”
Dave is excited about being released from jail:
Once we can rely on it, FitVids (which I use on literally every site I make in one form or another) can entirely go away in favor of a handful of CSS applied directly to the elements (usually videos-in-<iframe>s).
FitVids 2021:
i’m still wondering why this was not done with a reliable unit relative to the width of an element (let’s call it elw), like this:
height: 60elw;
Any advantages when using a new property for it instead?
I think the advantage would be that most videos are shot in defined “Standard ratios”, ratios are also a common concept taught too kids in basic maths. Using this instead of a unique unit measure is just cutting down on mystery and making the language more transparent.
My guess is that width and height are intended to be references to external dimensions — width/height of the closest relative parent — so having the ability to set them relative to the unit itself breaks that convention. It also opens up the possibility of contradictory declarations that will inevitably lead to confusion and inconsistencies. Having a separate declaration that can be overridden by declared width and height values ensures nothing breaks if an element is over-defined and doesn’t change the conventions of any existing attributes.
Different videos have different aspect ratios. I don’t think we can simply apply
aspect-ratio: 16/9;to all video embeds from Youtube and Vimeo, unless you want big black bars on a vertical video, for instance.Would it be possible to do something like this instead?
width: 100%;
height: auto;
aspect-ratio: attr(width) / attr(height);
Could pretty easily just add an inline style
style="aspect-ratio:x/y;"Be careful Chris! Think of the page views you’ll lose if people stop googling the padding aspect ratio hack!
We were thinking about all this in the latest newsletter a well: https://css-tricks.com/newsletter/233-css-as-a-content-api-no-but-also-sort-of-yes/
If we would ever get typed attributes, like
attr(width number)we could probably ultimately doWhich would be a nice setup for all the existing iframes out there that have those attributes.
But also wouldn’t it be nice to be overrideable with a custom property?
Like
<iframe style="--aspect-ratio: 1/1;" ... >and thenaspect-ratio: var(--aspect-ratio, 16 / 9);.