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:
https://ausi.github.io/cq-prolyfill/demo/
With this prolyfill you can use container queries in your CSS in the following form:
.element:container(width >= 100px) {
/* Styles for .element if its container is at least 100px wide */
}
.element:container(height > 100px < 200px) {
/* Styles for .element if its container is between 100px and 200px high */
}
.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.
MIT