Putting queries in the actual css selector

[tgecho]

I love the idea, but I would really love to define the queries in css rather then on the elements. I have a proof of concept working, but my javascript foo is weak, so I'm sure there is a ton of cleanup/performance work that can be done. https://github.com/tgecho/selector-queries/tree/css-selector

As of now I simply plugged a new findSelectorQueries() alongside the rest of the code, so it actually coexists nicely with element defined queries.

The basic idea:

1. Finds css selectors with the format of [query="min-width:10em"].
2. Store the query on any elements that match the selector minus the query.
   1. So .menu[query="min-width:10em"] li will have the query applied to anything that matches .menu.
3. The css selector is rewritten in the format of .menu.query-min-width-10em li.
4. The rest of your script takes care of the rest.

I think this would be better as a alternate version of the script instead of mixing two query definition styles, but it doesn't hurt to have them together for now.

Known and imagined issues:

1. Uses querySelectorAll to find elements that match the part of the rule before the query, so that will at least need some compatibility work for IE7.
2. .stacked.classes makes it IE6 unfriendly.
3. I have not yet tested combinations of multiple selectors per rule or more complicated selectors.
4. Multiple queries in one selector need to use a comma with no spaces as a separator (lazy on my splitting).
5. No support for multiple queries on different levels of a selector (.parent[query="..."] .child[query="..."]) ... but I think that's a little much to ask. :)

It's currently tested in at least the latest FF/Chrome/Safari/Opera and IE9.