css-element-queries

css-element-queries copied to clipboard

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?

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.

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.

+1 for orientation support.