{"id":18496411,"url":"https://github.com/oddbird/css-anchor-positioning","last_synced_at":"2025-05-15T00:10:07.890Z","repository":{"id":44560683,"uuid":"512835328","full_name":"oddbird/css-anchor-positioning","owner":"oddbird","description":"Polyfill for CSS Anchor Positioning","archived":false,"fork":false,"pushed_at":"2025-04-11T15:47:27.000Z","size":73067,"stargazers_count":340,"open_issues_count":42,"forks_count":11,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-13T08:25:07.243Z","etag":null,"topics":["css","polyfill"],"latest_commit_sha":null,"homepage":"https://anchor-positioning.oddbird.net","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oddbird.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"oddbird","open_collective":"oddbird-open-source"}},"created_at":"2022-07-11T16:41:26.000Z","updated_at":"2025-04-08T19:41:09.000Z","dependencies_parsed_at":"2023-11-27T16:52:40.358Z","dependency_job_id":"28ef255c-6575-4361-b78b-de82b7e28a1f","html_url":"https://github.com/oddbird/css-anchor-positioning","commit_stats":{"total_commits":535,"total_committers":14,"mean_commits":"38.214285714285715","dds":0.5981308411214954,"last_synced_commit":"bd40788c79c8bb803595158b237517a928aa91fe"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":"oddbird/polyfill-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fcss-anchor-positioning","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fcss-anchor-positioning/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fcss-anchor-positioning/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddbird%2Fcss-anchor-positioning/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oddbird","download_url":"https://codeload.github.com/oddbird/css-anchor-positioning/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852129,"owners_count":21171840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","polyfill"],"created_at":"2024-11-06T13:29:19.140Z","updated_at":"2025-04-14T08:58:50.734Z","avatar_url":"https://github.com/oddbird.png","language":"TypeScript","funding_links":["https://github.com/sponsors/oddbird","https://opencollective.com/oddbird-open-source"],"categories":["Polyfill"],"sub_categories":[],"readme":"# CSS Anchor Positioning Polyfill\n\n[![Build Status](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml/badge.svg)](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml) [![npm version](https://badge.fury.io/js/@oddbird%2Fcss-anchor-positioning.svg)](https://www.npmjs.com/package/@oddbird/css-anchor-positioning) [![Netlify Status](https://api.netlify.com/api/v1/badges/61a20096-7925-4775-99a9-b40a010197c0/deploy-status)](https://app.netlify.com/sites/anchor-polyfill/deploys)\n\n\u003c!-- [WPT results](https://anchor-position-wpt.netlify.app/) --\u003e\n\n- [Demo](https://anchor-positioning.oddbird.net/)\n- [Draft Spec](https://drafts.csswg.org/css-anchor-position/)\n\nThe CSS anchor positioning\n[specification](https://drafts.csswg.org/css-anchor-position/) defines anchor\npositioning, \"where a positioned element can size and position itself relative\nto one or more 'anchor elements' elsewhere on the page.\" This CSS Anchor\nPositioning Polyfill supports and is based on this specification.\n\n## Browser Support\n\n- Firefox 54+ (includes Android)\n- Chrome 51 - 124 (includes Android)\n- Edge 79 - 124\n- Safari 10+ (includes iOS)\n\nAnchor positioning was added to Chrome, Chrome Android, and Edge in Chromium\n125, so the polyfill will not be applied to versions after 124. Some aspects of\nanchor positioning were shipped later in Chromium, meaning that they are not\npolyfilled and are not present in those versions.\n\n- `position-try-fallbacks` was added in 128 after being renamed from\n  `position-try-order`. Use both `-fallbacks` and `-order` or the `position-try`\n  shorthand to make sure all versions are covered.\n- `position-area` was added in 129.\n- `anchor-scope` was added in 131.\n\n## Getting Started\n\nTo use the polyfill, add this script tag to your document `\u003chead\u003e`:\n\n```js\n\u003cscript type=\"module\"\u003e\n  if (!(\"anchorName\" in document.documentElement.style)) {\n    import(\"https://unpkg.com/@oddbird/css-anchor-positioning\");\n  }\n\u003c/script\u003e\n```\n\nIf you want to manually apply the polyfill, you can instead import the\n`polyfill` function directly from the\n`@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js` file.\n\nFor build tools such as Vite, Webpack, and Parcel, that will look like this:\n\n```js\nimport polyfill from '@oddbird/css-anchor-positioning/fn';\n```\n\nThe `polyfill` function returns a promise that resolves when the polyfill has\nbeen applied.\n\nYou can view a more complete demo\n[here](https://anchor-positioning.oddbird.net/).\n\n## Configuration\n\nThe polyfill supports a small number of options. When using the default version\nof the polyfill that executes automatically, options can be set by setting the\nvalue of `window.ANCHOR_POSITIONING_POLYFILL_OPTIONS`.\n\n```js\n\u003cscript type=\"module\"\u003e\n  if (!(\"anchorName\" in document.documentElement.style)) {\n    window.ANCHOR_POSITIONING_POLYFILL_OPTIONS = {\n      elements: undefined,\n      excludeInlineStyles: false,\n      useAnimationFrame: false,\n    };\n    import(\"https://unpkg.com/@oddbird/css-anchor-positioning\");\n  }\n\u003c/script\u003e\n```\n\nWhen manually applying the polyfill, options can be set by passing an object as\nan argument.\n\n```js\n\u003cscript type=\"module\"\u003e\n  if (!(\"anchorName\" in document.documentElement.style)) {\n    const { default: polyfill } = await import(\"https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js\");\n\n    polyfill({\n      elements: undefined,\n      excludeInlineStyles: false,\n      useAnimationFrame: false,\n    });\n  }\n\u003c/script\u003e\n```\n\n### elements\n\ntype: `HTMLElements[]`, default: `undefined`\n\nIf set, the polyfill will only be applied to the specified elements instead of\nto all styles. Any specified `\u003clink\u003e` and `\u003cstyle\u003e` elements will be polyfilled.\nBy default, all inline styles in the document will also be polyfilled, but if\n`excludeInlineStyles` is true, only inline styles on specified elements will be\npolyfilled.\n\n### excludeInlineStyles\n\ntype: `boolean`, default: `false`\n\nWhen not defined or set to `false`, the polyfill will be applied to all elements\nthat have eligible inline styles, regardless of whether the `elements` option is\ndefined. When set to `true`, elements with eligible inline styles listed in the\n`elements` option will still be polyfilled, but no other elements in the\ndocument will be implicitly polyfilled.\n\n### useAnimationFrame\n\ntype: `boolean`, default: `false`\n\nDetermines whether anchor calculations should [update on every animation\nframe](https://floating-ui.com/docs/autoUpdate#animationframe) (e.g. when the\nanchor element is animated using `transform`s), in addition to always updating\non scroll/resize. While this option is optimized for performance, it should be\nused sparingly.\n\nFor legacy support, this option can also be set by setting the value of\n`window.UPDATE_ANCHOR_ON_ANIMATION_FRAME`, or, when applying the polyfill\nmanually, by passing a single boolean with `polyfill(true)`.\n\n## Limitations\n\nWhile this polyfill supports many basic use cases, it doesn't (yet) support the\nfollowing features:\n\n- The following portions of Position Fallback:\n  - `position-try-order`. If `try-size` is specified in `position-try`\n    shorthand, it will be parsed, and `try-tactics` will be applied, but the\n    `try-size` will be ignored.\n  - The `flip-start` `try-tactic` is only partially supported. The tactic is\n    only applied to property names and anchor sides.\n  - a `position-area` as a `try-tactic`\n  - Fallback does not support percentage anchor-side values, nor anchor\n    functions that are passed through custom properties.\n- Polyfill allows anchoring in scroll more permissively than the spec allows,\n  for instance without a default `position-anchor`.\n- `anchor-scope` property on pseudo-elements\n- `anchor-center` value for `justify-self`, `align-self`, `justify-items`, and\n  `align-items` properties\n- `position-visibility` property\n- dynamically added/removed anchors or targets\n- anchors or targets in the shadow-dom\n- anchors or targets in constructed stylesheets\n  (https://github.com/oddbird/css-anchor-positioning/issues/228)\n- anchor functions assigned to `inset-*` properties or `inset` shorthand\n  property\n- vertical/rtl writing-modes for anchor functions (partial support)\n- implicit anchors or the `position-anchor: auto` keyword (pending resolution of\n- `position-area` is polyfilled by adding a wrapping element around the target,\n  which adds a few differences:\n  - This breaks selectors that rely on a direct relationship with the target,\n    for instance `~ target`, `+ target`, `\u003e target` or using `:nth` selectors.\n  - Overflow alignment is not applied for a target that overflows its\n    inset-modified containing block but would still fit within its original\n    containing block. In other words, a polyfilled target may be placed in a\n    `position-area` grid section outside its containing block, where the\n    implementation would move the target inside the containing block.\n\nIn addition, JS APIs like `CSSPositionTryRule` or `CSS.supports` will not be\npolyfilled.\n\n### Inline styles\n\nBrowsers provide some validation for imperatively setting inline styles.\n`el.style.color = \"foo\"` and `el.style.foo = \"bar\"` do not change the inline\nstyles of `el`. This is problematic for this polyfill, as we would like to\nsupport `el.style.anchorName = \"--foo\"`, but that won't work in browsers that\ndon't support the `anchor-name` property.\n\nWhile `el.setAttribute('style', 'anchor-name: --foo')` or `\u003cdiv\nstyle=\"anchor-name: --foo\" /\u003e` both work, developers are often using tools that\ngenerate the DOM. Both React and Vue use methods that remove the unknown inline\nstyle properties at runtime.\n\nIf you are using inline styles to set anchor-related properties and the polyfill\nisn't working, verify that the inline styles are actually showing up in the DOM.\n\n## Sponsor OddBird's OSS Work\n\nAt OddBird, we love contributing to the languages \u0026 tools developers rely on.\nWe're currently working on polyfills\nfor new Popover \u0026 Anchor Positioning functionality,\nas well as CSS specifications for functions, mixins, and responsive typography.\nHelp us keep this work sustainable\nand centered on your needs as a developer!\nWe display sponsor logos and avatars\non our [website](https://www.oddbird.net/polyfill/#open-source-sponsors).\n\n[Sponsor OddBird's OSS Work](https://github.com/sponsors/oddbird)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Fcss-anchor-positioning","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foddbird%2Fcss-anchor-positioning","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddbird%2Fcss-anchor-positioning/lists"}