(orientation: square), (orientation: portrait), and (orientation: landscape) on elements

[tomhodgins]

One thing CSS does that's really cool is (orientation: portrait) and (orientation: landscape) on @media queries. I use them when building full-screen animations with vmin and vmax units to ensure that stuff never goes outside the viewport and it's really handy to have that kind of information available - but I wish I could do the same on elements.

I grabbed the source code of EQCSS from http://elementqueries.com this weekend and added the following bit of JavaScript:

// Orientation
case "orientation":

// Square Orientation
if (EQCSS.data[i].conditions[k].value === 'square'){
  if (!(elements[j].offsetWidth == elements[j].offsetHeight)){
    test = false;
    break test_conditions;
  }
}

// Portrait Orientation
if (EQCSS.data[i].conditions[k].value === 'portrait'){
  if (!(elements[j].offsetWidth < elements[j].offsetHeight)){
    test = false;
    break test_conditions;
  }
}

// Landscape Orientation
if (EQCSS.data[i].conditions[k].value === 'landscape'){
  if (!(elements[j].offsetHeight < elements[j].offsetWidth)){
    test = false;
    break test_conditions;
  }
}

And now syntax like this is supported on @element queries:

@element ".orientation" and (orientation: square) {
  $this {
    background: orchid;
  }
}
@element ".orientation" and (orientation: portrait) {
  $this {
    background: darkturquoise;
  }
}
@element ".orientation" and (orientation: landscape) {
  $this {
    background: greenyellow;
  }
}

So now this is working with EQCSS in all browsers IE8 and up. Here's a video of me testing this in IE8:

Code demos

• Orientation on elements

I think it would be pretty cool if this was something normal CSS was aware of - I'll be able to put this to use right away!

[sebastienvermeille]

👍 we need it !

[luislobo14rap]

I do not know if it is valid, but in the case of window size, it would not be necessary to take the innerWidth / Height to know the screen size and not offset? To find the screen orientation.