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

@tabatkins  sorry for getting not back to use. As it turns out, a better way has already worked in CSS for a long time. This is done by using media query against the [aspect ratio](https://drafts.csswg.org/mediaqueries/#aspect-ratio).

```css
// Portrait
@media screen and (max-aspect-ratio: 1/1) {
    body {
        background-color: magenta;
    }
}
// Landscape 
@media screen and (min-aspect-ratio: 1/1) {
    body {
        background-color: lime;
    }
}
// Squared
@media screen and (aspect-ratio: 1/1) {
    body {
        background-color: yellow;
    }
}
```

It gives you way better control over your design than just knowing Portrait and Landspace. Thanks for your support.

There are only some technical questions to this.
Why is aspect-ratio ranged while orientation is discrete?
Why is one based on height (orientation) and the other based on width (aspect ratio)?

I get the thought process of it but wouldn't it be optimal when both are based on height or width, when I don't really see in the end result any difference?


-- 
GitHub Notification of comment by StfBauer
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7210#issuecomment-1192576841 using your GitHub account


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

Received on Friday, 22 July 2022 13:30:08 UTC