CQFill

CQFill is a polyfill for CSS Container Queries.

npm install cqfill # yarn add cqfill

Demos

Usage

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

Tips

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

Usage with PostCSS

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)
)

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