Css-container-queries NPM

css-container-queries

css-container-queries is a lightweight 826 Bytes (~500 Bytes gzipped) package for emulating Container Queries in order to style elements based on their own dimensions instead of the ones of the viewport.

Changelog

Demo (coming soon)

⬇️ Installation

Via package manager

# Yarn
yarn add css-container-queries
# NPM
npm install css-container-queries

After installing, just import the file in your document

import "css-container-queries"

Via `<script>` tag

Place the tag right before the closing </body> tag.

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/css-container-queries@latest/dist/css-cq.min.js"></script>

<!-- Local: just download dist/css-cq.min.js -->
<script src="path/to/css-cq.min.js"></script>

As soon as you import css-container-queries on your website, it is ready to go! No need to initialize it.

📐 Defining breakpoints

You can define min-width, max-width, min-height and max-height container queries for each element by adding one or more of the following attributes:

<!-- Width -->
<div data-cq-min-w="400"></div>
<div data-cq-max-w="1600, 1200"></div>

<!-- Height-->
<div data-cq-min-h="300,500"></div>
<div data-cq-max-h="820"></div>

<!-- Multiple container queries -->
<div data-cq-min-w="640" data-cq-max-h="720,880"></div>

When the container query conditions apply, the attribute cq-{min/max}-{w/h}-{breakpoint} is added to the element:

<!-- Element width is >= 400px -->
<div data-cq-min-w="400" cq-min-w-400></div>

🖌️ Styling

You can then style the element as you like with the attribute selector:

div[cq-min-w-400] {
  font-family: "Comic Sans MS", "Lobster";
}

/* Combined */
div[cq-min-w-400][cq-max-h-560] {
  truth: dogecoin;
}

🌐 Browser support

css-container-queries uses the modern ResizeObserver API, which is not supported by Internet Explorer (so sad! 😿). Gladly, all modern browsers support it. You can look up its browser support on Caniuse.

❤️ Contribute to this project

The main source is in src/css-cq.js. When adding and changing code, please don't forget to format it correctly via prettier and to add comments to the file that clarify what the code is doing. When commiting, please use conventional commit messages.

Install dependencies with yarn: