Skip to content

Commit df0ce5c

Browse files
committed
Added dynamic tracking of newly created elements (supporting angular&co).
Removed element tracking. Dropped IE9 and lower support. Fixed sensor bug with invisible elements. Addet reset() method to ResizeSensor.
1 parent 2f6959d commit df0ce5c

File tree

6 files changed

+1116
-146
lines changed

6 files changed

+1116
-146
lines changed

README.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,10 @@ Features:
1313

1414
- 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.
1515
- no interval/timeout detection. Truly event-based through integrated ResizeSensor class.
16+
- automatically discovers new DOM elements. No need to call javascript manually.
1617
- no CSS modifications. Valid CSS Syntax
17-
- all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML.
18-
- supports and tested in webkit, gecko and IE(7/8/9/10/11)
18+
- all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML/JS.
19+
- supports and tested in webkit, gecko and IE(10+)
1920
- `min-width`, `min-height`, `max-width` and `max-height` are supported so far
2021
- 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
2122
- no Javascript-Framework dependency (works with jQuery, Mootools, etc.)
@@ -50,7 +51,7 @@ More demos and information: http://marcj.github.io/css-element-queries/
5051

5152
As you can see we use the `~=` [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
5253
Since this css-element-queries polyfill adds new element attributes on the DOM element
53-
(`<div class="widget-name" min-width="400px 700px"></div>`) depending on your actual CSS,
54+
(`<div class="widget-name" min-width="400px 700px"></div>`) depending on your actual CSS and element's dimension,
5455
you should always use this attribute selector (especially if you have several element query rules on the same element).
5556

5657
```html
@@ -104,6 +105,7 @@ ElementQueries.init();
104105
- 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).
105106
- Adds additional hidden elements into selected target element and forces target element to be relative or absolute.
106107
- Local stylesheets do not work (using `file://` protocol).
108+
- If you have rules on an element that has a css animation, also add `element-queries`. E.g. `.widget-name { animation: 2sec my-animation, 1s element-queries;}`. We use this to detect new added DOM elements automatically.
107109

108110
## License
109111

0 commit comments

Comments
 (0)