New in Chrome 88: aspect-ratio
And it was released yesterday! The big news for us in CSS Land is that the new release supports the aspect-ratio property. This comes right on the heels of Safari announcing support for it in Safari Technology Preview 118, which released January 6. That gives us something to look forward to as it rolls out to Edge, Firefox and other browsers.
Here’s the release video skipped ahead to the aspect-ratio support:
For those catching up:
- An aspect ratio defines the proportion of an element’s dimensions. For example, a box with an aspect ratio of
1/1is a perfect square. An aspect ratio of3/1is a wide rectangle. Many videos aim for a16/9aspect ratio. - Some elements, like images and iframes, have an intrinsic aspect ratio. That means if either the width or the height is declared, the other is automatically calculated in a way that maintains its proportion.
- Non-replaced elements, like divs, don’t have an intrinsic aspect ratio. We’ve resorted to a padding hack to get the same sort of effect.
- Support for an
aspect-ratioproperty in CSS allows us to maintain the aspect ratio of non-replaced elements. - There are some tricks for using it. For example, defining
widthon an element withaspect-ratiowill result in the property using thatwidthvalue to calculate the element’s height. Same goes for defining the height instead. And if we define both thewidthandheightof an element? Theaspect-ratiois completely ignored.
Seems like now is a good time to start brushing up on it!
- CSS Box Sizing Module Level 4 (Official specification, currently in Editor’s Draft)
- MDN Documentation
- A First Look at
aspect-ratio(CSS-Tricks) - Defining An Aspect Ratio Unit for CSS (Rachel Andrew, CSS-Tricks notes)
Direct Link to Article — Permalink
The post New in Chrome 88: aspect-ratio appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
