https://github.com/jsxtools/cqfill
Polyfill for CSS Container Queries
https://github.com/jsxtools/cqfill
Last synced: 8 months ago
JSON representation
Polyfill for CSS Container Queries
- Host: GitHub
- URL: https://github.com/jsxtools/cqfill
- Owner: jsxtools
- Created: 2021-04-26T03:26:31.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-16T01:09:58.000Z (about 4 years ago)
- Last Synced: 2025-05-07T19:43:52.924Z (8 months ago)
- Language: JavaScript
- Size: 47.9 KB
- Stars: 404
- Watchers: 9
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-list - cqfill
README
# CQFill
**CQFill** is a polyfill for [CSS Container Queries].
```sh
npm install cqfill # yarn add cqfill
```
## Demos
## Usage
Add the **CQFill** polyfill to your page:
```html
```
Or, add the CQFill script to your NodeJS project:
```js
import 'cqfill'
```
Next, add the included [PostCSS] plugin to your `.postcssrc.json` file:
```js
{
"plugins": [
"cqfill/postcss"
]
}
```
Now, go forth and use CSS container queries:
```css
.container {
contain: layout inline-size;
}
@container (min-width: 700px) {
.contained {
/* styles applied when a container is at least 700px */
}
}
```
## Tips
You can use [PostCSS Nesting] to nest `@container` rules:
```js
{
"plugins": [
"postcss-nesting",
"cqfill/postcss"
]
}
```
You can activate the polyfill manually:
```html
cqfill() /* cqfill(document); cqfill(shadowRoot) */
```
```js
import { cqfill } from 'cqfill'
cqfill() /* cqfill(document); cqfill(shadowRoot) */
```
## Usage with PostCSS
Use the included PostCSS plugin to process your CSS:
```js
import postcss from 'postcss'
import postcssCQFill from 'cqfill/postcss'
postcss([ postcssCQFill ])
```
To transform CSS with PostCSS and without any other tooling:
```js
import fs from 'fs'
import postcss from 'postcss'
import postcssCQFill from 'cqfill/postcss'
const from = './test/readme.css'
const fromCss = fs.readFileSync(from, 'utf8')
const to = './test/readme.polyfilled.css'
postcss([ postcssCQFill ]).process(fromCss, { from, to }).then(
({ css }) => fs.writeFileSync(to, css)
)
```
## Usage without PostCSS
Add a fallback property to support the CSS [`contain`] property.
```css
/* before */
.container {
contain: layout inline-size;
}
/* after */
.container {
--css-contain: layout inline-size;
contain: layout inline-size;
}
```
Duplicate container queries using a fallback rule.
```css
/* before */
@container (min-width: 700px) {
.contained {
/* styles applied when a container is at least 700px */
}
}
/* after */
@media --css-container and (min-width: 700px) {
.contained {
/* styles applied when a container is at least 700px */
}
}
@container (min-width: 700px) {
.contained {
/* styles applied when a container is at least 700px */
}
}
```
[`contain`]: https://developer.mozilla.org/en-US/docs/Web/CSS/contain
[CSS Container Queries]: https://css.oddbird.net/rwd/query/explainer/
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Nesting]: https://github.com/csstools/postcss-nesting