
Research
PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
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.
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.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.
Security News
Research
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.