EQCSS

A CSS Extension for Element Queries & More

Specification

Work has begun on a specification for container-style element queries syntax. This draft is still a work-in-progress and is not standard CSS.

View CSS Element Queries Spec View on Github

Get the Latest To stay up to date with the latest responsive experiments, techniques, and plugins, subscribe to The Responsive Report newsletter:

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 your HTML and you’re ready to get started!

View EQCSS on Github View EQCSS on npm

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]-->

CDN Hosted Links

EQCSS is also hosted on CDNjs and you can use the version hosted there for your projects: https://cdnjs.com/libraries/eqcss:

https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.2/EQCSS-polyfills.min.js

https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.2/EQCSS.min.js

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} }

{selector} is a CSS selector targeting one or many elements. Ex: #id or .class

is a CSS selector targeting one or many elements. Ex: or {condition} is composed of a measure and a value.

is composed of a measure and a value. {css} can contain: Any valid CSS rule. (Ex: #id div { color: red } )

Element Query Conditions

Use your mouse (or drag on the handles) to resize the blocks.

min-width in px class="minwidthpixels" @element .minwidthpixels and (min-width: 500px) { :self { background: gold; } }

min-width in % class="minwidthpercents" @element .minwidthpercents and (min-width: 50%) { :self { background: gold; } }

max-width in px class="maxwidthpixels" @element .maxwidthpixels and (max-width: 500px) { :self { background: gold; } }

max-width in % class="maxwidthpercents" @element .maxwidthpercents and (max-width: 50%) { :self { background: gold; } }

min-height in px class="minheightpixels" @element .minheightpixels and (min-height: 200px) { :self { background: gold; } }

min-height in % class="minheightpercents" @element .minheightpercents and (min-height: 50%) { :self { background: gold; } }

max-height in px class="maxheightpixels" @element .maxheightpixels and (max-height: 200px) { :self { background: gold; } }

max-height in % class="maxheightpercents" @element .maxheightpercents and (max-height: 50%) { :self { background: gold; } }

min-characters on block elements (Use keyboard) class="mincharacters" @element .mincharacters and (min-characters: 30) { :self { background: gold; } }

min-characters on form inputs class="mincharacters-textarea" @element .mincharacters-input and (min-characters: 30) { :self { background: gold; } } @element .mincharacters-textarea and (min-characters: 30) { :self { background: gold; } }

characters on block elements Enter 1-3 Characters @element .characters and (characters: 1) { :self { background: orchid; } } @element .characters and (characters: 2) { :self { background: darkturquoise; } } @element .characters and (characters: 3) { :self { background: greenyellow; } }

characters on form inputs class="characters-textarea" @element .characters-input, .characters-textarea and (characters: 1) { :self { background: orchid; } } @element .characters-input, .characters-textarea and (characters: 2) { :self { background: darkturquoise; } } @element .characters-input, .characters-textarea and (characters: 3) { :self { background: greenyellow; } }

max-characters on block elements class="maxcharacters" @element .maxcharacters and (max-characters: 30) { :self { background: gold; } }

max-characters on form inputs class="maxcharacters-textarea" @element .maxcharacters-input and (max-characters: 30) { :self { background: gold; } } @element .maxcharacters-textarea and (max-characters: 30) { :self { background: gold; } }

min-children class="minchildren"

Add Child @element .minchildren and (min-children: 5) { :self { background: gold; } }

children class="children"

Add Child @element .children and (children: 1) { :self { background: orchid; } } @element .children and (children: 2) { :self { background: darkturquoise; } } @element .children and (children: 3) { :self { background: greenyellow; } }

max-children class="maxchildren"

Add Child @element .maxchildren and (max-children: 5) { :self { background: gold; } }

min-lines class="minlines" @element .minlines and (min-lines: 5) { :self { background: gold; } }

max-lines class="maxlines" @element .maxlines and (max-lines: 5) { :self { background: gold; } }

min-scroll-x Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @element .min-scroll-x and (min-scroll-x: 50%) { :self { background: gold; } }

max-scroll-x Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @element .max-scroll-x and (max-scroll-x: 50%) { :self { background: gold; } }

min-scroll-y Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @element .min-scroll-y and (min-scroll-y: 50%) { :self { background: gold; } }

max-scroll-y Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @element .max-scroll-y and (max-scroll-y: 50%) { :self { background: gold; } }

orientation 100 x 100 100 x 200 200 x 100 @element .orientation and (orientation: square) { :self { background: orchid; } } @element .orientation and (orientation: portrait) { :self { background: darkturquoise; } } @element .orientation and (orientation: landscape) { :self { background: greenyellow; } }

min-aspect-ratio class="min-aspect-ratio" @element .min-aspect-ratio and (min-aspect-ratio: 16/9) { :self { background: gold; } }

max-aspect-ratio class="max-aspect-ratio" @element .max-aspect-ratio and (max-aspect-ratio: 16/9) { :self { background: gold; } }

Scoped queries (:self) class="scoped" class="scoped" @element .scoped and (min-width: 300px) { /* Only set a gold background to the elements matching the query */ :self { background: gold; } }

Scoped queries + multiple conditions class="scoped-multiple" class="scoped-multiple" @element .scoped-multiple and (min-width: 350px) and (max-width: 450px) { :self { background: gold; } :self > strong { color: red } :self:hover { background: orange; } }

Multiple conditions class="multiple-conditions" @element .multiple-conditions and (min-width: 50%) and (min-height: 150px) { :self { background: gold; } }

Comments /* comment before */ @element .comments and (max-width: 400px) { /* comment at the beginning */ :self { background: gold; } /* comment at the end */ } /* comment after */

Meta-Selectors

The following selectors can be used inside element queries. The :self meta-selector selects the same element(s) on the page that meet the query condition. The :parent selector refers to the parent of the element(s) on the page that meet the repsonsive condition. There are selectors for :prev and :next as well.

Alternatively, for SCSS compatibility instead of using $ you can also format meta-selectors prefixed by eq_ . These are eq_this , eq_parent , eq_prev , and eq_next

:self selector class="self-selector" @element .self-selector input and (min-characters: 5) { :self, :self:focus { border-color: red; } }

:parent selector class="parent-selector" @element .parent-selector input and (min-characters: 5) { :self { border-color: red; } :parent { background: pink; } }

:prev selector class="prev-selector" @element .prev-selector [type=email] { :prev { border-color: red; } }

:next selector class="next-selector" @element .next-selector [type=text] { :next { border-color: red; } }

CSS Functions

eval("") Current Year: Viewport Size: @element .eval strong { :self:after { content: ' eval("new Date().getFullYear()")'; } } @element .eval em { :self:after { content: ' eval("window.innerWidth+' x '+window.innerHeight")'; } }

CSS Units

ew (element width) EW Units /* Element width units */ @element .ew { :self { font-size: 10ew; } }

eh (element height) EH Units /* Element height units */ @element .eh { :self { font-size: 10eh; } }

emin (element minimum) EMIN Units /* Element minimum units */ @element .emin { :self { font-size: 10emin; } }

emax (element maximum) EMAX Units /* Element maximum units */ @element .emax { :self { font-size: 10emax; } }

Element Query Demos

And view many more EQCSS demos on Codepen: Search EQCSS Codepen

Documentation & Tutorials

Further Reading

Similar Projects

Container Query Prolyfill Martin Auswöger

Grid Style Sheets AI Websites That Design Themselves

CSS Element Queries Proof-of-concept for high-speed element dimension/media queries in valid css

EQCSS in the News

License

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