EQCSS
A CSS Reprocessor for Element Queries & More
CSS Element Queries 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.
What are Element Queries?
Element queries are a new way of thinking about responsive web design in CSS where the responsive conditions apply to individual elements on the page instead of the width or height of the browser.
Unlike CSS @media
queries, @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 situations, like how many lines 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!
git clone https://github.com/eqcss/eqcss/archive/gh-pages.zip
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]-->
Alternatively, you can also grab EQCSS from npm with the following command:
npm install eqcss
Or from Yarn via
yarn add eqcss
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.7.0/EQCSS-polyfills.min.js
https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.7.0/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 syntax:
element_query = @element selector_list
[ condition_list ]
{ css_code
}
selector_list = " css_selector
[ "," css_selector ]*
"
condition_list = and ( query_condition
: value
) [ "and (" query_condition ":" value ")" ]*
value = number
[ css_unit ]
query_condition = min-height | max-height | min-width | max-width | min-characters | max-characters | min-lines | max-lines | min-children | max-children | min-scroll-y | max-scroll-y | min-scroll-x | max-scroll-x
css_unit = % | px | pt | em | cm | mm | rem | ex | ch | pc | vw | vh | vmin | vmax
An EQCSS element query is a container query that begins with "@element", followed by one or more CSS selectors (comma-separated) in quotes (either single or double quotes), followed by one or more optional responsive conditions comprised of a query condition and a value separated by a colon, followed by one or more optional CSS rules wrapped in curly brackets.
For more info, view more about EQCSS syntax here: https://gist.github.com/tomhodgins/6237039fa07c2e4b7acd1c8b0f9549a9
Element Query Conditions
Width-based Conditions
Height-based Conditions
Count-based Conditions
Scroll-based Conditions
Aspect-based Conditions
Meta-Selectors
(Alternatively, for SCSS compatibility you can also use meta-selectors prefixed by eq_
instead of a $
. These are eq_this
, eq_parent
, eq_root
, eq_prev
, and eq_next
)
CSS Functions
CSS Units
Element Query Demos
And view many more EQCSS demos on Codepen: EQCSS pens on Codepen
Documentation & Tutorials
Try it Live
Here's a link to the EQCSS REPL where you can try writing EQCSS-enhance CSS live in your browser and share a custom link with others: http://elementqueries.com/repl.html
Browser Support
Lowest Version Supported:
- IE 8+
- Edge 13+
- Safari 5.0+
- Firefox 3.6+
- Android 2.2+
- iOS 4+
- Windows Phone 8.1+
Lowest Version Tested: