README.chromium
1Name: css-element-queries
2Short Name: css-element-queries
3URL: https://github.com/marcj/css-element-queries
4Version: 0.2.1
5Revision: 996d9035b1a13bb6883c181aad742ae45bd74026
6Date: Thu May 28 13:57:31 2015 +0000
7License File: LICENSE
8Security Critical: no
9
10Description:
11ResizeSensor.js calls a callback when an element is resized for any reason.
12
13Local Modifications:
14Made test/index.html conform to tvcm's expectations: up-cased doctype, added
15'use strict', downloaded mootools from cloudflare and added them to test/.
16
README.md
1CSS Element Queries
2===================
3
4Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+).
5It allows not only to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported)
6size while not causing performance lags due to event based implementation.
7
8It's a proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.
9
10Features:
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
21More demos and information: http://marcj.github.io/css-element-queries/
22
23Example
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
55Include 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
62Issues
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
72License
73-------
74MIT license. Copyright [Marc J. Schmidt](http://marcjschmidt.de/).
75
){kind=link}