Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

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.

About

An element query polyfill you can use today.

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.