Elementary.

A CSS workflow for mimicking element queries. [c]2014 @scottjehl, @filamentgroup. MIT license.

View project site here: Elementary on Github

The background of this element will change depending on its own width

How to

  1. Give an element a class of mod and whatever other classes you might need for styling it.
    
    <p class="mod mod-foo">...</p>
    
  2. Claim that element’s potential element query breakpoints in your CSS by setting its :before selector’s content property value with space-separated numbers, like this:
    
    .mod-foo:before {
       content: "300 450 620";
    }
    
  3. For all elements with this "mod" class, a little JavaScript will set and maintain (on resize) a data-minwidth attribute on them containing a subset of the widths that are less-than-or-equal-to the element’s own width. You can use that to write selectors like this, which says, “if the data-minwidth attribute contains the 450”:
    
    .mod[data-minwidth~="450"] {
      background: blue;
    }
    

That’s about it. Here’s the CSS for the sample element on this page:


.mod-foo:before {
  content: "300 410 500";
}
.mod-foo {
  background: green;
  color: #fff;
  padding: 20px;
}
.mod-foo[data-minwidth~="300"] {
  background: blue;
}
.mod-foo[data-minwidth~="410"] {
  background: red;
}
.mod-foo[data-minwidth~="500"] {
  background: gray;
}