An element query polyfill you can use today.
- Author: Tyson Matanich - http://matanich.com
- License: MIT
Demos:
- Grid - http://codepen.io/tysonmatanich/pen/johpn
- Menu - http://codepen.io/tysonmatanich/pen/wramd
- Blockquote - http://codepen.io/tysonmatanich/pen/jIBpJ
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;
}The following query types are supported: min-width, max-width, min-height, max-height.
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"]}});- JavaScript
- Sizzle (http://sizzlejs.com/) or jQuery (http://jquery.com/)
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.
[min-width~='10px'] selectors are not supported in IE6.