mini-container-queries

The World's Smallest Container Query Plugin

Usage

Define a 'container' using a CSS selector, run a JavaScript test on matching HTML elements, and apply CSS styles to the container or its child elements if the test resolves true.

Syntax

q(containerList, condition, childList, rule)

• containerList is a comma-separated string containing one or more CSS selectors
• condition is a JavaScript test that should evaluate to true or false
• childList is a comma-separated string containing one or more CSS selectors
• rule is a semicolon-separated string containing one or more CSS declarations

Example

q('div', 'this.offsetWidth > 500', 'span', 'background: lime')

Demo

• View mini-container-query demo

Golfers

This plugin lovingly golfed by:

• @innovati
• @xen
• …you?