CQFill

CQFill is a polyfill for CSS Container Queries.

npm install cqfill # yarn add cqfill

Demos

Usage

Add the CQFill polyfill to your page:

<scriptsrc="https://unpkg.com/cqfill"></script>

Or, add the CQFill script to your NodeJS project:

import'cqfill'

Next, add the included PostCSS plugin to your .postcssrc.json file:

{"plugins": ["cqfill/postcss"]}

Now, go forth and use CSS container queries:

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

{"plugins": ["postcss-nesting","cqfill/postcss"]}

You can activate the polyfill manually:

<scriptsrc="https://unpkg.com/cqfill/export"></script><script>cqfill()/* cqfill(document); cqfill(shadowRoot) */</script>

import{cqfill}from'cqfill'cqfill()/* cqfill(document); cqfill(shadowRoot) */

Usage with PostCSS

Use the included PostCSS plugin to process your CSS:

importpostcssfrom'postcss'importpostcssCQFillfrom'cqfill/postcss'postcss([postcssCQFill])

To transform CSS with PostCSS and without any other tooling:

importfsfrom'fs'importpostcssfrom'postcss'importpostcssCQFillfrom'cqfill/postcss'constfrom='./test/readme.css'constfromCss=fs.readFileSync(from,'utf8')constto='./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.

/* before */
.container {
contain: layout inline-size;
}
/* after */
.container {
--css-contain: layout inline-size;
contain: layout inline-size;
}

Duplicate container queries using a fallback rule.

/* 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 */
}
}