├── LICENSE
├── README.md
├── js-in-css.js
├── mixin.js
└── tests
    ├── container-queries.html
    ├── ie6-jsincss.html
    ├── ie7-jsincss.html
    └── ie8-jsincss.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Tommy Hodgins
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JS-in-CSS Patterns
 2 | 
 3 | Patterns for building simple Event-Driven Virtual Stylesheets. 100% CSS, plus the expressive power of JavaScript!
 4 | 
 5 | 
 6 | ## In this repository
 7 | 
 8 | There is a simple JS-in-CSS pattern that can be used for writing individual event-driven virtual stylesheets. You can write CSS code, as well as include JS template string interpolation to compose stylesheets, and trigger recalculations of those stylesheets by listening to JavaScript events.
 9 | 
10 | - [Simple JS-in-CSS Template](js-in-css.js)
11 | 
12 | In addition to writing stylesheets, since you can interpolate JavaScript at any point inside the virtual stylesheet you are able to easily extend your expressive ability by writing JavaScript functions that return CSS code as strings (sometimes in addition to doing other things). I call this writing 'mixins', and there is a very basic mixin pattern included here as well that forms the base of many useful mixins listed below.
13 | 
14 | - [Simple Mixin Template](mixin.js)
15 | 
16 | Last, to demonstrate some ways in which the JS-in-CSS patterns for writing event-driven virtual stylesheets can be used together with mixins to extend CSS's styling ability I've included a modern container queries demo page that shows off a wide variety of tests that are useful for styling:
17 | 
18 | - [Container Queries Demo using JS-in-CSS](tests/container-queries.html)
19 | 
20 | And to prove how simple and flexible these patterns are, I've included examples of JS-in-CSS patterns written for legacy versions of IE, demonstrating that this way of building sites has been possible for a long time already and doesn't rely on new features such as [Resize Observer](https://wicg.github.io/ResizeObserver) or [Houdini](http://ishoudinireadyyet.com) to achieve (though they will offer some amazing improvements some day!)
21 | 
22 | - [Container Queries with JS-in-CSS in IE8](tests/ie8-jsincss.html)
23 | - [Container Queries with JS-in-CSS in IE7](tests/ie7-jsincss.html)
24 | - [Container Queries with JS-in-CSS in IE6](tests/ie6-jsincss.html)
25 | 
26 | 
27 | ## Compatible Mixins
28 | 
29 | - [Cascading JS Variables](https://github.com/tomhodgins/cascading-js-variables)
30 | - [Container Queries Mixin](https://gist.github.com/tomhodgins/fc42b334beaafc75a271b1ef7c8e33ee) (stylesheet version with `$this`, functions as tests)
31 | - [reproCSS/ancestor-selector](https://github.com/tomhodgins/reprocss#ancestor-selector-mixin)
32 | - [reproCSS/aspect-ratio](https://github.com/tomhodgins/reprocss#aspect-ratio-mixin)
33 | - [reproCSS/auto-expand](https://github.com/tomhodgins/reprocss#auto-expand-mixin)
34 | - [reproCSS/closest-selector](https://github.com/tomhodgins/reprocss#closest-selector-mixin)
35 | - [reproCSS/container-queries](https://github.com/tomhodgins/reprocss#container-queries-mixin) (rule version, strings as tests)
36 | - [reproCSS/elder-selector](https://github.com/tomhodgins/reprocss#elder-selector-mixin)
37 | - [reproCSS/parent-selector](https://github.com/tomhodgins/reprocss#parent-selector-mixin)
38 | - [reproCSS/prev-selector](https://github.com/tomhodgins/reprocss#prev-selector-mixin)
39 | - [reproCSS/scoped-eval](https://github.com/tomhodgins/reprocss#scoped-eval-mixin)
40 | - [reproCSS/xpath-selector](https://github.com/tomhodgins/reprocss#xpath-selector-mixin)
41 | - [respec](https://github.com/tomhodgins/respec)
42 | 
43 | 
44 | ## Similar JS-in-CSS Patterns
45 | 
46 | ### [PrinCSS](https://gist.github.com/tomhodgins/1b7ac98825ed31afaae972a1b24bc03b)
47 | 
48 | Simple JSinCSS pattern with add, remove, and debounce functions
49 | 
50 | ### [reproCSS](https://github.com/tomhodgins/reprocss)
51 | 
52 | A JavaScript plugin that adds a `process=""` attribute to `<style>` tag in HTML, and makes it easy to reprocess JS-in-CSS on specific JavaScript events
53 | 
54 | ### [Skopein](https://gist.github.com/tomhodgins/8adce21101badac36f36c9205dd93f3b)
55 | 
56 | Scope `$this` in an external stylesheet to a selector (and events)
57 | 
58 | ### [interpolate ${} in CSS](https://gist.github.com/tomhodgins/b8697d6599b2cda60bb7e77e5f2387fe)
59 | 
60 | Interpolate JS anywhere in CSS with `${}` inside `<style>` innerHTML and `<link rel=stylesheet href>`
61 | 
62 | ### [JIC](https://codepen.io/tomhodgins/pen/EwLBza)
63 | 
64 | CSS with JS interpolation using `${}` written using external stylesheets (authored as CSS)
65 | 
66 | ### [Slinky](https://github.com/tomhodgins/slinky)
67 | 
68 | Add JavaScript tests to `<link>` tags to toggle stylesheets
69 | 
70 | 
71 | ## More Resources
72 | 
73 | - [Useful Tests for JS-Powered Styling](https://codepen.io/tomhodgins/post/useful-tests-for-js-powered-styling)
74 | - [Style Scoping Levels 1, 2, & 3](https://s.codepen.io/tomhodgins/debug/pWJNYw)
75 | - [Three Levels of Scoping (JS Code)](https://gist.github.com/tomhodgins/aba076662287b5badae2c0955672a9c2)
76 | - [Responsive.Style/Techniques](http://responsive.style/techniques)
77 | - [Responsive.Style/Plugins](http://responsive.style/plugins/)


--------------------------------------------------------------------------------
/js-in-css.js:
--------------------------------------------------------------------------------
 1 | // JS-in-CSS
 2 | 
 3 | function JSinCSS() {
 4 | 
 5 |   var tag = document.querySelector('#JSinCSS')
 6 | 
 7 |   if (!tag) {
 8 | 
 9 |     tag = document.createElement('style')
10 |     tag.id = 'JSinCSS'
11 |     document.head.appendChild(tag)
12 | 
13 |   }
14 | 
15 |   // The event-driven virtual stylesheet
16 |   tag.innerHTML = ``
17 | 
18 | }
19 | 
20 | // Reprocess 'JSinCSS' stylesheet on these events
21 | window.addEventListener('load', JSinCSS)
22 | window.addEventListener('resize', JSinCSS)
23 | window.addEventListener('input', JSinCSS)
24 | window.addEventListener('click', JSinCSS)


--------------------------------------------------------------------------------
/mixin.js:
--------------------------------------------------------------------------------
 1 | // JS-in-CSS Mixin Template
 2 | 
 3 | function mixin(selector, rule) {
 4 | 
 5 |   var tag = document.querySelectorAll(selector)
 6 |   var style = ''
 7 |   var count = 0
 8 | 
 9 |   for (var i=0; i<tag.length; i++) {
10 | 
11 |     var attr = selector.replace(/\W+/g, '')
12 | 
13 |     tag[i].setAttribute('data-mixin-' + attr, count)
14 | 
15 |     style += '\n[data-mixin-' + attr + '="' + count + '"] {\n'
16 |              + '  ' + rule + '\n'
17 |              + '}\n'
18 | 
19 |     count++
20 | 
21 |   }
22 | 
23 |   return style
24 | 
25 | }


--------------------------------------------------------------------------------
/tests/container-queries.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset=utf-8>
  3 | <meta name=viewport content="width=device-width, initial-scale=1">
  4 | <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel=stylesheet>
  5 | <link href=http://staticresource.com/data-buttons.css rel=stylesheet>
  6 | <title>Container Queries using JS-in-CSS</title>
  7 | 
  8 | <style>
  9 |   body style {
 10 |     display: block;
 11 |     width: 100%;
 12 |     padding: 1em;
 13 |     margin: 1em 0 2em 0;
 14 |     border-radius: 3px;
 15 |     font-size: 12pt;
 16 |     font-family: 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
 17 |     word-break: break-word;
 18 |     white-space: pre-wrap;
 19 |     font-kerning: auto;
 20 |     color: rgba(0,0,0,.7);
 21 |     background: transparent;
 22 |     border: 1px solid rgba(0,0,0,.3);
 23 |   }
 24 |   * {
 25 |     -webkit-box-sizing: border-box;
 26 |     -moz-box-sizing: border-box;
 27 |     box-sizing: border-box;
 28 |     text-rendering: optimizeLegibility;
 29 |     -webkit-font-smoothing: antialiased;
 30 |     -moz-osx-font-smoothing: grayscale;
 31 |     font-kerning: auto;
 32 |   }
 33 |   body {
 34 |     margin: 1em;
 35 |     font-family: 'Source Sans Pro', sans-serif;
 36 |   }
 37 |   [data-button] {
 38 |     display: block;
 39 |     margin: 1em 0;
 40 |   }
 41 |   div {
 42 |     display: inline-block;
 43 |     border-radius: .2em;
 44 |     padding: 1.5em;
 45 |     color: #555;
 46 |     font-size: 12pt;
 47 |     line-height: 1.4;
 48 |     background: #eee;
 49 |     border: 1px solid #ccc;
 50 |   }
 51 |   input,
 52 |   textarea {
 53 |     display: block;
 54 |     min-width: 250px;
 55 |     border-radius: .2em;
 56 |     margin: 1em;
 57 |     padding: .5em;
 58 |     color: #555;
 59 |     font-size: 12pt;
 60 |     background: white;
 61 |     border: 1px solid #ccc;
 62 |   }
 63 |   section {
 64 |     height: 300px;
 65 |     display: inline-block;
 66 |     border: 1px dotted black;
 67 |     padding: 1em;
 68 |   }
 69 |   img {
 70 |     max-width: 50px;
 71 |     box-shadow: rgba(0,0,0,.1) 0 .2em .5em;
 72 |   }
 73 |   img + img {
 74 |     margin-left: 1em;
 75 |   }
 76 |   p {
 77 |     font-size: 10pt;
 78 |     color: #555;
 79 |   }
 80 |   [class*=-scroll-x] {
 81 |     overflow-x: scroll;
 82 |   }
 83 |   [class*=-scroll-x] p {
 84 |     width: 200%;
 85 |   }
 86 |   [class*=-scroll-y] {
 87 |     height: 100px;
 88 |     overflow-y: scroll;
 89 |   }
 90 |   /* Drag Handles */
 91 |   [data-nubbin] {
 92 |     border: 1px solid rgba(0,0,0,.15);
 93 |     width: 30px;
 94 |     height: 30px;
 95 |     text-align: center;
 96 |     padding: 0;
 97 |     margin: 0;
 98 |     background: yellow;
 99 |     cursor: pointer;
100 |     z-index: 500;
101 |   }
102 |   [data-nubbin] i {
103 |     pointer-events: none;
104 |     color: black;
105 |     line-height: 30px;
106 |     font-size: 20px;
107 |   }
108 |   [data-drag] {
109 |     overflow: auto;
110 |   }
111 |   [data-drag=horizontal] {
112 |     resize: horizontal;
113 |   }
114 |   [data-drag=vertical] {
115 |     resize: vertical;
116 |   }
117 |   [data-drag=both] {
118 |     resize: both;
119 |   }
120 |   #ew, #eh, #emin, #emax {
121 |     min-width: 100px;
122 |     min-height: 100px;
123 |     width: 500px;
124 |     max-width: 100vw;
125 |     max-height: 100vh;
126 |   }
127 | </style>
128 | 
129 | <h1>Container Queries Demo</h1>
130 | 
131 | <h2>Width Queries</h2>
132 | 
133 | <h3>min-width</h3>
134 | <div class=minwidth data-drag=horizontal>class="minwidth"</div>
135 | 
136 | <h3>max-width</h3>
137 | <div class=maxwidth data-drag=horizontal>class="maxwidth"</div>
138 | 
139 | <h2>Height Queries</h2>
140 | 
141 | <h3>min-height</h3>
142 | <div class="minheight" data-drag=vertical>class="minheight"</div>
143 | 
144 | <h3>max-height</h3>
145 | <div class="maxheight" data-drag=vertical>class="maxheight"</div>
146 | 
147 | <h2>Quantity Queries</h2>
148 | 
149 | <h3>min-characters on block elements</h3>
150 | <p>(Use keyboard)</p>
151 | <div class="mincharacters" contenteditable>class="mincharacters"</div>
152 | 
153 | <h3>min-characters on form inputs</h3>
154 | <p>(Use keyboard)</p>
155 | <input type=text class="mincharacters-input" value='class="mincharacters-input"'>
156 | <textarea class="mincharacters-textarea">class="mincharacters-textarea"</textarea>
157 | 
158 | <h3>max-characters on block elements</h3>
159 | <p>(Use keyboard)</p>
160 | <div class="maxcharacters" contenteditable>class="maxcharacters"</div>
161 | 
162 | <h3>max-characters on form inputs</h3>
163 | <p>(Use keyboard)</p>
164 | <input type=text class="maxcharacters-input" value='class="maxcharacters-input"'>
165 | <textarea class="maxcharacters-textarea">class="maxcharacters-textarea"</textarea>
166 | 
167 | 
168 | <h3>min-children</h3>
169 | <button data-button="semiflat" onclick="var img=document.createElement('img');img.src='http://staticresource.s3.amazonaws.com/user.png';document.querySelector('.minchildren').appendChild(img);EQCSS.apply()">Add Child</button>
170 | <div class="minchildren">
171 | <img src=http://staticresource.s3.amazonaws.com/user.png style=width:50px>
172 | </div>
173 | 
174 | <h3>max-children</h3>
175 | <button data-button="semiflat" onclick="var img=document.createElement('img');img.src='http://staticresource.s3.amazonaws.com/user.png';document.querySelector('.maxchildren').appendChild(img);EQCSS.apply()">Add Child</button>
176 | <div class="maxchildren">
177 | <img src=http://staticresource.s3.amazonaws.com/user.png style=width:50px>
178 | </div>
179 | 
180 | <h2>Scroll queries</h2>
181 | 
182 | <h3>min-scroll-y</h3>
183 | <div class="min-scroll-y" onscroll=JSinCSS()>
184 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
185 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
186 | </div>
187 | 
188 | <h3>max-scroll-y</h3>
189 | <div class="max-scroll-y" onscroll=JSinCSS()>
190 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
191 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
192 | </div>
193 | 
194 | <h3>min-scroll-x</h3>
195 | <div class="min-scroll-x" onscroll=JSinCSS()>
196 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
197 | </div>
198 | 
199 | <h3>max-scroll-x</h3>
200 | <div class="max-scroll-x" onscroll=JSinCSS()>
201 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
202 | </div>
203 | 
204 | <h2>Aspect queries</h2>
205 | 
206 | <h3>orientation</h3>
207 | <div class="square" style="width: 100px; height: 100px;">100 &times; 100</div>
208 | <div class="portrait" style="width: 100px; height: 200px;">100 &times; 200</div>
209 | <div class="landscape" style="width: 200px; height: 100px;">200 &times; 100</div>
210 | 
211 | <h3>min-aspect-ratio</h3>
212 | <div class="minaspectratio" data-drag=both>class="minaspectratio"</div>
213 | 
214 | <h3>max-aspect-ratio</h3>
215 | <div class="maxaspectratio" data-drag=both>class="maxaspectratio"</div>
216 | 
217 | <script>
218 |   window.addEventListener('load', JSinCSS)
219 |   window.addEventListener('resize', JSinCSS)
220 |   window.addEventListener('input', JSinCSS)
221 |   window.addEventListener('click', JSinCSS)
222 | 
223 |   function JSinCSS() {
224 | 
225 |     var tag = document.querySelector('#JSinCSS')
226 | 
227 |     if (!tag) {
228 | 
229 |       tag = document.createElement('style')
230 |       tag.id = 'JSinCSS'
231 |       document.head.appendChild(tag)
232 | 
233 |     }
234 | 
235 |     tag.innerHTML = `
236 | 
237 |       /* Min-width */
238 |       ${containerQuery('.minwidth', el => el.offsetWidth >= 300, `
239 |         .minwidth {
240 |           background: greenyellow;
241 |           border-color: limegreen;
242 |         }
243 |       `)}
244 | 
245 |       /* Max-width in px */
246 |       ${containerQuery('.maxwidth', el => el.offsetWidth <= 300, `
247 |         .maxwidth {
248 |           background: greenyellow;
249 |           border-color: limegreen;
250 |         }
251 |       `)}
252 | 
253 |       /* Min-height in px */
254 |       ${containerQuery('.minheight', el => el.offsetHeight >= 200, `
255 |         .minheight {
256 |           background: greenyellow;
257 |           border-color: limegreen;
258 |         }
259 |       `)}
260 | 
261 |       /* Max-height in px */
262 |       ${containerQuery('.maxheight', el => el.offsetHeight <= 200, `
263 |         .maxheight {
264 |           background: greenyellow;
265 |           border-color: limegreen;
266 |         }
267 |       `)}
268 | 
269 |       /* Min-characters on block elements */
270 |       ${containerQuery('.mincharacters', el => el.textContent.length >= 35, `
271 |         .mincharacters {
272 |           background: greenyellow;
273 |           border-color: limegreen;
274 |         }
275 |       `)}
276 | 
277 |       /* Min-characters on input */
278 |       ${containerQuery('.mincharacters-input', el => el.value.length >= 35, `
279 |         .mincharacters-input {
280 |           background: greenyellow;
281 |           border-color: limegreen;
282 |         }
283 |       `)}
284 | 
285 |       /* Min-characters on textarea */
286 |       ${containerQuery('.mincharacters-textarea', el => el.value.length >= 35, `
287 |         .mincharacters-textarea {
288 |           background: greenyellow;
289 |           border-color: limegreen;
290 |         }
291 |       `)}
292 | 
293 |       /* Max-characters */
294 |       ${containerQuery('.maxcharacters', el => el.textContent.length <= 35, `
295 |         .maxcharacters {
296 |           background: greenyellow;
297 |           border-color: limegreen;
298 |         }
299 |       `)}
300 | 
301 |       /* Max-characters on input */
302 |       ${containerQuery('.maxcharacters-input', el => el.value.length <= 35, `
303 |         .maxcharacters-input {
304 |           background: greenyellow;
305 |           border-color: limegreen;
306 |         }
307 |       `)}
308 | 
309 |       /* Max-characters on textarea */
310 |       ${containerQuery('.maxcharacters-textarea', el => el.value.length <= 35, `
311 |         .maxcharacters-textarea {
312 |           background: greenyellow;
313 |           border-color: limegreen;
314 |         }
315 |       `)}
316 | 
317 |       /* Min-children */
318 |       ${containerQuery('.minchildren', el => el.children.length >= 5, `
319 |         .minchildren {
320 |           background: greenyellow;
321 |           border-color: limegreen;
322 |         }
323 |       `)}
324 | 
325 |       /* Max-children */
326 |       ${containerQuery('.maxchildren', el => el.children.length <= 5, `
327 |         .maxchildren {
328 |           background: greenyellow;
329 |           border-color: limegreen;
330 |         }
331 |       `)}
332 | 
333 |       /* Min-scroll-y */
334 |       ${containerQuery('.min-scroll-y', el => el.scrollTop >= 50, `
335 |         .min-scroll-y {
336 |           background: greenyellow;
337 |           border-color: limegreen;
338 |         }
339 |       `)}
340 | 
341 |       /* Max-scroll-y */
342 |       ${containerQuery('.max-scroll-y', el => el.scrollTop <= 50, `
343 |         .max-scroll-y {
344 |           background: greenyellow;
345 |           border-color: limegreen;
346 |         }
347 |       `)}
348 | 
349 |       /* Min-scroll-x */
350 |       ${containerQuery('.min-scroll-x', el => el.scrollLeft >= 50, `
351 |         .min-scroll-x {
352 |           background: greenyellow;
353 |           border-color: limegreen;
354 |         }
355 |       `)}
356 | 
357 |       /* Max-scroll-x */
358 |       ${containerQuery('.max-scroll-x', el => el.scrollLeft <= 50, `
359 |         .max-scroll-x {
360 |           background: greenyellow;
361 |           border-color: limegreen;
362 |         }
363 |       `)}
364 | 
365 | 
366 |       /* Square Orientation */
367 |       ${containerQuery('.square', el => el.offsetWidth == el.offsetHeight, `
368 |         .square {
369 |           background: orchid;
370 |         }
371 |       `)}
372 | 
373 |       /* Portrait Orientation */
374 |       ${containerQuery('.portrait', el => el.offsetWidth < el.offsetHeight, `
375 |         .portrait {
376 |           background: darkturquoise;
377 |         }
378 |       `)}
379 | 
380 |       /* Landscape Orientation */
381 |       ${containerQuery('.landscape', el => el.offsetWidth > el.offsetHeight, `
382 |         .landscape {
383 |           background: greenyellow;
384 |         }
385 |       `)}
386 | 
387 | 
388 |       /* Min-aspect ratio */
389 |       ${containerQuery('.minaspectratio', el => el.offsetWidth / el.offsetHeight > 16/9, `
390 |         .minaspectratio {
391 |           background: greenyellow;
392 |           border-color: limegreen;
393 |         }
394 |       `)}
395 | 
396 |       /* Max-aspect-ratio */
397 |       ${containerQuery('.maxaspectratio', el => el.offsetWidth / el.offsetHeight < 16/9, `
398 |         .maxaspectratio {
399 |           background: greenyellow;
400 |           border-color: limegreen;
401 |         }
402 |       `)}
403 | 
404 |     `
405 | 
406 |   }
407 | 
408 |   function containerQuery(selector, test, stylesheet) {
409 | 
410 |     var tag = document.querySelectorAll(selector)
411 |     var style = ''
412 |     var count = 0
413 | 
414 |     for (var i=0; i<tag.length; i++) {
415 | 
416 |       var attr = (selector+test).replace(/\W+/g, '')
417 | 
418 |       if (test(tag[i])) {
419 | 
420 |         tag[i].setAttribute(`data-${attr}`, count)
421 | 
422 |         var css = stylesheet.replace(/\$this/g, `[data-${attr}="${count}"]`)
423 | 
424 |         style += css
425 | 
426 |         count++
427 | 
428 |       } else {
429 | 
430 |         tag[i].setAttribute(`data-${attr}`, '')
431 | 
432 |       }
433 | 
434 |     }
435 | 
436 |     return style
437 | 
438 |   }
439 | </script>
440 | 
441 | <script>
442 |   // Drag Handles for Touchscreen Users
443 |   if(('ontouchstart' in window)||(navigator.msMaxTouchPoints>0)){
444 |     var tag = document.querySelectorAll('[data-drag]')
445 |     for(i=0;i<tag.length;i++){
446 |       var direction = tag[i].getAttribute('data-drag') || 'both'
447 |       tag[i].setAttribute('data-container',i)
448 |       spawnNubbin(i,direction)
449 |     }
450 |     function spawnNubbin(element,direction){
451 |       var parent = document.querySelector('[data-container="'+element+'"]'),
452 |           pTop = parent.scrollHeight - 20,
453 |           pLeft = parent.scrollWidth - 20,
454 |           nubbin = document.createElement('div')
455 |       nubbin.setAttribute('data-nubbin',element)
456 |       parent.style.position = 'relative'
457 |       parent.style.overflow = 'inherit'
458 |       nubbin.style.position = 'absolute'
459 |       nubbin.style.top = pTop+'px'
460 |       nubbin.style.left = pLeft+'px'
461 |       nubbin.setAttribute('data-max-top',pTop)
462 |       nubbin.setAttribute('data-max-left',pLeft)
463 |       if (direction == 'horizontal'){
464 |         nubbin.innerHTML = '<i class="fa fa-arrows-h"></i>'
465 |       }
466 |       if (direction == 'vertical'){
467 |         nubbin.innerHTML = '<i class="fa fa-arrows-v"></i>'
468 |       }
469 |       if (direction == 'both'){
470 |         nubbin.innerHTML = '<i class="fa fa-arrows"></i>'
471 |       }
472 |       document.addEventListener('mousedown',grab)
473 |       document.addEventListener('touchstart',grab)
474 |       document.addEventListener('mousemove',drag)
475 |       document.addEventListener('touchmove',drag)
476 |       document.addEventListener('mouseup',drop)
477 |       document.addEventListener('touchend',drop)
478 |       parent.appendChild(nubbin)
479 |     }
480 |     var grabbed
481 |     var startX = startY = oldTop = oldLeft = 0
482 |     function grab(e){
483 |       if (e.target.getAttribute('data-nubbin')){
484 |         e.preventDefault()
485 |         grabbed = e.target.getAttribute('data-nubbin')
486 |         startX = e.clientX || e.touches[0].clientX
487 |         startY = e.clientY || e.touches[0].clientY
488 |         oldTop = parseInt(e.target.style.top.split('px')[0]) || 0
489 |         oldLeft = parseInt(e.target.style.left.split('px')[0]) || 0
490 |       }
491 |     }
492 |     function drag(e){
493 |       if (grabbed){
494 |         if (e.target.getAttribute('data-nubbin')){
495 |           var nubbin = document.querySelector('[data-nubbin="'+grabbed+'"]'),
496 |               parent = e.target.parentNode,
497 |               direction = parent.getAttribute('data-drag'),
498 |               pTop = parent.scrollHeight,
499 |               pLeft = parent.scrollWidth,
500 |               newTop = oldTop+parseInt((e.clientY||e.touches[0].clientY)-startY),
501 |               newLeft = oldLeft+parseInt((e.clientX||e.touches[0].clientX)-startX),
502 |               maxTop = parseInt(nubbin.getAttribute('data-max-top')),
503 |               maxLeft = parseInt(nubbin.getAttribute('data-max-left')),
504 |               filterTop = newTop>=maxTop?newTop:maxTop,
505 |               filterLeft = newLeft>=maxLeft?newLeft:maxLeft
506 |           if (direction == 'vertical' || direction == 'both'){
507 |             nubbin.style.top = filterTop + 'px'
508 |             parent.style.height = newTop>maxTop?newTop+15+'px':maxTop+15+'px'
509 |           }
510 |           if (direction == 'horizontal' || direction == 'both'){
511 |             nubbin.style.left = filterLeft + 'px'
512 |             parent.style.width = newLeft>maxLeft?newLeft+15+'px':maxLeft+15+'px'
513 |           }
514 |           JSinCSS()
515 |         }
516 |       }
517 |     }
518 |     function drop(e){
519 |       grabbed = undefined
520 |       JSinCSS()
521 |     }
522 |   }
523 | </script>
524 | <script>
525 |   // Apply JS-in-CSS during mouse drags
526 |   var resizing = false
527 | 
528 |   window.addEventListener('mousedown', function() {
529 | 
530 |     resizing = true
531 | 
532 |   })
533 | 
534 |   window.addEventListener('mousemove', function() {
535 | 
536 |     if (resizing === true) {
537 | 
538 |       JSinCSS()
539 | 
540 |     }
541 | 
542 |   })
543 | 
544 |   window.addEventListener('mouseup', function() {
545 | 
546 |     resizing = false
547 |     JSinCSS()
548 | 
549 |   })
550 | 
551 | </script>


--------------------------------------------------------------------------------
/tests/ie6-jsincss.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2 |         "http://www.w3.org/TR/html4/strict.dtd">
  3 | <html>
  4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5 | <head>
  6 |   <title>JSinCSS in IE6</title>
  7 | 
  8 |   <!-- IE Polyfills for addEventListener() and querySelectorAll() -->
  9 |   <script>
 10 |     /*
 11 |      * addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
 12 |      * Forked from http://css-tricks.com/snippets/javascript/addeventlistner-polyfill/
 13 |      * Adds the native DOM2 function addEventListener on IE6 - 8.
 14 |      */
 15 | 
 16 |     (function (win, doc) {
 17 | 
 18 |       // If the function already exists, no need to polyfill
 19 |       if (win.addEventListener) return;
 20 | 
 21 |       function docHijack(p) {
 22 |         var old = doc[p];
 23 |         doc[p] = function (v) {
 24 |           return addListen(old(v))
 25 |         }
 26 |       }
 27 |       function addEvent(on, fn, self) {
 28 |         return (self = this).attachEvent('on' + on, function(e) {
 29 |           var e = e || win.event;
 30 |           e.preventDefault  = e.preventDefault  || function(){e.returnValue = false}
 31 |           e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
 32 |           try {
 33 |             fn.call(self, e);
 34 |           }
 35 |           catch (e) {}
 36 |         });
 37 |       }
 38 |       function addListen(obj, i) {
 39 |         if (i = obj.length) while (i--) obj[i].addEventListener = addEvent;
 40 |         else obj.addEventListener = addEvent;
 41 |         return obj;
 42 |       }
 43 |       addListen([doc, win]);
 44 |       if ('Element' in win) win.Element.prototype.addEventListener = addEvent;      // IE8
 45 |       else{                                                                       // IE < 8
 46 |         doc.attachEvent('onreadystatechange', function(){addListen(doc.all)});    // Make sure we also init at domReady
 47 |         docHijack('getElementsByTagName');
 48 |         docHijack('getElementById');
 49 |         docHijack('createElement');
 50 |         addListen(doc.all);
 51 |       }
 52 |     })(window, document);
 53 | 
 54 |     /*
 55 |      * document.querySelector and querySelectorAll polyfill / Maxime Euzière / public domain
 56 |      * Forked from: http://xem.github.io/Lazy/
 57 |      * Adds basic DOM selection on IE6-8 (selection by tag, class or id only)
 58 |      */
 59 | 
 60 |     (function(doc) {
 61 |       if (doc.querySelectorAll) return;
 62 | 
 63 |       doc.querySelectorAll = function(a) {
 64 |         if ("#" == a.charAt(0)) return [doc.getElementById(a.substr(1))];
 65 |         if ("." == a.charAt(0)) return doc.getElementsByClassName(a.substr(1));
 66 |         return doc.getElementsByTagName(a);
 67 |       }
 68 | 
 69 |       doc.querySelector = function(a) {
 70 |         return querySelectorAll(a)[0];
 71 |       }
 72 |     })(document);
 73 |   </script>
 74 | 
 75 |   <!-- JS-in-CSS with Container Queries Mixin -->
 76 |   <script>
 77 |     window.addEventListener('load', JSinCSS)
 78 |     window.addEventListener('resize', JSinCSS)
 79 |     document.documentElement.addEventListener('keydown', JSinCSS)
 80 |     document.documentElement.addEventListener('keyup', JSinCSS)
 81 |     document.documentElement.addEventListener('mousedown', JSinCSS)
 82 |     document.documentElement.addEventListener('mouseup', JSinCSS)
 83 | 
 84 |     function JSinCSS(e) {
 85 | 
 86 | 
 87 |       var styleTag = document.getElementsByTagName('style')
 88 |       var tag
 89 | 
 90 |       for (var i=0; i<styleTag.length; i++) {
 91 | 
 92 |         if (styleTag[i].id == 'JSinCSS') {
 93 | 
 94 |           tag = styleTag[i]
 95 | 
 96 |         }
 97 | 
 98 |       }
 99 | 
100 |       if (!tag) {
101 | 
102 |         tag = document.createElement('style')
103 |         tag.id = 'JSinCSS'
104 |         document.getElementsByTagName('head')[0].appendChild(tag)
105 | 
106 |       }
107 | 
108 |       var css = ''
109 | 
110 |       css += containerQuery('input', 'this.value.length > 5', '$this { background: lime; }')
111 | 
112 |       css += containerQuery('div', 'this.offsetWidth > 500', '$this { background: blue; margin: 1em 0; }')
113 | 
114 |       if (tag.styleSheet) {
115 | 
116 |         tag.styleSheet.cssText = css
117 | 
118 |       } else {
119 | 
120 |         tag.innerHTML = css
121 | 
122 |       }
123 | 
124 |       return true
125 | 
126 |     }
127 | 
128 |     function containerQuery(selector, test, stylesheet) {
129 | 
130 |       var tag = document.querySelectorAll(selector)
131 |       var style = ''
132 |       var count = 0
133 | 
134 |       for (var i=0; i<tag.length; i++) {
135 | 
136 |         var attr = (selector+test).replace(/[= "'<>+.]/g, '')
137 | 
138 |         var func = new Function('return ' + test)
139 | 
140 |         if (func.call(tag[i])) {
141 | 
142 |           var element = '.' + attr + count
143 |           var css = stylesheet.replace(/\$this/g, element)
144 | 
145 |           tag[i].className = (attr + count)
146 | 
147 |           style += css + '\n'
148 | 
149 |           count++
150 | 
151 |         } else {
152 | 
153 |           tag[i].className = ''
154 | 
155 |         }
156 | 
157 |       }
158 | 
159 |       return style
160 | 
161 |     }
162 |   </script>
163 | </head>
164 | <body>
165 | 
166 |   <p>Type more than 5 characters into the INPUT below:</p>
167 |   <input>
168 |   <input>
169 | 
170 |   <p>DIVs below blue if wider than 500px</p>
171 |   <div style="width: 100%">100% wide</div>
172 |   <div style="width: 66.66%">66.6% wide</div>
173 |   <div style="width: 33.33%">33.33% wide</div>
174 | 
175 | </body>
176 | </html>


--------------------------------------------------------------------------------
/tests/ie7-jsincss.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2 |         "http://www.w3.org/TR/html4/strict.dtd">
  3 | <html>
  4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5 | <head>
  6 |   <title>JSinCSS in IE7</title>
  7 | 
  8 |   <!-- IE Polyfills for addEventListener() and querySelectorAll() -->
  9 |   <script>
 10 |     /*
 11 |      * addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
 12 |      * Forked from http://css-tricks.com/snippets/javascript/addeventlistner-polyfill/
 13 |      * Adds the native DOM2 function addEventListener on IE6 - 8.
 14 |      */
 15 | 
 16 |     (function (win, doc) {
 17 | 
 18 |       // If the function already exists, no need to polyfill
 19 |       if (win.addEventListener) return;
 20 | 
 21 |       function docHijack(p) {
 22 |         var old = doc[p];
 23 |         doc[p] = function (v) {
 24 |           return addListen(old(v))
 25 |         }
 26 |       }
 27 |       function addEvent(on, fn, self) {
 28 |         return (self = this).attachEvent('on' + on, function(e) {
 29 |           var e = e || win.event;
 30 |           e.preventDefault  = e.preventDefault  || function(){e.returnValue = false}
 31 |           e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
 32 |           try {
 33 |             fn.call(self, e);
 34 |           }
 35 |           catch (e) {}
 36 |         });
 37 |       }
 38 |       function addListen(obj, i) {
 39 |         if (i = obj.length) while (i--) obj[i].addEventListener = addEvent;
 40 |         else obj.addEventListener = addEvent;
 41 |         return obj;
 42 |       }
 43 |       addListen([doc, win]);
 44 |       if ('Element' in win) win.Element.prototype.addEventListener = addEvent;      // IE8
 45 |       else{                                                                       // IE < 8
 46 |         doc.attachEvent('onreadystatechange', function(){addListen(doc.all)});    // Make sure we also init at domReady
 47 |         docHijack('getElementsByTagName');
 48 |         docHijack('getElementById');
 49 |         docHijack('createElement');
 50 |         addListen(doc.all);
 51 |       }
 52 |     })(window, document);
 53 | 
 54 |     /*
 55 |      * document.querySelector and querySelectorAll polyfill / Maxime Euzière / public domain
 56 |      * Forked from: http://xem.github.io/Lazy/
 57 |      * Adds basic DOM selection on IE6-8 (selection by tag, class or id only)
 58 |      */
 59 | 
 60 |     (function(doc) {
 61 |       if (doc.querySelectorAll) return;
 62 | 
 63 |       doc.querySelectorAll = function(a) {
 64 |         if ("#" == a.charAt(0)) return [doc.getElementById(a.substr(1))];
 65 |         if ("." == a.charAt(0)) return doc.getElementsByClassName(a.substr(1));
 66 |         return doc.getElementsByTagName(a);
 67 |       }
 68 | 
 69 |       doc.querySelector = function(a) {
 70 |         return querySelectorAll(a)[0];
 71 |       }
 72 |     })(document);
 73 |   </script>
 74 | 
 75 |   <!-- JS-in-CSS with Container Queries Mixin -->
 76 |   <script>
 77 |     window.addEventListener('load', JSinCSS)
 78 |     window.addEventListener('resize', JSinCSS)
 79 |     document.documentElement.addEventListener('keydown', JSinCSS)
 80 |     document.documentElement.addEventListener('keyup', JSinCSS)
 81 |     document.documentElement.addEventListener('mousedown', JSinCSS)
 82 |     document.documentElement.addEventListener('mouseup', JSinCSS)
 83 | 
 84 |     function JSinCSS(e) {
 85 | 
 86 |       var styleTag = document.getElementsByTagName('style')
 87 |       var tag
 88 | 
 89 |       for (var i=0; i<styleTag.length; i++) {
 90 | 
 91 |         if (styleTag[i].id == 'JSinCSS') {
 92 | 
 93 |           tag = styleTag[i]
 94 | 
 95 |         }
 96 | 
 97 |       }
 98 | 
 99 |       if (!tag) {
100 | 
101 |         tag = document.createElement('style')
102 |         tag.id = 'JSinCSS'
103 |         document.getElementsByTagName('head')[0].appendChild(tag)
104 | 
105 |       }
106 | 
107 | 
108 |       var css = ''
109 | 
110 |       css += containerQuery('input', 'this.value.length > 5', '$this { background: lime; }')
111 | 
112 |       css += containerQuery('div', 'this.offsetWidth > 500', '$this { background: blue; margin: 1em 0; }')
113 | 
114 |       if (tag.styleSheet) {
115 | 
116 |         tag.styleSheet.cssText = css
117 | 
118 |       } else {
119 | 
120 |         tag.innerHTML = css
121 | 
122 |       }
123 | 
124 |       return true
125 | 
126 |     }
127 | 
128 |     function containerQuery(selector, test, stylesheet) {
129 | 
130 |       var tag = document.querySelectorAll(selector)
131 |       var style = ''
132 |       var count = 0
133 | 
134 |       for (var i=0; i<tag.length; i++) {
135 | 
136 |         var attr = (selector+test).replace(/[= "'<>+.]/g, '')
137 | 
138 |         var func = new Function('return ' + test)
139 | 
140 |         if (func.call(tag[i])) {
141 | 
142 |           var element = '[data-' + attr + '="' + count + '"]'
143 |           var css = stylesheet.replace(/\$this/g, element)
144 | 
145 |           tag[i].setAttribute('data-' + attr, count)
146 | 
147 |           style += css
148 | 
149 |           count++
150 | 
151 |         } else {
152 | 
153 |           tag[i].setAttribute('data-' + attr, '')
154 | 
155 |         }
156 | 
157 |       }
158 | 
159 |       return style
160 | 
161 |     }
162 |   </script>
163 | </head>
164 | <body>
165 | 
166 |   <p>Type more than 5 characters into the INPUT below:</p>
167 |   <input>
168 |   <input>
169 | 
170 |   <p>DIVs below blue if wider than 500px</p>
171 |   <div style="width: 100%">100% wide</div>
172 |   <div style="width: 66.66%">66.6% wide</div>
173 |   <div style="width: 33.33%">33.33% wide</div>
174 | 
175 | </body>
176 | </html>


--------------------------------------------------------------------------------
/tests/ie8-jsincss.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2 |         "http://www.w3.org/TR/html4/strict.dtd">
  3 | <html>
  4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5 | <head>
  6 |   <title>JSinCSS in IE8</title>
  7 | 
  8 |   <!-- IE8 Polyfills for addEventListener() and querySelectorAll() -->
  9 |   <script>
 10 |     /*
 11 |      * addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
 12 |      * Forked from http://css-tricks.com/snippets/javascript/addeventlistner-polyfill/
 13 |      * Adds the native DOM2 function addEventListener on IE6 - 8.
 14 |      */
 15 | 
 16 |     (function (win, doc) {
 17 | 
 18 |       // If the function already exists, no need to polyfill
 19 |       if (win.addEventListener) return;
 20 | 
 21 |       function docHijack(p) {
 22 |         var old = doc[p];
 23 |         doc[p] = function (v) {
 24 |           return addListen(old(v))
 25 |         }
 26 |       }
 27 |       function addEvent(on, fn, self) {
 28 |         return (self = this).attachEvent('on' + on, function(e) {
 29 |           var e = e || win.event;
 30 |           e.preventDefault  = e.preventDefault  || function(){e.returnValue = false}
 31 |           e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
 32 |           try {
 33 |             fn.call(self, e);
 34 |           }
 35 |           catch (e) {}
 36 |         });
 37 |       }
 38 |       function addListen(obj, i) {
 39 |         if (i = obj.length) while (i--) obj[i].addEventListener = addEvent;
 40 |         else obj.addEventListener = addEvent;
 41 |         return obj;
 42 |       }
 43 |       addListen([doc, win]);
 44 |       if ('Element' in win) win.Element.prototype.addEventListener = addEvent;      // IE8
 45 |       else{                                                                       // IE < 8
 46 |         doc.attachEvent('onreadystatechange', function(){addListen(doc.all)});    // Make sure we also init at domReady
 47 |         docHijack('getElementsByTagName');
 48 |         docHijack('getElementById');
 49 |         docHijack('createElement');
 50 |         addListen(doc.all);
 51 |       }
 52 |     })(window, document);
 53 | 
 54 |     /*
 55 |      * document.querySelector and querySelectorAll polyfill / Maxime Euzière / public domain
 56 |      * Forked from: http://xem.github.io/Lazy/
 57 |      * Adds basic DOM selection on IE6-8 (selection by tag, class or id only)
 58 |      */
 59 | 
 60 |     (function(doc) {
 61 |       if (doc.querySelectorAll) return;
 62 | 
 63 |       doc.querySelectorAll = function(a) {
 64 |         if ("#" == a.charAt(0)) return [doc.getElementById(a.substr(1))];
 65 |         if ("." == a.charAt(0)) return doc.getElementsByClassName(a.substr(1));
 66 |         return doc.getElementsByTagName(a);
 67 |       }
 68 | 
 69 |       doc.querySelector = function(a) {
 70 |         return querySelectorAll(a)[0];
 71 |       }
 72 |     })(document);
 73 |   </script>
 74 | 
 75 |   <!-- JS-in-CSS with Container Queries Mixin -->
 76 |   <script>
 77 |     window.addEventListener('load', JSinCSS)
 78 |     window.addEventListener('resize', JSinCSS)
 79 |     document.documentElement.addEventListener('keydown', JSinCSS)
 80 |     document.documentElement.addEventListener('keyup', JSinCSS)
 81 |     document.documentElement.addEventListener('mousedown', JSinCSS)
 82 |     document.documentElement.addEventListener('mouseup', JSinCSS)
 83 | 
 84 |     function JSinCSS(e) {
 85 | 
 86 |       var tag = document.querySelector('#JSinCSS')
 87 | 
 88 |       if (!tag) {
 89 | 
 90 |         tag = document.createElement('style')
 91 |         tag.id = 'JSinCSS'
 92 |         document.getElementsByTagName('head')[0].appendChild(tag)
 93 | 
 94 |       }
 95 | 
 96 |       var css = ''
 97 | 
 98 |       css += containerQuery('input', 'this.value.length > 5', '$this { background: lime; }')
 99 | 
100 |       css += containerQuery('div', 'this.offsetWidth > 500', '$this { background: blue; margin: 1em 0; }')
101 | 
102 |       if (tag.styleSheet) {
103 | 
104 |         tag.styleSheet.cssText = css
105 | 
106 |       } else {
107 | 
108 |         tag.innerHTML = css
109 | 
110 |       }
111 | 
112 |       return true
113 | 
114 |     }
115 | 
116 |     function containerQuery(selector, test, stylesheet) {
117 | 
118 |       var tag = document.querySelectorAll(selector)
119 |       var style = ''
120 |       var count = 0
121 | 
122 |       for (var i=0; i<tag.length; i++) {
123 | 
124 |         var attr = (selector+test).replace(/[= "'<>+.]/g, '')
125 | 
126 |         var func = new Function('return ' + test)
127 | 
128 |         if (func.call(tag[i])) {
129 | 
130 |           var element = '[data-' + attr + '="' + count + '"]'
131 |           var css = stylesheet.replace(/\$this/g, element)
132 | 
133 |           tag[i].setAttribute('data-' + attr, count)
134 | 
135 |           style += css
136 | 
137 |           count++
138 | 
139 |         } else {
140 | 
141 |           tag[i].setAttribute('data-' + attr, '')
142 | 
143 |         }
144 | 
145 |       }
146 | 
147 |       return style
148 | 
149 |     }
150 |   </script>
151 | </head>
152 | <body>
153 | 
154 |   <p>Type more than 5 characters into the INPUT below:</p>
155 |   <input>
156 |   <input>
157 | 
158 |   <p>DIVs below blue if wider than 500px</p>
159 |   <div style="width: 100%">100% wide</div>
160 |   <div style="width: 66.66%">66.6% wide</div>
161 |   <div style="width: 33.33%">33.33% wide</div>
162 | 
163 | </body>
164 | </html>


--------------------------------------------------------------------------------