CQFill is a polyfill for CSS Container Queries.
npm install cqfill # yarn add cqfill |
 |
 |
Add the CQFill polyfill to your page:
<script src="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 */
}
}You can use PostCSS Nesting to nest @container rules:
{
"plugins": [
"postcss-nesting",
"cqfill/postcss"
]
}You can activate the polyfill manually:
<script src="https://unpkg.com/cqfill/export"></script>
<script>cqfill() /* cqfill(document); cqfill(shadowRoot) */</script>import { cqfill } from 'cqfill'
cqfill() /* cqfill(document); cqfill(shadowRoot) */Use the included PostCSS plugin to process your CSS:
import postcss from 'postcss'
import postcssCQFill from 'cqfill/postcss'
postcss([ postcssCQFill ])To transform CSS with PostCSS and without any other tooling:
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)
)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 */
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent