Using an Element’s Width

CSS spec authors recognize the ability to style an element differently based on its own width, but currently support is limited to just the width of the <html> element though Media Queries.

It could be incredibly useful to style other elements based on the width they show up, currently the only language that has knowledge of the width of elements as they appear on the page is JavaScript, so in order to apply styles to elements based on their rendered width you will need to find a way to have JavaScript help resolve a CSS selector for you.

Parts Required

JS Tests

Min-width:

test <= this.offsetWidth

Max-width:

this.offsetWidth <= test

Plugins Capable

Syntax Examples

CSS (limited to <html> element)

@media (min-width: 500px) {
  body {
    background: lime;
  }
}
@media (max-width: 500px) {
  body {
    background: hotpink;
  }
}

EQCSS

@element .min-width and (min-width: 300px) {
  $this {
    background: greenyellow;
    border-color: limegreen;
  }
}

@element .max-width and (max-width: 300px) {
  $this {
    background: greenyellow;
    border-color: limegreen;
  }
}

CSSplus/Selectory

.min-width[test="this.offsetWidth > 500"] {
  background: lime;
}

.max-width[test="this.offsetWidth < 500"] {
  background: lime;
}

Demos

Further Reading