css-element-queries

GitHub describes it as CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.. The repository metadata lists JavaScript as its primary language. The metadata lists the MIT license. This article stays within the project description and details documented in the GitHub repository README.

GitHub describes it as CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.. The repository metadata lists JavaScript as its primary language. The metadata lists the MIT license. The README describes the project this way: 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.

The README section "CSS Element Queries" states: It's a proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.

The README section "CSS Element Queries" states: - 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. - no interval/timeout detection. Truly event-based through integrated ResizeSensor class. - automatically discovers new DOM elements. No need to call javascript manually. - no CSS modifications. Valid CSS Syntax - all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML/JS. - supports and tested in webkit, gecko and IE(10+) - min-width , min-height , max-width and max-height are supported so far - 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 - no Javascript-Framework dependency (works with jQuery, Mootools, etc.) - Works beautiful for responsive images without FOUC

The README section "Element Query" states: As you can see we use the ~= attribute selector. Since this css-element-queries polyfill adds new element attributes on the DOM element ( ) 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).

The repository README is the source for this review. It does not replace a local installation or an independent test.

• Source 1 · Project repository
• Source 2 · README