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
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 of
3/1is a wide rectangle. Many videos aim for a
- 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 with
aspect-ratiowill result in the property using that
widthvalue to calculate the element’s height. Same goes for defining the height instead. And if we define both the
heightof an element? The
aspect-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
- Defining An Aspect Ratio Unit for CSS (Rachel Andrew, CSS-Tricks notes)