Skip to content

Latest commit

 

History

History
45 lines (29 loc) · 1.33 KB

README.md

File metadata and controls

45 lines (29 loc) · 1.33 KB
Raw

conditional-classes

I made this to experiment with and learn about container queries. If you want to use container queries in production, you should probably be using something else.

Requirements

conditional-classes.js requires ResizeObserver. ResizeObserver is shipping in Blink and coming soon to Firefox and Safari; in the meantime there’s an excellent polyfill.

Usage

Load conditional-classes.js in the <head>, after any ResizeObserver polyfill, synchronously.

<head>
	<!-- (head stuff) -->
	<script src="ResizeObserverPolyfill.js"></script>
	<script src="conditional-classes.js"></script>
</head>

Then use it like this:

.container {
	--if: (300px < inline <= 600px) .medium,
	      (inline > 600px) .large;
}

.container.medium .element {
	/* do container query stuff */
}

.container.large .element {
	/* do some other container query stuff */
}

Currently supports querying the inline and block content-box sizes of elements.

TODO

  • Right now we check for --ifs when elements are inserted into the DOM, and then never check for or look at them again. A better script would respond appropriately to updates to CSS & HTML.