How does it work and how do I use the Aspect-ratio property?

Asked

Viewed 88 times

3

I don’t know how this property works or how to use it because I’ve tried to research more about it and only found two sites that mentions a little bit about it:

CSS Tricks

Smashing magazine

But in practice visually not change anything I’ve tried the same codes CSS of the two sites, but it’s the same thing to have no effect:

<style>
  .box {
      width: 400px;
      height: auto;
      background: red;
      aspect-ratio: 1/1; /* ou 16/9 */
   }
</style>

<div class="box"></div>

My questions are:

How it works and how to use this property?

It is supported in all browsers?

css

1 answer

4


As you can see here https://caniuse.com/#feat=mdn-css_properties_aspect-ratio no browser supports this property, so logically it has no way to test and say how it works and the most you can get is what says draft, and being a draft can change at any time and that answer would no longer be worth anything... https://drafts.csswg.org/css-sizing-4/#ratios

So even if you explain how it works "should work," there’s no guarantee that it will actually work that way. If you want to read more about CSS Status you can see some tips here What are the standardization phases of a CSS property?

Current browser support for the property aspect-ratio

inserir a descrição da imagem aqui

  • Because there is a property that cannot be used?

  • 1

    @Gabrieloliveira pq she is not yet official, and depending on the status she is in the Draft may still simply never see the light of day and never be made official... Here you can better understand how CSS properties are "created" and made official or not by W3C https://answall.com/questions/354803/quais-s%C3%a3o-as-phased-standardized%C3%A7%C3%a3o-de-a-property-css/355543#355543

  • 2

    @Gabrieloliveira is not the W3 that implements in the browsers, they only say the "standards" and formats that should use and the effect that should produce, the responsibility of making this in part of the browser is of each browser developers specific, Firefox is one Chrome is another, the firefox engine is one, Chrome is another, the same goes for Edge and Safari, the responsibility to apply described features and make them reality is of the "companies" or open-source organizations, the W3 is just who "dictates". So there’s no way a property exists at the same time it’s idealized.

  • 2

    Gabriel, of course the browser might even implement something that is not part of the standards/standards, but this is called non-standard (non-standard), so it probably won’t exist in 2 different browsers, has many examples of features that are only from Firefox and others just from Chrome, are sometimes useful, but there is no way to depend on them for something cross-browser. PS: Hugo +1 for reporting that this is still a draft/idea and that it has not actually been "approved".

  • @Guilhermenascimento well observed even, really the deployment in the end goes from the team that develops the browser. A pretty crazy example is the -webkit-text-stroke which is a relatively old property, which is unofficial, and which to work on any browser, Safari, Chrome, Firefox and even the old Edge needs to use the see prefix -webkit- https://caniuse.com/#feat=text-Stroke While other things already deprecated by the W3C itself still work on modern browsers :D

  • 1

    Note that if this leaves the draft (draft/idea) and becomes a standard and is supported by a browser, I recommend that you edit the response but keep the information that exists today as history, if possible with dates in the titles to explain the motivations of that having been written in such "time" and so help to notice the evolution of this CSS property. Imagine that the property exists in the future, but has changed something, it would be interesting to pass it on. But of course for me at least I like to know the story behind the technologies

  • @Guilhermenascimento for sure, editions with dates and keeping the history is always cool, at least in my view... Sometimes I come back in response and update information when necessary, but if it is up to W3C to drop some update we can wait seated.....

  • Thank you! To all of you by force, you have clerified my mind now :)

Show 3 more comments

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.