Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there support for "orientation: portrait" queries? #288

Open
jurgenhaas opened this issue Feb 7, 2020 · 3 comments
Open

Is there support for "orientation: portrait" queries? #288

jurgenhaas opened this issue Feb 7, 2020 · 3 comments

Comments

@jurgenhaas
Copy link

We currently use some media queries orientation: portrait and orientation: landscape in order to stack block side by side or on top of each other, depending on the orientation of the screen.

Now, with element queries it would be cool to have something similar. It doesn't have to be direct support of orientation, I'd also be happy if there was somethin like width > height or not.

Is something like that possible?

@marcj
Copy link
Owner

marcj commented Feb 13, 2020

So, you mean you want to apply rules to certain elements when they width > height, or height > width? We could integrate something like that:

.element[min-width~="200px"] {
    //normal csseq rule
}

.element[orientation="landscape"] {
    //only when width > height
}

.element[orientation="portrait"] {
    //only when height > width
}

What if height === width? None of them would apply.

So this is possible, but not planned. If you want to provide a PR, I'm open to merge it though.

@jurgenhaas
Copy link
Author

Thanks @marcj yes, that's the idea behind the request. The requirement is not high priority right now but I keep it in mind and will provide a PR when work load permits.

@steveoriol
Copy link

+1 for orientation support.

steveoriol added a commit to steveoriol/css-element-queries that referenced this issue May 3, 2021
Add support for "orientation" queries ['landscape' |'portrait'|'square']
see marcj#288
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants