marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

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

Open jurgenhaas opened 4 years ago

jurgenhaas commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

+1 for orientation support.