EQCSS

Element Queries for CSS

What are Element Queries?

Element queries are a new way of thinking about responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser.

Unlike CSS @media queries, @element Queries are aware of more than just the width and height of the browser, you can write responsive conditions for a number of different situations like how many characters of text or child elements an element contains.

Another concept that element queries brings to CSS is the idea of ‘scoping’ your styles to one element in the same way that JavaScript functions define a new scope for the variables they contain.

How to use EQCSS

EQCSS is a JavaScript plugin that lets you write element queries inside CSS today. With performance in mind, this plugin is written in pure JavaScript, so it doesn't require jQuery or any other libraries on your page in order to function - add EQCSS.js to you HTML and you’re ready to get started!

View EQCSS on Github

Once you have downloaded a copy of EQCSS you will need to add it to every HTML page where you will be using element queries. It’s best to add a <script> after your content, before the end of your <body> tag.

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

If you need to support IE8 there is an optional polyfill available that adds @media queries and @element queries to IE8. Add this file to your HTML before where you added EQCSS:

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

Writing Element Queries

Now that you have EQCSS added to your HTML you’re ready to write element queries. There are two ways you can add EQCSS to your site: the easiest way is by writing them inside your CSS either in a <style> or <link> in your HTML, or by isolating your EQCSS styles in a custom script type.

You can also link to EQCSS hosted in external files with either .css or .eqcss extensions.

Using the EQCSS script type

While not necessary, if you choose to isolate your EQCSS from your CSS you can store it in external .eqcss files and link them using a <script> tag like this:

<script type=text/eqcss src=styles.eqcss></script>

And you can include EQCSS scripts inline in your page like this as well:

<script type=text/eqcss>

  /* EQCSS goes here */

</script>

Running EQCSS

By default the plugin execute once when the content loads, and also whenever it detects browser resize (similar to @media queries). The EQCSS.apply() function can be called manually on other events too, like keyup or clicks, or even when specific elements are interacted with.

Designing with Element Queries

Element Queries have the following format:

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

Special Conditions

Use your mouse to resize the blocks

min-width in px

class="minwidthpixels"

min-width in %

class="minwidthpercents"

max-width in px

class="maxwidthpixels"

max-width in %

class="maxwidthpercents"

min-height in px

class="minheightpixels"

min-height in %

class="minheightpercents"

max-height in px

class="maxheightpixels"

max-height in %

class="maxheightpercents"

min-characters on block elements

(Use keyboard)

class="mincharacters"

max-characters on block elements

class="maxcharacters"

min-characters on form inputs

max-characters on form inputs

min-children

class="minchildren"

max-children

class="maxchildren"

min-lines

class="minlines"

max-lines

class="maxlines"

Scoped queries ($this)

class="scoped"
class="scoped"

Scoped queries + multiple conditions

class="scoped-multiple"
class="scoped-multiple"

Multiple conditions

class="multiple-conditions"

Comments

class="comments"

Special Selectors

$this

class="this-selector"

$parent

class="parent-selector"

$root

class="root-selector"

Further Reading

Similar Projects

EQCSS in the News

Licence

EQCSS.js is copyright © 2014– Tommy Hodgins & Maxime Euzière, and provided under the MIT license. The full license text can be found on Github