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.

Here 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.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

max-width

min-height

max-height

min-scroll-y

max-scroll-y

min-characters on block elements

min-characters on form inputs

max-characters on block elements

max-caracters on form inputs

multiple conditions

scoped styles

scoped styles + multiple conditions

comments

$parent Selector

Using values from JavaScript inside CSS

Demos using Element Queries

Headlines with element queries

Testimonials Block with element queries

Mobile Navigation with element queries

Calendar UI with element queries

Pricing Chart with element queries

Responsive <table> with element queries

Wrapper-free video resizing

Scroll-based flyout

Zastrow-style Element Query Demo

Min-character based tweet counter

Responsive 'media library' grid

Scroll-triggered Modal


7,235 17 40