Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+). It allows not only to define media-queries based on window-size but also adds ‘media-queries’ functionality depending on element (any selector supported) size while not causing performance lags due to event based implementation.
It's a proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.
Features:
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.min-width
, min-height
, max-width
and max-height
are supported so farMore demos and information: http://marcj.github.io/css-element-queries/
.widget-name { padding: 25px; } .widget-name[max-width="200px"] { padding: 0; } .widget-name[min-width="500px"] { padding: 55px; } /* responsive images */ .responsive-image img { width: 100%; } .responsive-image[max-width^='400px'] img { content: url(demo/image-400px.jpg); } .responsive-image[max-width^='1000px'] img { content: url(demo/image-1000px.jpg); } .responsive-image[min-width='1000px'] img { content: url(demo/image-full.jpg); }
Include the javascript files at the bottom and you're good to go. No custom javascript calls needed.
<script src="src/ResizeSensor.js"></script> <script src="src/ElementQueries.js"></script>
img
and other elements that can't contain other elements. Wrapping with a div
works fine though (See demo).MIT license. Copyright Marc J. Schmidt.