Skip to content
main
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Apr 27, 2021
Apr 26, 2021
May 3, 2021
May 3, 2021
May 3, 2021

CQFill

CQFill is a polyfill for CSS Container Queries.

npm install cqfill # yarn add cqfill

Demos

Component Query Card Demo
Article - QC
Balloon G-OPAW

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

About

Polyfill for CSS Container Queries

Resources

Releases

No releases published

Packages

No packages published