Add support for CSS property "aspect-ratio"

[MichaIng]

While this does exist (and is supported) as media feature already, browsers started to support it as regular CSS property as well: https://developer.mozilla.org/docs/Web/CSS/aspect-ratio

In Chromium 88 at least it does not needs to be enabled explicitly anymore but works OOTB according to my tests, so MDN web docs (while writing this) is outdated about this point.

With this it is e.g. possible to set both dimensions of an image relative to the parents width, preserving the aspect ratio of the image, even if the resource is not available or has not yet been loaded:

width: 100%
aspect-ratio: 16/9

[ylafon]

Fixed by #308

[MichaIng]

Great, many thanks 👍.

[MatinF]

It seems the W3C validator now again does not recognize aspect-ratio as a property. My pages that have this in use failed validation as of August 28 and 29, 2021 - yet the pages were correctly validated for the past 2 weeks before this.

[ylafon]

@MatinF Do you have any pointer for that? A simple aspect-ratio test seems to work properly.

[MatinF]

See example page below, which has validated without issues recently, but now fails validation in both the API based and web based W3C validator. Also, an odd effect is that it seemingly validates without issue about every 2nd time I refresh - not sure what is causing this.

https://www.csselectronics.com/pages/black-box-can-bus-logger

[sideshowbarker]

Thanks for reporting this. I couldn’t reproduce this locally, so I figured it must be a problem with the https://validator.w3.org/nu/ environment — and after checking, I found that I hadn’t deployed properly. But I think I’ve got it fixed now. So please re-check, and let me know if you can still reproduce the problem.

[MatinF]

Looks to be resolved now, thanks

[ylafon]

Ah, it is not the output of the CSS Validator, but of https://github.com/validator/validator
It seems to work now, so it was just a matter of waiting for updates to be "live" there.

[zampage]

Hello there!

According to the specs detailed on https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio it should be possible to have the following as valid aspect ratios:

aspect-ratio: 1;
aspect-ratio: 0.5;

The validator does not recognize this as valid CSS.

Would you be able to update the allowed values of the validator? Thanks 😃