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



`

`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