Prolyfill for CSS Container Queries (aka Element Queries)
npm install cq-prolyfill   !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.
A quick demo of the container queries in action can be found here:
With this prolyfill you can use container queries in your CSS in the following form:
``css`
.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.
Read the documentation to see how you can install and use this script on your next project.
* 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.
* 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.
Thanks to all sponsors that help to bring this project forward. You can become a sponsor now too.
MIT