Presto change-o, it’s element/container queries
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download


Presto change-o, it’s element/container queries.

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.


presto-points.js requires ResizeObserver, which is currently only implemented behind a flag in Chrome. Luckily, there’s an excellent polyfill.


Load presto-points.js in the <head>, after any ResizeObserver polyfill, synchronously.

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

Then use it like this:

.container {
	--presto-points: 10em .medium 20em .large;

.container.medium .element { /* applies when .container’s width is between 10em and 20em */
	/* do container query stuff */

.container.large .element { /* applies when .container’s width is >= 20em  */
	/* do some other container query stuff */