Element Query - a new frontend extension to help with responsive websites

July 25, 2016
Radu N

While coding responsive websites, with or without using a framework, @media queries are heavily utilised. In my experience, weather with Bootstrap or with Foundation, they are at the core of how we are nowadays tackling multiple device resolutions. While this is a great way to create responsive websites, it seems there is a better way.

Compared to @media queries, @element queries are aware of more than just the width and height of the browser, thus, enabling us to target and control a number of different things like how many characters of a text element contains.

How to use Element Query

EQCSS is a javascript plugin that you need to include first to make it work. It does not require jQuery or any other JS library. You'll have to include it to every HTML page where you will be using element queries. It's recommended that you include the <script> tag before the end of your <body> tag. To download the script or get more information about how to use it in different situations head to Element Queries Website.

Code samples

Here are some examples of how @elements work.

1. Select an element and do something if the width of the browser is at least 700px.

@element ".someclass" and (min-width: 700px) {
.minwidthpixels {
background: gold;
}
}

As you can imagine, that particular element will only have a "gold" background if the browser's width is at least 700px. While this can be achieved with a similar @media style, this is a lot easier and logical. The above code works with percentages as well! You can easily replace the 700px value with 50% or 70% and you will get the same result.

The same is true for max-width as well. Whether you use pixels or percentages, you are good to go.

But how about min-height  and max-height? That works too for both pixels and percentages.

2. Do something if an element has at least 40 chars

@element ".someclass" and (min-characters: 30) {
.mincharacters {
background: gold;
}
}

This is neat too. You can target a specific element, add a conditional of "if it has at least 30 chars" and apply a style to it. Super handy with forms but it can be applied in so many ways. Again this works with max-characters as well.

3. Other very useful uses

We can detect if an element has children and based on that we can style things with the min-children or max-children. We can also detect lines - min-lines, max-lines. There are scoped queries ($this) and can be combined with multiple conditions (max-width, min-width), etc.

While the use of @element queries are flexible, easy to understand and logical, one still needs to include an external javascript plugin to make use of it. It may make a lot of sense to use it for certain projects but I don't see this as being use in any projects. I would love to see the functionality being added to CSS one day though...

Leave a Reply