Css container queries polyfill

Container Query Polyfill

A small (9 kB compressed) polyfill for CSS Container Queries using ResizeObserver and MutationObserver supporting the full @container query syntax:

Browser Support

Getting Started

Installation

npm install --save container-query-polyfill

Alternatively, you can use it directly from a CDN:

script src="https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js">/script>

For the best user experience, it’s recommended that you initially only use the polyfill for content below-the-fold and use @supports queries to temporarily replace it with a loading indicator until the polyfill is ready to display it:

@supports not (container-type: inline-size) < .container, footer < display: none; > .loader < display: flex; > >

You can view a more complete demo here. On sufficiently fast networks and devices, or devices that natively support Container Queries, this loading indicator will never be displayed.

Note Keep in mind that this technique effectively limits impact on FID and CLS, potentially at the expense of LCP. You may see regressions in the latter as a result, particularly on lower end devices or in poor network conditions.

Limitations

• CSS first: The polyfill currently only supports and same-origin elements. Inline styles via the style attribute or CSSOM methods are not polyfilled. Likewise, JavaScript APIs like CSSContainerRule are not polyfilled, and APIs like CSS.supports() are not monkey-patched.
• Best effort: Style changes that do not lead to observable DOM or layout mutations (e.g. changing font-size in a container without content) may not be detected, or may be detected a frame late on some browsers. Complex sibling CSS selectors aren’t supported.
• Currently, there is no support for Shadow DOM, or functions like calc(. ) in container conditions. Your contribution would be welcome!

Supporting browsers without :where()

The polyfill uses the CSS :where() pseudo-class to avoid changing the specificity of your rules. This pseudo-class is relatively new, however. If you need to support browsers without it, you will need to append the dummy :not(container-query-polyfill) pseudo-class to the originating element of every selector under a @container block:

@container (min-width: 200px) < #foo < /* . */ > .bar < /* . */ > #foo, .bar < /* . */ > ul > li < /* . */ > ::before < /* . */ > >

@container (min-width: 200px) < #foo:not(.container-query-polyfill) < /* . */ > .bar:not(.container-query-polyfill) < /* . */ > #foo:not(.container-query-polyfill), .bar:not(.container-query-polyfill) < /* . */ > ul > li:not(.container-query-polyfill) < /* . */ > :not(.container-query-polyfill)::before < /* . */ > >

This is to ensure the specificity of your rules never changes (e.g. while the polyfill is loading, or on browsers with native support for container queries). On browsers without :where() supports, rules without the dummy will be ignored.

ResizeObserver Loop Errors

When using the polyfill, you may observe reports of errors like ResizeObserver loop completed with undelivered notifications or ResizeObserver loop limit exceeded . These are expected, and may safely be ignored.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A polyfill for CSS Container Queries

License

GoogleChromeLabs/container-query-polyfill

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Co-authored-by: github-actions[bot]

Git stats

Files

Failed to load latest commit information.

README.md

Please note that this polyfill is now in maintenance mode, as of Nov, 2022. We are not planning to add more features or enhancements.

A small (9 kB compressed) polyfill for CSS Container Queries using ResizeObserver and MutationObserver supporting the full @container query syntax:

npm install --save container-query-polyfill

Alternatively, you can use it directly from a CDN:

script src="https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js">/script>

For the best user experience, it’s recommended that you initially only use the polyfill for content below-the-fold and use @supports queries to temporarily replace it with a loading indicator until the polyfill is ready to display it:

@supports not (container-type: inline-size) < .container, footer < display: none; > .loader < display: flex; > >

You can view a more complete demo here. On sufficiently fast networks and devices, or devices that natively support Container Queries, this loading indicator will never be displayed.

Note Keep in mind that this technique effectively limits impact on FID and CLS, potentially at the expense of LCP. You may see regressions in the latter as a result, particularly on lower end devices or in poor network conditions.

• CSS first: The polyfill currently only supports and same-origin elements. Inline styles via the style attribute or CSSOM methods are not polyfilled. Likewise, JavaScript APIs like CSSContainerRule are not polyfilled, and APIs like CSS.supports() are not monkey-patched.
• Best effort: Style changes that do not lead to observable DOM or layout mutations (e.g. changing font-size in a container without content) may not be detected, or may be detected a frame late on some browsers. Complex sibling CSS selectors aren’t supported.
• Currently, there is no support for Shadow DOM, or functions like calc(. ) in container conditions. Your contribution would be welcome!

Supporting browsers without :where()

The polyfill uses the CSS :where() pseudo-class to avoid changing the specificity of your rules. This pseudo-class is relatively new, however. If you need to support browsers without it, you will need to append the dummy :not(container-query-polyfill) pseudo-class to the originating element of every selector under a @container block:

@container (min-width: 200px) < #foo < /* . */ > .bar < /* . */ > #foo, .bar < /* . */ > ul > li < /* . */ > ::before < /* . */ > >

@container (min-width: 200px) < #foo:not(.container-query-polyfill) < /* . */ > .bar:not(.container-query-polyfill) < /* . */ > #foo:not(.container-query-polyfill), .bar:not(.container-query-polyfill) < /* . */ > ul > li:not(.container-query-polyfill) < /* . */ > :not(.container-query-polyfill)::before < /* . */ > >

This is to ensure the specificity of your rules never changes (e.g. while the polyfill is loading, or on browsers with native support for container queries). On browsers without :where() supports, rules without the dummy will be ignored.

ResizeObserver Loop Errors

When using the polyfill, you may observe reports of errors like ResizeObserver loop completed with undelivered notifications or ResizeObserver loop limit exceeded . These are expected, and may safely be ignored.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Polyfill for CSS Container Queries

jsxtools/cqfill

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

CQFill is a polyfill for CSS Container Queries.

npm install cqfill # yarn add cqfill

Add the CQFill polyfill to your page:

script src pl-s">https://unpkg.com/cqfill">script>

Or, add the CQFill script to your NodeJS project:

Next, add the included PostCSS plugin to your .postcssrc.json file:

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

You can use PostCSS Nesting to nest @container rules:

 "plugins": [ "postcss-nesting", "cqfill/postcss" ] >

You can activate the polyfill manually:

script src pl-s">https://unpkg.com/cqfill/export">script> script>cqfill() /* cqfill(document); cqfill(shadowRoot) */script>

import  cqfill > from 'cqfill' cqfill() /* cqfill(document); cqfill(shadowRoot) */

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) )

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

Источник