Using an Element’s Orientation

Similar to aspect ratio, orientation is something CSS spec authors recognize as being useful for styling, but are only support on the <html> element itself via Media Queries, and not something that you can use to apply styles to other elements in the document.

The solution is to use JavaScript to determine an element's orientation by measuring the width and height of the element.

Parts Required

JS Tests

Portrait:

this.offsetWidth < this.offsetHeight

Square:

this.offsetWidth == this.offsetHeight

Landscape:

this.offsetHeight < this.offsetWidth

Plugins Capable

Syntax Examples

CSS (for the <html> element only)

@media (orientation: portrait) {
  body {
    background: lime;
  }
}
@media (orientation: landscape) {
  body {
    background: hotpink;
  }
}

EQCSS

@element div and (orientation: square) {
  $this {
    background: orchid;
  }
}

@element div and (orientation: portrait) {
  $this {
    background: darkturquoise;
  }
}

@element div and (orientation: landscape) {
  $this {
    background: greenyellow;
  }
}

Selectory

/* portrait */
.orientation[test="this.offsetWidth < this.offsetHeight"] {
  background: orchid;
}

/* square */
.orientation[test="this.offsetWidth == this.offsetHeight"] {
  background: darkturquoise;
}

/* landscape */
.orientation[test="this.offsetWidth > this.offsetHeight"] {
  background: greenyellow;
}

Demos

Further Reading