Element Queries for CSS
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.