https://github.com/ausi/cq-prolyfill

Prolyfill for CSS Container Queries
https://github.com/ausi/cq-prolyfill

container-queries css element-queries javascript

Last synced: 14 days ago
JSON representation

Prolyfill for CSS Container Queries

• Host: GitHub
• URL: https://github.com/ausi/cq-prolyfill
• Owner: ausi
• License: mit
• Created: 2015-08-02T09:47:04.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-08-15T07:02:30.000Z (about 1 year ago)
• Last Synced: 2024-05-22T19:28:29.779Z (6 months ago)
• Topics: container-queries, css, element-queries, javascript
• Language: JavaScript
• Homepage: https://au.si/css-container-element-queries
• Size: 287 KB
• Stars: 567
• Watchers: 26
• Forks: 39
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Container Queries Prolyfill

[![Build Status](https://img.shields.io/travis/ausi/cq-prolyfill/master.svg?style=flat-square)](https://travis-ci.org/ausi/cq-prolyfill/branches) [![Coverage](https://img.shields.io/coveralls/ausi/cq-prolyfill/master.svg?style=flat-square)](https://coveralls.io/github/ausi/cq-prolyfill?branch=master) [![npm version](https://img.shields.io/npm/v/cq-prolyfill.svg?style=flat-square) ![npm downloads](https://img.shields.io/npm/dt/cq-prolyfill.svg?style=flat-square)](https://www.npmjs.com/package/cq-prolyfill) ![MIT](https://img.shields.io/npm/l/cq-prolyfill.svg?style=flat-square)

This is a [prolyfill](https://au.si/what-is-a-prolyfill) for a special version of [container queries](https://github.com/ResponsiveImagesCG/container-queries) (aka element queries). You can read more about the idea and how they work internally in [this article](https://au.si/css-container-element-queries).

## Demo

A quick demo of the container queries in action can be found here:

## Usage

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](docs/usage.md).

## Documentation

[Read the documentation](docs/index.md) 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](https://www.browserstack.com/automate) for sponsoring automated cross browser testing for this project.

## Contribute

* Create a [new issue on GitHub](https://github.com/ausi/cq-prolyfill/issues/new) 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](https://webchat.freenode.net?randomnick=1&channels=%23cq-prolyfill&prompt=1).

* Spread the word about this project.

* [Support this project on Patreon](https://www.patreon.com/ausi).

## Sponsors

Thanks to all sponsors that help to bring this project forward. You can [become a sponsor now](https://www.patreon.com/ausi) too.

* [Webflow](https://webflow.com/)

* [BrowserStack](https://www.browserstack.com/)

## License

MIT