Element Queries for CSS

Written by Tommy Hodgins

Element Queries are a new way of writing CSS styles so the rules apply to individual elements on the page, instead of to the whole page as one document like in regular CSS.

Element Queries can be based on more than just the width or height of the browser as well, you can change styles in a number of different conditions, like how many lines of text or child elements an element contains.

Perhaps the most exciting feature of element queries is that since the styles are applied to the element(s) that match the query, we finally have scoped CSS styles. We can apply styles specifically to one element and the elements inside of it and move that content from design to design without worrying that the design of our element will be affected.

In addition to this, enabling queries on elements allows you to do reach elements that CSS can't normally reach on its own.

@element "input[type=checkbox]:checked" {
  body {
    background: red;
  }
}

This code would change the <body> when a checkbox is checked, something that CSS normally wouldn't be able to reach. What do you think this code would do?

@element "#sidebar:empty" {
  #sidebar {
    display: none;
  }
  #content {
    width: 100%;
  }
}

It doesn't matter where #content is located in the template, if the #sidebar happens to be empty it will be hidden and the #content area will expand to fill the container.

How to use EQCSS

EQCSS is a JavaScript plugin that extends CSS to include Element Queries, plus other features that regular CSS doesn't currently support. It is written in pure JavaScript, so it doesn't require jQuery or any other JavaScript library to be installed on your site to work.

On Codepen you can fork my ‘Batteries-Included’ EQCSS template that has EQCSS.js and event listeners for most keyboard and mouse events built-in and ready to play around with.
Save this as a template: EQCSS Batteries Included Template

Download EQCSS

Installing EQCSS.js

In order to being using Element Queries on your project you will need to add a copy of EQCSS.js to every page where you need Element Queries to display. Install EQCSS at the end of your <body>

<script src="EQCSS.js"></script>

If you want to support IE8, place EQCSS-polyfills.js before EQCSS.js

<!--[if lt IE 9]><script src="EQCSS-polyfills.js"></script><![endif]-->
<script src="EQCSS.js"></script>

How to write EQCSS

Now that you have EQCSS linked into your project you can begin adding Element Queries. You can include these directly in your HTML or store these in an external stylesheet.

Updated Nov 2015: You can write EQCSS styles a couple of different ways, right in your CSS either inside a <style> tag or an external CSS stylesheet with the <link> tag, or you can write your EQCSS code in the HTML page in a <script> tag that has the type type="text/eqcss".

<script type="text/eqcss">
  /* EQCSS goes here */

</script>

or include it from an external file:

<script type="text/eqcss" src="code.eqcss"></script>

So far in tests it seems that storing EQCSS inside CSS leads to more a responsive page after load, while storing EQCSS inside <script type=text/eqcss> loads faster initially but feels a bit slower once loaded. More research required.

The EQCSS.apply() function is called on page load and on resize. Call it manually when you update the DOM. You can also include code like this to apply EQCSS after different events: http://staticresource.s3.amazonaws.com/eqcss-demo.js

Even though we use <script type="text/eqcss"> for our filetype, EQCSS remains compatible with CSS syntax, and so you should be able to set CSS syntax highlighting for EQCSS files. Here's an example of a massive all-EQCSS modular template with CSS syntax highlighting applied: View source: styles.eqcss

Design With Element Queries

Element Queries have the following format:

@element {selector} and {condition} [ and {condition} ]* { {css} }

{css} can contain: Any valid CSS rule. (Ex: #id div { color: red })
{selector} is a CSS selector targeting one or many elements. Ex: #id or .class
{condition} is composed of a measure and a value.

Supported Element Queries

min-width

See the Pen min-width by Tommy Hodgins (@tomhodgins) on CodePen.

max-width

See the Pen max-width by Tommy Hodgins (@tomhodgins) on CodePen.

min-height

See the Pen min-height by Tommy Hodgins (@tomhodgins) on CodePen.

max-height

See the Pen max-height by Tommy Hodgins (@tomhodgins) on CodePen.

min-scroll-y

See the Pen min-scroll-y by Tommy Hodgins (@tomhodgins) on CodePen.

max-scroll-y

See the Pen max-scroll-y by Tommy Hodgins (@tomhodgins) on CodePen.

scoped styles

See the Pen scoped styles by Tommy Hodgins (@tomhodgins) on CodePen.

scoped styles + multiple conditions

See the Pen scoped styles + multiple conditions by Tommy Hodgins (@tomhodgins) on CodePen.

comments

See the Pen comments by Tommy Hodgins (@tomhodgins) on CodePen.

`$parent` Selector

See the Pen Parent Selector by Tommy Hodgins (@tomhodgins) on CodePen.

Using values from JavaScript inside CSS

See the Pen Using Js Variables in Element Queries by Tommy Hodgins (@tomhodgins) on CodePen.

Demos using Element Queries

Headlines with element queries

See the Pen Responsive Headlines by Tommy Hodgins (@tomhodgins) on CodePen.

Testimonials Block with element queries

See the Pen Responsive Testimonials by Tommy Hodgins (@tomhodgins) on CodePen.

Mobile Navigation with element queries

See the Pen Responsive Navigation Menu by Tommy Hodgins (@tomhodgins) on CodePen.

Calendar UI with element queries

See the Pen Responsive Calendar by Tommy Hodgins (@tomhodgins) on CodePen.

Pricing Chart with element queries

See the Pen Responsive Pricing Chart by Tommy Hodgins (@tomhodgins) on CodePen.

Responsive `<table>` with element queries

See the Pen Responsive Tables by Tommy Hodgins (@tomhodgins) on CodePen.

Wrapper-free video resizing

See the Pen Responsive Scaling by Tommy Hodgins (@tomhodgins) on CodePen.

Scroll-based flyout

See the Pen Scroll-based Flyout by Tommy Hodgins (@tomhodgins) on CodePen.

Zastrow-style Element Query Demo

See the Pen Zastrow-style Element Query Demo by Tommy Hodgins (@tomhodgins) on CodePen.

Min-character based tweet counter

See the Pen Tweet-Counter with Element Queries by Tommy Hodgins (@tomhodgins) on CodePen.

Responsive 'media library' grid

See the Pen Responsive Media Library by Tommy Hodgins (@tomhodgins) on CodePen.

Scroll-triggered Blocker

See the Pen Scroll-triggered Blocker by Tommy Hodgins (@tomhodgins) on CodePen.