tysonmatanich / elementquery

An element query polyfill you can use today.

ElementQuery

An element query polyfill you can use today.

• Author: Tyson Matanich - http://matanich.com
• License: MIT

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

Demos:

• Grid - http://codepen.io/tysonmatanich/pen/johpn
• Menu - http://codepen.io/tysonmatanich/pen/wramd
• Blockquote - http://codepen.io/tysonmatanich/pen/jIBpJ

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

• JavaScript
• Sizzle (http://sizzlejs.com/) or jQuery (http://jquery.com/)

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.

elementquery's Issues

Won't work in Firefox: "SecurityError: The operation is insecure."

Hi!

Firefox 25.0.1.

elementQuery produces:

SecurityError: The operation is insecure.
http://localhost:4567/javascripts/vendor/elementQuery.js?body=1
Line 19

It works in other browsers.

Add support for stylesheets loaded with an @import

Thanks for the great library. I think it would be a good advancement to support styles loaded with "@import".

Preprocessor

Would it be possible to have a preprocessor that would take a css file with element queries in it, and output: a "pure" css file with classes instead of the queries, and a js file that contains the element queries and the new css classes they map to?

This would allow maintaining the queries in css whilst delivering pure CSS to the client and avoiding processing the css files in js on the client.

Hidden elements don't always respect their query properties.

Anything with display:none won't properly respect queries on page load -- a window-resize is then required for these objects to 'snap' into their proper dimensions/properties.

Perhaps a performant way around this problem would be to expose a refresh function to developers to be able to trigger the plugin manually?

Enable dynamic element query resize detection

On the off chance you want to add more dynamic sensing of element size changes, you may find this helpful: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

Wonky on using Maximize and restore

It's a great library, works well on resize(drag your window to different sizes). But Pretty wonky when maximize and restore buttons are used for browsers.

Tested on Chrome Version 55.0.2883.87

[enhancement] Add missing bower.json.

Hey, maintainer(s) of tysonmatanich/elementQuery!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library tysonmatanich/elementQuery is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "tysonmatanich/elementQuery",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Doent work in firefox

This doesn't work in firefox.

I have this error

SecurityError: The operation is insecure.
if (styleSheet[cssRules] && styleSheet[cssRules].length > 0) {

but even when changed to

if (styleSheet.lenght >0) {
The query doesn't work.

SASS

This is really interesting. Any ideas on how to make this work with SASS ?

Not firing until resize

Hey guys!

I can't get the plugin to style the element until the window resizes, I'm using Chrome 37.

Anybody else having this issue?

::before and ::after rules inside element query blocks cause Sizzle error

https://gist.github.com/itsravenous/8320654

The sizzle error thrown:

Uncaught Error: Syntax error, unrecognized expression: .menu li::after

Add support of the AMD modules.

I'll be nice to support the AMD for requireJS

Unregister Selectors

I'm going to use this in a production environment. Is there any chance you would either add, or accept a PR for unregistering selectors?

Use case: For a single page app, I'm thinking of writing a Grunt task that will create a JSON object with all of my possible selectors like this:

{
    ".elem1": {
        "min-width": [ "600px" ],
        "max-width": ["700px"]
    },
    ".elem2": {
        "min-height": ["20em"]
    },
    ".elem3": {
        "min-width": ["20em", "30em", "40em"]
    }
}

I'm not going to pass a laundry list of selectors to elementQuery, but instead, each of my Backbone Views will be responsible for:

1. Registering new elementQuery selectors used by the view and calling refresh() by passing true.
   • Basically, I will be listing the query selectors used for this view like elQueries: ['.elem1', '.elem2']
   • Just after the view has been rendered into the DOM, I will match the selectors from elQueries to the Grunt generated JSON object to register only selectors needed for a given view.
2. Unregistering elementQuery selectors that are no longer on the page (ie, when the view closes)

How does everyone feel about something like this?

processStyleSheet function needs to use try/catch to avoid “SecurityError: The operation is insecure.”

When elementQuery tries to load an external style sheet, some browsers will throw an error: “SecurityError: The operation is insecure.” -- this comment explains how to fix it.

The error is thrown from line 151 in the unminified source:
if (styleSheet[cssRules] && styleSheet[cssRules].length > 0) {

Using try/catch, we can detect this error and return instead of letting the script fail. The simplest way to do this is to add the following line right above the if-statement (add this line to line 151, pushing the if-statment to line 152)

try { styleSheet[cssRules].length; } catch(err) { return; }

With this in place, the security error and it’s side-effects will disappear.

Firefox situation

Hi,

Sorry for my bad english.

This script is great.

I have a situation, in Chrome run OK, but in Firefox not.

See the demo. You see an error in my code?

http://www.accuweatherglobal.com/AWG-Widget/test/widget/v.1.0.0/test.html

To Make Web Part Responsive

I am working on a SharePoint 2010 site. User can add more than one Web Part in a page and can resize a Web Part as per their requirement.

Is their anyway to make Web Part content responsive on each Web Part resize?

Any lead/help will be appreciated. Thanks in advance.

Bower support

Could you make this available via bower? We would love to use it without having to check the script into our code base.

Thank you!

Performance information

I'm looking at a handful of options around the idea of element queries. I just pulled your repo and did a small experiment that made me curious about performance.

Essentially, I generated 1000, then 2000, then 3000 DOM nodes with a single class using element queries just to test the impact on the page. A quick snippet:

<!-- using angular to make the DOM, class="tester" is the one node with the queries -->
  <div ng-controller="list.items">
    <div ng-repeat="item in list" layout row outline>
        <div outline>{{item.id}}</div>
        <div flex outline class="tester">{{item.random}}</div>
        <div outline>{{item.string}}</div>
    </div>
  </div>

The queries I used are the same as those from the README.md file, just changing header to .tester:

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

What I found was interesting.

• 1000 elements baseline is < 1 second to generate
• 1000 elements w/elementQuery added is 2-3 seconds to generate
• 2000 elements w/elementQuery added is 6-7 seconds to generate
• 3000 elements w/elementQuery added is 14-15 seconds to generate

So there is a pretty massive performance hit. At minimum this should probably be addressed in the README file.

Fire an event after elementQuery has finished

I'm using dotdotdot.js (multiple lines ellipsis) on blocks styled with elementQuery.
The problem is that I have to wait for elementQuery to finish its job if I want to apply dotdotdot.js.

I've added this on line 176 of the prod branch of elementQuery :

$.event.trigger({
    type:"elementQueriesDone",
});

And now I can apply dotdotdot.js when elementQuery has finished.

Don't now how to trigger an event without jQuery, sorry...

And thanks for this great polyfill