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 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]-->
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"
{condition}
is composed of a measure and a value.{css}
can contain: Any valid CSS rule. (Ex:#id div { color: red }
)
Responsive Conditions
Use your mouse to resize the blocks
min-width in
min-width in %
max-width in px
max-width in %
min-height in px
min-height in %
max-height in px
max-height in %
min-characters on block elements
(Use keyboard)
max-characters on block elements
min-characters on form inputs
max-characters on form inputs
min-children
max-children
min-lines
max-lines
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.
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.
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.
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.
Scoped queries ($this)
Scoped queries + multiple conditions
Multiple conditions
Comments
Meta Selectors
$this
selector
$parent
selector
$root
selector
$prev
selector
$next
selector
CSS Functions
eval("")
Current Year:
Viewport Size:
Element Query Demos
- Alternating Blockquote Style
- Calendar with Element Queries
- Responsive Content Demo
- Counting Children Demo
- JavaScript-powered Date Demo
- Zastrow-style Element Query Demo Demo
- Scroll-triggered Flyout Demo
- Responsive Headline Demo
- Media Player with Element Queries
- Chat Message Style
- Modal Demo
- Nav Demo
- Next Element CSS Selector Demo
- Parent Selector Demo
- Previous Element CSS Selector Demo
- Pricing Chart Demo
- Responsive Tables Demo
- Scroll-triggered Blocker Demo
- Signup Form Demo
- Testimonials Block Demo
- Tweet-Counter Demo
- JS Variables Demo
- Responsive Scaling Demo
Documentation & Tutorials
- Element Queries For CSS
- EQCSS v1.0.0 Technical Documentation
- A Parent Selector for CSS
- It’s Time to think
Element-First
Further Reading
- Use Cases and Requirements for Element Queries Mat Marquis & Scott Jehl
- Media Queries Are Not The Answer: Element Query Polyfill Tyson Matanich
- Element Queries Tab Atkins Jr
- About HTML semantics and front-end architecture Nicholas Gallagher
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
- EQCSS featured in Net Magazine January 2016 issue, p. 106
- EQCSS featured in Lucas Wiener’s Master’s Thesis on Extensible Element Queries
- EQCSS featured in Phil Zatrow’s Element Query presentation at CSSDevConf2015
- EQCSS featured in Front-end Five’s podcast episode #23
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