Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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.

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

  • 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

Sponsors

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

License

MIT

You can’t perform that action at this time.