| Up to higher level directory | |||
| Name | Date | Size | |
|---|---|---|---|
| bower.json | 24-Aug-2016 | 276 | |
| Gruntfile.js | 24-Aug-2016 | 311 | |
| LICENSE | 24-Aug-2016 | 1K | |
| package.json | 24-Aug-2016 | 715 | |
| README.chromium | 24-Aug-2016 | 532 | |
| README.md | 24-Aug-2016 | 2.7K | |
| src/ | 24-Aug-2016 | ||
| test/ | 24-Aug-2016 | ||
README.chromium
1 Name: css-element-queries 2 Short Name: css-element-queries 3 URL: https://github.com/marcj/css-element-queries 4 Version: 0.2.1 5 Revision: 996d9035b1a13bb6883c181aad742ae45bd74026 6 Date: Thu May 28 13:57:31 2015 +0000 7 License File: LICENSE 8 Security Critical: no 9 10 Description: 11 ResizeSensor.js calls a callback when an element is resized for any reason. 12 13 Local Modifications: 14 Made test/index.html conform to the expectations of py_vulcanize: 15 up-cased doctype, added 'use strict', downloaded mootools from cloudflare 16 and added them to test/. 17
README.md
1 CSS Element Queries 2 =================== 3 4 Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+). 5 It allows not only to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported) 6 size while not causing performance lags due to event based implementation. 7 8 It's a proof-of-concept event-based CSS element dimension query with valid CSS selector syntax. 9 10 Features: 11 12 - no performance issues since it listens only on size changes of elements that have element query rules defined through css. Other element query polifills only listen on `window.onresize` which causes performance issues and allows only to detect changes via window.resize event and not inside layout changes like css3 animation, :hover, DOM changes etc. 13 - no interval/timeout detection. Truly event-based through integrated ResizeSensor class. 14 - no CSS modifications. Valid CSS Syntax 15 - all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML. 16 - supports and tested in webkit, gecko and IE(7/8/9/10/11). 17 - `min-width`, `min-height`, `max-width` and `max-height` are supported so far 18 - works with any layout modifications: HTML (innerHTML etc), inline styles, DOM mutation, CSS3 transitions, fluid layout changes (also percent changes), pseudo classes (:hover etc.), window resizes and more 19 - no Javascript-Framework dependency (works with jQuery, Mootools, etc.) 20 21 More demos and information: http://marcj.github.io/css-element-queries/ 22 23 Example 24 ------- 25 26 ```css 27 .widget-name { 28 padding: 25px; 29 } 30 .widget-name[max-width="200px"] { 31 padding: 0; 32 } 33 .widget-name[min-width="500px"] { 34 padding: 55px; 35 } 36 37 /* responsive images */ 38 .responsive-image img { 39 width: 100%; 40 } 41 42 .responsive-image[max-width^='400px'] img { 43 content: url(demo/image-400px.jpg); 44 } 45 46 .responsive-image[max-width^='1000px'] img { 47 content: url(demo/image-1000px.jpg); 48 } 49 50 .responsive-image[min-width='1000px'] img { 51 content: url(demo/image-full.jpg); 52 } 53 ``` 54 55 Include the javascript files at the bottom and you're good to go. No custom javascript calls needed. 56 57 ```html 58 <script src="src/ResizeSensor.js"></script> 59 <script src="src/ElementQueries.js"></script> 60 ``` 61 62 Issues 63 ------ 64 65 - So far does not work on `img` and other elements that can't contain other elements. Wrapping with a `div` works fine though (See demo). 66 - Adds additional hidden elements into selected target element and forces target element to be relative or absolute. 67 68 69 [](https://bitdeli.com/free "Bitdeli Badge") 70 71 72 License 73 ------- 74 MIT license. Copyright [Marc J. Schmidt](http://marcjschmidt.de/). 75
