|
1 | 1 | CSS Element Queries
|
2 | 2 | ===================
|
3 | 3 |
|
4 |
| -Forget Media Queries - Here Is Element Queries! |
| 4 | +Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE8+). |
| 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. |
5 | 7 |
|
6 |
| -This is a polyfill for all new browsers (incl. IE8!) for CSS Element Queries, which |
7 |
| -means you can depend in your CSS on element's size and not only on window's size like in classical media queries. |
8 |
| - |
9 |
| -So, it's proof-of-concept event-based CSS element dimension query with valid CSS selector syntax. |
| 8 | +It's a proof-of-concept event-based CSS element dimension query with valid CSS selector syntax. |
10 | 9 |
|
11 | 10 | Features:
|
12 | 11 |
|
13 | 12 | - no performance issues
|
14 | 13 | - no interval/timeout detection. Truly event-based
|
15 | 14 | - no CSS modifications. Valid CSS Syntax
|
16 | 15 | - all CSS selectors available. Uses regular attribute selector
|
17 |
| - - support and tested in webkit, gecko and internet explorer(8/9/10). |
| 16 | + - supports and tested in webkit, gecko and IE(8/9/10). |
18 | 17 | - `min-width`, `min-height`, `max-width` and `max-height` are supported so far
|
19 | 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
|
20 |
| - - no Javascript-Framework dependency, so works with jQuery, Mootools, etc. |
| 19 | + - no Javascript-Framework dependency (works with jQuery, Mootools, etc.) |
21 | 20 |
|
22 |
| -More demos and information here: http://marcj.github.io/css-element-queries/ |
| 21 | +More demos and information: http://marcj.github.io/css-element-queries/ |
23 | 22 |
|
24 | 23 | Example
|
25 | 24 | -------
|
@@ -63,5 +62,5 @@ Include the javascript files at the bottom and you're good to go. No custom java
|
63 | 62 | Issues
|
64 | 63 | ------
|
65 | 64 |
|
66 |
| - - Does not work on `img` tags. Wrapping with a `div` works fine though (See the demo). |
67 |
| - - Adds additional hidden element into selected target element in non-internet-explorer browsers and forces target element to be relative or absolute. |
| 65 | + - So far does not work on `img` tags. Wrapping with a `div` works fine though (See demo). |
| 66 | + - [only non-IE]: Adds additional hidden element into selected target element and forces target element to be relative or absolute. |
0 commit comments