Home | History | Annotate | Download | only in css-element-queries 
      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 [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/marcj/css-element-queries/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
     70 
     71 
     72 License
     73 -------
     74 MIT license. Copyright [Marc J. Schmidt](http://marcjschmidt.de/).
     75