
Security News
ECMAScript 2025 Finalized with Iterator Helpers, Set Methods, RegExp.escape, and More
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
css-element-queries
Advanced tools
CSS-Element-Queries Polyfill. Proof-of-concept for high-speed element dimension/media queries in valid css.
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 h2 {
font-size: 12px;
}
.widget-name[min-width~="400px"] h2 {
font-size: 18px;
}
.widget-name[min-width~="600px"] h2 {
padding: 55px;
text-align: center;
font-size: 24px;
}
.widget-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 and element's dimension,
you should always use this attribute selector (especially if you have several element query rules on the same element).
<div class="widget-name">
<h2>Element responsiveness FTW!</h2>
</div>
<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.
<script src="src/ResizeSensor.js"></script>
<script 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:
var ElementQueries = require('css-element-queries/src/ElementQueries');
//attaches to DOMLoadContent
ElementQueries.listen();
//or if you want to trigger it yourself.
// Parse 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.
ElementQueries.init();
img
and other elements that can't contain other elements. Wrapping with a div
works fine though (See demo).file://
protocol).element-queries
. E.g. .widget-name { animation: 2sec my-animation, 1s element-queries;}
. We use this to detect new added DOM elements automatically.MIT license. Copyright Marc J. Schmidt.
FAQs
CSS-Element-Queries Polyfill. Proof-of-concept for high-speed element dimension/media queries in valid css.
The npm package css-element-queries receives a total of 115,562 weekly downloads. As such, css-element-queries popularity was classified as popular.
We found that css-element-queries demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
Research
North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware loader.