EQCSS is a CSS reprocessor that introduces Element Queries, Scoped CSS, selectors for parent, next, and previous elements to all browsers IE8 and up
npm install eqcss
A CSS Reprocessor for Element Queries & More
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 Spec Repository on Github
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.
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!
#### Download EQCSS Zip
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
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:
Alternatively, you can also grab EQCSS from npm with the following command:
npm install eqcss
Or from Yarn via
yarn add eqcss
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
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