Home

Awesome

Container Queries Prolyfill

Build Status Coverage npm version npm downloads MIT

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

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

Contribute

Sponsors

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

License

MIT