Prolyfill for CSS Container Queries (aka Element Queries)

Usage no npm install needed!

<script type="module">
  import cqProlyfill from 'https://cdn.skypack.dev/cq-prolyfill';


Container Queries Prolyfill

Build Status Coverage npm version npm downloads MIT Patreon

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

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.



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