PPK seems to be at aspect-ratio, a CSS property for structure that, for probably the most half, does precisely what you’ll suppose it does. It’s getting extra fascinating because it’s behind a flag in Firefox and Safari now, so we’ll have common help fairly darn quickly. I favored how he referred to as it a “weak declaration” which I’m pretty positive isn’t an official time period however a great way to consider it.
This can produce a 16 / 9 factor:
.movie-card {
aspect-ratio: 16 / 9;
}
This can too:
.movie-card {
width: 50%;
aspect-ratio: 16 / 9;
}
However this gained’t:
.movie-card {
width: 150px;
top: 150px;
aspect-ratio: 16 / 9;
}
Since you’ve explicitly set the peak and width, that’s what can be revered. The aspect-ratio is weak in that it’ll by no means override a dimension that’s set in another approach.
And it’s not simply top and width, it could possibly be max-height that takes impact, so possibly the factor follows the facet ratio generally, however will at all times respect a max-* worth and break the facet ratio if it has to.
It’s so weak that not solely can different CSS break the facet ratio, however content material contained in the factor can break it as effectively. For instance, in case you’ve bought a ton of textual content inside a component the place the peak is simply constrained by aspect-ratio, it truly gained’t be constrained; the content material will develop the factor.
I believe that is all… good. It feels intuitive. It appears like good default conduct that stops undesirable negative effects. If you actually need to power a facet ratio on a field with content material, the padding trick nonetheless works for that. That is only a a lot nicer syntax that replaces the protected methods of doing the padding trick.
PPK’s article will get into aspect-ratio conduct in flexbox and grid, which positively has some gotchas. For instance, in case you are doing align-content: stretch;—that’s a kind of issues that may break a facet ratio. Like he mentioned: weak declaration.
The put up “Weak declaration” appeared first on CSS-Methods. You possibly can help CSS-Methods by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!