Wondering what’s next for npm?Check out our public roadmap! »

    cq-prolyfill

    0.4.0 • Public • Published

    Container Queries Prolyfill

    Build Status Coverage npm version npm downloads MIT Patreon

    This is a prolyfill for a special version of container queries (aka element queries). You can read more about the idea and how they work internally in this article.

    Demo

    A quick demo of the container queries in action can be found here: https://ausi.github.io/cq-prolyfill/demo/

    Usage

    With this prolyfill you can use container queries in your CSS in the following form:

    .element:container(min-width: 100px{
        /* Styles for .element if its container is at least 100px wide */
    }
    .element[data-cq~="min-width:100px"] {
        /* Alternative syntax, same as the container query above */
    }
    .element:container(text-align = right{
        /* Styles for .element if its container has a right text-align */
    }

    For more information take a look at the usage documentation.

    Documentation

    Read the documentation to see how you can install and use this script on your next project.

    Browser Support

    • Firefox 36+
    • Opera 12.16+
    • Chrome 40+
    • Internet Explorer 9+
    • Edge
    • Safari 7+
    • Yandex 14+
    • iOS 7+
    • Android 4+
    • Windows Phone 8.1+

    Thanks to BrowserStack for sponsoring automated cross browser testing for this project.

    Contribute

    Sponsors

    Thanks to all sponsors that help to bring this project forward. You can become a sponsor now too.

    License

    MIT

    Install

    npm i cq-prolyfill

    DownloadsWeekly Downloads

    415

    Version

    0.4.0

    License

    MIT

    Last publish

    Collaborators

    • avatar