Skip to content
An element query polyfill you can use today.
JavaScript
Latest commit f3e328c Jun 25, 2013 @tysonmatanich Merge pull request #2 from crdx/patch-1
Fix broken links in readme
Failed to load latest commit information.
external Pushing to GitHub Jun 25, 2013
.gitattributes Pushing to GitHub Jun 25, 2013
.gitignore Pushing to GitHub Jun 25, 2013
README.md Fix broken links in readme Jun 25, 2013
elementQuery.js Pushing to GitHub Jun 25, 2013
elementQuery.min.js Pushing to GitHub Jun 25, 2013

README.md

ElementQuery

An element query polyfill you can use today.

Article: http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/

Demos:

Syntax

This rule queries itself for a single condition:

header[min-width~="500px"] {
    background-color: #eee;
}

This rule queries itself for multiple conditions:

header[min-width~="500px"][max-width~="800px"] {
    background-color: #eee;
}

This rule queries a parent for a condition:

header[min-width~="31.250em"] nav {
    clear: both;
}

This rule queries itself and a parent for conditions:

header[min-width~="31.250em"] nav[min-height~="1em"] {
    color: #333;
}

Query types

The following query types are supported: min-width, max-width, min-height, max-height.

Selector registration

The master branch of elementQuery will parse your style sheets, however if you have cross-domain style sheets you will have to manualy register your selectors. The prod branch requires the selector information to be declared in JavaScript, which avoids the cross-domain file issue and the time required to parse the style sheets.

Here is an example of how to export elementQuery selector information using the master branch:

console.log(JSON.stringify(elementQuery.selectors()));

And here is an example of how to import elementQuery selector information using the prod branch:

elementQuery({"header":{"min-width":["500px","31.250em"],"max-width":["800px"]}});

Requirements

Size and delivery

Currently, the master branch of elementQuery.js compresses to around 2367 bytes (~2.3 KB) and the prod branch of elementQuery.js compresses to around 1788 bytes (~1.7 KB), after minify and gzip.

To minify, you might try these online tools: Microsoft Ajax Minifier, Uglify, Yahoo Compressor, or Closure Compiler. Serve with gzip compression.

Support

[min-width~='10px'] selectors are not supported in IE6.

Something went wrong with that request. Please try again.