Name: css-element-queries
Owner: Digital Bazaar, Inc.
Description: CSS-Element-Queries Polyfill. proof-of-concept for high-speed element dimension/media queries in valid css.
Forked from: marcj/css-element-queries
Created: 2017-01-18 19:17:19.0
Updated: 2017-01-18 19:17:22.0
Pushed: 2017-01-18 20:11:59.0
Homepage: http://marcj.github.io/css-element-queries/
Size: 2838
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
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/
get-name h2 {
font-size: 12px;
get-name[min-width~="400px"] h2 {
font-size: 18px;
get-name[min-width~="600px"] h2 {
padding: 55px;
text-align: center;
font-size: 24px;
get-name[min-width~="700px"] h2 {
font-size: 34px;
color: red;
As you can see we use the ~=
attribute selector.
Since this css-element-queries polyfill adds new element attributes on the DOM element
(<div class="widget-name" min-width="400px 700px"></div>
) depending on your actual CSS,
you should always use this attribute selector (especially if you have several element query rules on the same element).
class="widget-name">
h2>Element responsiveness FTW!</h2>
v>
<div data-responsive-image>
<img data-src="http://placehold.it/350x150"/>
<img min-width="350" data-src="http://placehold.it/700x300"/>
<img min-width="700" data-src="http://placehold.it/1400x600"/>
</div>
Include the javascript files at the bottom and you're good to go. No custom javascript calls needed.
ipt src="src/ResizeSensor.js"></script>
ipt src="src/ElementQueries.js"></script>
Here live http://marcj.github.io/css-element-queries/.
If you're using a module loader you need to trigger the event listening or initialization yourself:
EQ = require('node_modules/css-element-queries/ElementQueries');
ttaches to DOMLoadContent
isten();
if you want to trigger it yourself.
arse all available CSS and attach ResizeSensor to those elements which have rules attached
make sure this is called after 'load' event, because CSS files are not ready when domReady is fired.
nit();
img
and other elements that can't contain other elements. Wrapping with a div
works fine though (See demo).file://
protocol).MIT license. Copyright Marc J. Schmidt.