Package Exports

cq-prolyfill
cq-prolyfill/postcss-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cq-prolyfill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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(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.

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.

License

MIT