/mini-container-queries

A <200 byte container query plugin

Primary LanguageHTMLMIT LicenseMIT

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

Golfers

This plugin lovingly golfed by: