[csswg-drafts] [css-orientation] - Missing squared orientation (#7210)

StfBauer has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-orientation] - Missing squared orientation ==
According to the CSS specification only `portrait` and `landscape` exist in the following definition

**portrait**
The orientation media feature is [portrait](https://drafts.csswg.org/mediaqueries/#valdef-media-orientation-portrait) when the value of the [height](https://drafts.csswg.org/mediaqueries/#descdef-media-height) media feature is greater than or equal to the value of the [width](https://drafts.csswg.org/mediaqueries/#descdef-media-width) media feature.
**landscape**
Otherwise orientation is [landscape](https://drafts.csswg.org/mediaqueries/#valdef-media-orientation-landscape).

In case the height and width are equal it will become 'portrait', which is not correct and could even cause issues IMO.

When media queries used together with aspect ratios for example.

```css
@media screen and (orientation: landscape){
 .imageelement{
  aspect-ratio: 16 / 9;
 }
}

@media screen and (orientation: portrait){
 .imageelement{
  aspect-ratio: 9 / 16;
 }
}
```

So the image on a squared screen will then have an aspect ratio of 9:16.

The correct or more appropriate handling of this situation would be to have a media query that has orientation squared.

```css
@media screen and (orientation: squared){
 .imageelement{
  aspect-ratio: 1 / 1;
 }
}
```

The case that the screen is perfectly squared is pretty unlikely to happen but I might could happen and then the aspect ratio of images of iframe might look off.

Another option would be if we could compare height and width of the window in a media query somehow.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7210 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 11 April 2022 10:18:19 UTC