diff --git a/.github/workflows/upgrade-deps.yml b/.github/workflows/upgrade-deps.yml index 74f6dafb..2b165971 100644 --- a/.github/workflows/upgrade-deps.yml +++ b/.github/workflows/upgrade-deps.yml @@ -29,7 +29,7 @@ jobs: - name: Upgrade dependencies run: | rm -f yarn.lock - yarn dlx yarn-upgrade-all + npx --yes yarn-upgrade-all - name: Build run: yarn build - name: Detect changes diff --git a/README.md b/README.md index e9c95500..b66d7bb3 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ To use the polyfill, add this script tag to your document ``: ```js ``` diff --git a/index.html b/index.html index 45e8460c..6e841a2a 100644 --- a/index.html +++ b/index.html @@ -62,19 +62,85 @@

CSS Anchor Positioning Polyfill

>WPT examples Draft Spec +
+

Anchoring Elements Using CSS

+

+ The CSS anchor positioning + specification + defines anchor positioning, "where a positioned element can size and + position itself relative to one or more 'anchor elements' elsewhere on + the page." This CSS Anchor Positioning Polyfill supports and is based on + this specification. +

+

+ The proposed anchor() and + anchor-size() functions add flexibility to how absolutely + positioned elements can be placed within a layout. Instead of being + sized and positioned based solely on the position of their containing + block, the proposed new functions allow absolutely positioned elements + to be placed relative to one or more author-defined anchor elements. +

+ +
-

Anchor @@ -84,6 +150,23 @@

Target
Anchor
+

+ With polyfill applied: Target and Anchor's right edges line up. Target's + top edge lines up with the bottom edge of the Anchor. +

+ 
+/* demo.css */
+
+#my-anchor-positioning {
+  anchor-name: --my-anchor-positioning;
+}
+
+#my-target-positioning {
+  position: absolute;
+  top: anchor(--my-anchor-positioning bottom);
+  right: anchor(--my-anchor-positioning right, 50px);
+}

@@ -94,6 +177,23 @@

Target
Anchor
+

+ With polyfill applied: Target is positioned at the top left corner of + the Anchor. +

+ 
+/* a style tag */
+
+#my-anchor-style-tag {
+  anchor-name: --my-anchor-style-tag;
+}
+
+#my-target-style-tag {
+  position: absolute;
+  bottom: anchor(--my-anchor-style-tag start);
+  right: anchor(--my-anchor-style-tag left);
+}

@@ -120,8 +220,27 @@

Anchor +

+ With polyfill applied: Target and Anchor's right edges line up. Target's + top edge lines up with the bottom edge of the Anchor. +

+ 
+/* inline style attributes */
+
+/* anchor */
+
+  style="anchor-name: --my-anchor-in-line"
+
+/* target */
+
+  style="
+    position: absolute;
+    top: anchor(--my-anchor-in-line bottom);
+    right: anchor(--my-anchor-in-line right);
+  "

-
+

@@ -149,6 +321,28 @@

Outer-anchored Target +

+ With polyfill applied: The Inner-anchored Target is positioned at the + top right corner of the Anchor. The Outer-anchored Target is positioned + at the bottom left corner of the Anchor. +

+ 
+#scroll-anchor {
+  anchor-name: --scroll-anchor;
+}
+
+#inner-anchored {
+  position: absolute;
+  bottom: anchor(--scroll-anchor top);
+  left: anchor(--scroll-anchor end);
+}
+
+#outer-anchored {
+  position: absolute;
+  top: anchor(--scroll-anchor bottom);
+  right: anchor(--scroll-anchor start);
+}

@@ -159,8 +353,27 @@

Anchor
Target
+

+ With polyfill applied: Target's top edge is positioned at 50% of the + height of the Anchor. The right edge of the Target lines up with 100% of + the width of the Anchor (i.e. the Anchor's right edge). +

+ 
+#my-anchor {
+  anchor-name: --my-anchor;
+}
+
+#my-target {
+  --center: anchor(--my-anchor 50%);
+  --full: anchor(--my-anchor 100%);
+
+  position: absolute;
+  top: var(--center);
+  right: var(--full);
+}

-
+ + diff --git a/package.json b/package.json index 777c9e3a..c9120bf3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@oddbird/css-anchor-positioning", - "version": "0.0.1-alpha.1", + "version": "0.0.1", "description": "Polyfill for the proposed CSS anchor positioning spec", "license": "BSD-3-Clause", "publishConfig": { @@ -85,7 +85,7 @@ "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^5.41.0", "@typescript-eslint/parser": "^5.41.0", - "@vitest/coverage-istanbul": "^0.24.3", + "@vitest/coverage-istanbul": "^0.24.4", "cross-env": "^7.0.3", "eslint": "^8.26.0", "eslint-config-prettier": "^8.5.0", @@ -104,8 +104,8 @@ "ts-node": "^10.9.1", "typescript": "^4.8.4", "uuid": "^9.0.0", - "vite": "^3.2.1", - "vitest": "^0.24.3" + "vite": "^3.2.2", + "vitest": "^0.24.4" }, "resolutions": { "tslib": ">=2" diff --git a/public/anchor-math.css b/public/anchor-math.css index c69b5186..e2f311ec 100644 --- a/public/anchor-math.css +++ b/public/anchor-math.css @@ -6,6 +6,6 @@ --full-math: anchor(--my-anchor-math 100%); position: absolute; - left: var(--full-math); top: calc(var(--full-math) - 50px); + left: var(--full-math); } diff --git a/public/anchor-scroll.css b/public/anchor-scroll.css index 326cf827..558e7a6d 100644 --- a/public/anchor-scroll.css +++ b/public/anchor-scroll.css @@ -16,7 +16,7 @@ #placefiller-before-anchor { display: inline-block; - width: 500px; + width: 300px; } #scroll-anchor { @@ -24,13 +24,13 @@ } #inner-anchored { - bottom: anchor(--scroll-anchor top); position: absolute; - right: anchor(--scroll-anchor start); + bottom: anchor(--scroll-anchor top); + left: anchor(--scroll-anchor end); } #outer-anchored { position: absolute; - right: anchor(--scroll-anchor start); top: anchor(--scroll-anchor bottom); + right: anchor(--scroll-anchor start); } diff --git a/public/anchor.css b/public/anchor.css index 6ec5345c..416cdfcc 100644 --- a/public/anchor.css +++ b/public/anchor.css @@ -7,6 +7,6 @@ --full: anchor(--my-anchor 100%); position: absolute; - right: var(--full); top: var(--center); + right: var(--full); } diff --git a/public/demo.css b/public/demo.css index 7546c6ca..35e99d24 100644 --- a/public/demo.css +++ b/public/demo.css @@ -11,6 +11,7 @@ html { --bg: var(--gray-1); --brand: var(--green-9); --button-border: var(--text); + --callout: var(--gray-3); --disabled-bg: var(--gray-6); --disabled-text: var(--gray-2); --grad: var(--lime-0); @@ -18,6 +19,7 @@ html { --link-focus: var(--text); --outer-anchored: var(--blue-2); --text: var(--gray-9); + --note-color: var(--target); background-color: var(--bg); color: var(--text); @@ -29,6 +31,7 @@ html { --action: var(--action-dark); --bg: var(--gray-9); --brand: var(--green-3); + --callout: var(--gray-8); --grad: var(--lime-9); --gradient-bg: var(--gradient-16); --text: var(--gray-2); @@ -94,10 +97,12 @@ footer p { .demo-item { display: grid; - gap: 2rem; + gap: 3em; grid-template: 'heading heading heading' min-content - '. elements .' min-content/minmax(0, 5rem) 1fr minmax(0, 5rem); + '. elements .' min-content + 'note note note' min-content + 'code code code' min-content/minmax(0, 5rem) 1fr minmax(0, 5rem); } /* stylelint-disable no-descending-specificity */ @@ -109,6 +114,14 @@ footer p { grid-area: elements; } +.demo-item .note { + background-color: var(--callout); + border-left: 0.5em solid var(--note-color); + grid-area: note; + margin: 2em 0 0; + padding: 1em; +} + /* links & buttons */ /* prettier-ignore */ @@ -217,3 +230,14 @@ h2 [aria-hidden]:active { .outer-anchored { --element-color: var(--outer-anchored); } + +/* code samples */ +pre { + border: thin dotted gray; + background-color: var(--callout); + font-family: var(--font-mono); + grid-area: code; + overflow-x: auto; + max-width: 100%; + padding: 1em; +} diff --git a/yarn.lock b/yarn.lock index 77929208..631f740c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -474,7 +474,7 @@ __metadata: "@types/uuid": ^8.3.4 "@typescript-eslint/eslint-plugin": ^5.41.0 "@typescript-eslint/parser": ^5.41.0 - "@vitest/coverage-istanbul": ^0.24.3 + "@vitest/coverage-istanbul": ^0.24.4 cross-env: ^7.0.3 css-tree: ^2.2.1 eslint: ^8.26.0 @@ -494,8 +494,8 @@ __metadata: ts-node: ^10.9.1 typescript: ^4.8.4 uuid: ^9.0.0 - vite: ^3.2.1 - vitest: ^0.24.3 + vite: ^3.2.2 + vitest: ^0.24.4 languageName: unknown linkType: soft @@ -758,9 +758,9 @@ __metadata: languageName: node linkType: hard -"@vitest/coverage-istanbul@npm:^0.24.3": - version: 0.24.3 - resolution: "@vitest/coverage-istanbul@npm:0.24.3" +"@vitest/coverage-istanbul@npm:^0.24.4": + version: 0.24.4 + resolution: "@vitest/coverage-istanbul@npm:0.24.4" dependencies: istanbul-lib-coverage: ^3.2.0 istanbul-lib-instrument: ^5.2.1 @@ -768,8 +768,8 @@ __metadata: istanbul-lib-source-maps: ^4.0.1 istanbul-reports: ^3.1.5 test-exclude: ^6.0.0 - vitest: 0.24.3 - checksum: 289b5d55ee815a941fbabf29de10d39b32af92741a6539f323dc8bbb308d1a4dfeddebb48b0db897acf89dd3ccd214362b6c4db1d7f5640add8096e424d99a8e + vitest: 0.24.4 + checksum: ba93174d6a34f01688108d97e71906df4e42b2cfe1f4e8b55a8e303f95b3337d7c368d52ad6fe159b8639da00b39f9efbc783c7d74c584f2b938f8cd2b1c0f05 languageName: node linkType: hard @@ -4899,7 +4899,7 @@ __metadata: languageName: node linkType: hard -"tinybench@npm:^2.3.0": +"tinybench@npm:^2.3.1": version: 2.3.1 resolution: "tinybench@npm:2.3.1" checksum: 74d45fa546d964a8123f98847fc59550945ed7f0d3e5a4ce0f9596d836b51c1d340c2ae0277a8023c15dc9ea3d7cb948a79173bfc46338c9b367c6323ea1eaf3 @@ -5231,9 +5231,9 @@ __metadata: languageName: node linkType: hard -"vite@npm:^3.0.0, vite@npm:^3.2.1": - version: 3.2.1 - resolution: "vite@npm:3.2.1" +"vite@npm:^3.0.0, vite@npm:^3.2.2": + version: 3.2.2 + resolution: "vite@npm:3.2.2" dependencies: esbuild: ^0.15.9 fsevents: ~2.3.2 @@ -5262,13 +5262,13 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: d33f6f4c80f85f327cf74c56d2189f1ba1d808987501eae9455c65bbb1ba5ea96af0f68647e18fe0c61e82126ea91f10480c1e80964a6836a751502647a42f2b + checksum: 7197ac91c612dda922367a95afa1b210353d6168d41845c186e2217bda1328d17b021b93d8089e336f9533b94645ae5dca18bb10937759f559c87006dd957fcd languageName: node linkType: hard -"vitest@npm:0.24.3, vitest@npm:^0.24.3": - version: 0.24.3 - resolution: "vitest@npm:0.24.3" +"vitest@npm:0.24.4, vitest@npm:^0.24.4": + version: 0.24.4 + resolution: "vitest@npm:0.24.4" dependencies: "@types/chai": ^4.3.3 "@types/chai-subset": ^1.3.3 @@ -5277,7 +5277,7 @@ __metadata: debug: ^4.3.4 local-pkg: ^0.4.2 strip-literal: ^0.4.2 - tinybench: ^2.3.0 + tinybench: ^2.3.1 tinypool: ^0.3.0 tinyspy: ^1.0.2 vite: ^3.0.0 @@ -5300,7 +5300,7 @@ __metadata: optional: true bin: vitest: vitest.mjs - checksum: dd954f57396b81df466dd4346aa6c95709a1b3c2409d5526d3172fa34ec684f756a855f885778929a6b903a22b2517ff79d22f936fb3e4d7d54ff24e8e577459 + checksum: 5e6072ce6b85e8130a1a44012350887984577f6e120c3b13128a576b1c80c3bf7a5bcc458b3989e3f3ece70301f102781aaa53ea7c2cb0730ee7fc3dc51df300 languageName: node linkType: hard