A first look at container-query-polyfill, a polyfill for CSS Container Queries

Surma has been working on container-query-polyfill, a lightweight polyfill for CSS Container Queries. Let’s take a look at how it works and how it differs from cqfill … What Unlike cqfill —which was covered here before— this Polyfill for Container Queries: Does not require you to declare a separate Custom Property –css-contain that duplicates the …

Continue reading “A first look at container-query-polyfill, a polyfill for CSS Container Queries”


This content originally appeared on Bram.us and was authored by Bramus!

Surma has been working on container-query-polyfill, a lightweight polyfill for CSS Container Queries. Let’s take a look at how it works and how it differs from cqfill …

~

🤔 Container Queries?

Container Queries allow authors to style elements according to the size of a container. This is similar to a @media query, except that it evaluates against a container instead of the viewport.

🤔 Polyfill?

A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively — What is a Polyfill?

~

What

Unlike cqfill —which was covered here before— this Polyfill for Container Queries:

  • Does not require you to declare a separate Custom Property --css-contain that duplicates the value of the contain property
  • Does not require you to duplicate your @container rule into a @media rule
  • Parses the newer Container Queries Syntax that uses the container-type + container-name properties (shorthanded to container)

Because of this, the polyfill is a drop-in piece of code that will automagically do its thing 🙂

It transpiles CSS code on the client-side and implements Container Query functionality using ResizeObserver and MutationObserver.

Additionally this polyfill does not rely on requestAnimationFrame, which makes it more performant.

~

Installation + Usage

Installation per NPM:

container-query-polyfill

To use, import the polyfill when no support for container queries is detected:

const supportsContainerQueries = "container" in document.documentElement.style;
if (!supportsContainerQueries) {
  import("container-query-polyfill");
}

Alternatively, load it via a (self-invoking) remote script:

<script src="https://unpkg.com/container-query-polyfill/cqfill.iife.min.js"></script>

👨‍🏫 Unfamiliar with the syntax of CSS Container Queries itself? No worries, you can learn CSS Container Queries here.

~

Demo

I’ve updated my original Container Queries Demo to include this polyfill. Works like a charm:

See the Pen
CSS Container Queries Demo by Bramus (@bramus)
on CodePen.

~

Notes

Do note that this polyfill comes with a few limitations:

  • Only a subset of queries are supported for now. Specifically, only min-width, max-width, min-height and max-height are supported.
  • Only top-level Container Queries are support — no nesting of CQs in other Media Queries.
  • Container query thresholds can only be specified using pixels.

These limitations are the result of a design choice:

My aim is to make the polyfill work correctly for the majority of use-cases, but cut corners where possible to keep the polyfill simple(-ish), small and efficient.

Sounds totally reasonable.

~

container-query-polyfill →

🔥 Like what you see? Want to stay in the loop? Here's how:


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-11-26T09:50:03+00:00) A first look at container-query-polyfill, a polyfill for CSS Container Queries. Retrieved from https://www.scien.cx/2021/11/26/a-first-look-at-container-query-polyfill-a-polyfill-for-css-container-queries/

MLA
" » A first look at container-query-polyfill, a polyfill for CSS Container Queries." Bramus! | Sciencx - Friday November 26, 2021, https://www.scien.cx/2021/11/26/a-first-look-at-container-query-polyfill-a-polyfill-for-css-container-queries/
HARVARD
Bramus! | Sciencx Friday November 26, 2021 » A first look at container-query-polyfill, a polyfill for CSS Container Queries., viewed ,<https://www.scien.cx/2021/11/26/a-first-look-at-container-query-polyfill-a-polyfill-for-css-container-queries/>
VANCOUVER
Bramus! | Sciencx - » A first look at container-query-polyfill, a polyfill for CSS Container Queries. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/26/a-first-look-at-container-query-polyfill-a-polyfill-for-css-container-queries/
CHICAGO
" » A first look at container-query-polyfill, a polyfill for CSS Container Queries." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/11/26/a-first-look-at-container-query-polyfill-a-polyfill-for-css-container-queries/
IEEE
" » A first look at container-query-polyfill, a polyfill for CSS Container Queries." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/11/26/a-first-look-at-container-query-polyfill-a-polyfill-for-css-container-queries/. [Accessed: ]
rf:citation
» A first look at container-query-polyfill, a polyfill for CSS Container Queries | Bramus! | Sciencx | https://www.scien.cx/2021/11/26/a-first-look-at-container-query-polyfill-a-polyfill-for-css-container-queries/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts