Neptunium, Promethium, Manganese

    cqfill
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.0 • Public • Published

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

    Install

    npm i cqfill

    DownloadsWeekly Downloads

    844

    Version

    0.6.0

    License

    CC0-1.0

    Unpacked Size

    82.6 kB

    Total Files

    23

    Last publish

    Collaborators

    • jonathantneal