Container Queries Prolyfill

This is a prolyfill for a special version of container queries (aka element queries). You can read more about the idea and how they work internally in this article.

Demo

A quick demo of the container queries in action can be found here: https://ausi.github.io/cq-prolyfill/demo/

Usage

With this prolyfill you can use container queries in your CSS in the following form:

.element:container(min-width: 100px) {
	/* Styles for .element if its container is at least 100px wide */
}
.element[data-cq~="min-width:100px"] {
	/* Alternative syntax, same as the container query above */
}
.element:container(text-align = right) {
	/* Styles for .element if its container has a right text-align */
}

For more information take a look at the usage documentation.

Documentation

Read the documentation to see how you can install and use this script on your next project.

Browser Support

• Firefox 36+
• Opera 12.16+
• Chrome 40+
• Internet Explorer 9+
• Edge
• Safari 7+
• Yandex 14+
• iOS 7+
• Android 4+
• Windows Phone 8.1+

Thanks to BrowserStack for sponsoring automated cross browser testing for this project.

Contribute

• Create a new issue on GitHub if you have a question, a suggestion or found a bug.
• Talk about it on IRC: Join #cq-prolyfill on Freenode or connect with the browser.
• Spread the word about this project.
• Support this project on Patreon.

Sponsors

Thanks to all sponsors that help to bring this project forward. You can become a sponsor now too.

• Webflow
• BrowserStack

License

MIT