How I Ended Up With Element Queries, And How You Can Use Them Today

We often want a component to respond to the dimensions of its parent element rather than the dimensions of the browser window. Currently that’s not possible but ultimately that’s the idea behind Element Queries, and over on Smashing Magazine Tommy Hodgins has written about the development of EQCSS.js, a JavaScript library which allows developers to write element queries.

This implementation of element queries is interesting as it suggests that we can style an element dependent on the features of another element, even if it’s not the parent. Tommy makes an example like this:

@element '.widget' and (min‐width: 500px) {
  body {
    background: red;
  }
}

If the .widget element is larger than 500px then the body would change its background color, and so this opens up a whole new field of experimentation with CSS. It’s pretty exciting stuff, if you ask me.

Direct Link →