Skip to content

Commit

Permalink
review
Browse files Browse the repository at this point in the history
  • Loading branch information
jgerigmeyer committed Jul 1, 2024
1 parent fc9377b commit 8c859e7
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 33 deletions.
1 change: 1 addition & 0 deletions content/blog/2022/cascade-layers-polyfill.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ tags:
- CSS
- Cascade Layers
- CSSWG
- Polyfill
image:
src: blog/2022/postcss-cascade-layers-polyfill.png
alt: |
Expand Down
1 change: 1 addition & 0 deletions content/blog/2023/web-platform-tests-polyfills.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ tags:
- GitHub
- JavaScript
- Testing
- Polyfill
image:
src: blog/2023/graph.jpg
summary: |
Expand Down
70 changes: 37 additions & 33 deletions content/blog/2024/anchor-position-polyfill.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,42 +7,46 @@ image:
alt: >
A rusty anchor hanging with the sea in the background.
author: james
oss: true
tags:
- Article
- OSS
- Anchor Position
- CSS
- Polyfill
summary: |
Sponsor support for continued development of the
Anchor Position Spec is making the Anchor Position Polyfill more useful.
CSS Anchor Positioning Spec is making the Anchor Position Polyfill more useful.
Here's a summary of the latest updates.
---
A couple years ago, OddBird started working on a polyfill for Anchor Position,
as the spec started to take form. Now that the spec has stabilized, and Chromium
has begun implementation, we are relying on our sponsors to support development
of the polyfill. Thanks to their contributions, we're releasing [v0.0.6].

A couple years ago, OddBird started working on a polyfill for [CSS Anchor
Positioning] as the spec started to take form. Now that the spec has stabilized
and Chromium has begun implementation, we are relying on our sponsors to support
development of the polyfill. Thanks to their contributions, we're releasing
[v0.1.0].

[CSS Anchor Positioning]: https://drafts.csswg.org/css-anchor-position/
[v0.1.0]: https://github.com/oddbird/css-anchor-positioning/releases/tag/v0.1.0

## Updates in v0.1.0

1. `position-anchor`

In their full form, anchor functions can get quite verbose and repetitive.

In their full form, anchor functions can be quite verbose and repetitive.

```css
#target{
#target {
top: anchor(--my-anchor bottom);
width: anchor-size(--my-anchor width);
}
```

`position-anchor` allows you to specify a default anchor for an element.
[`position-anchor`] allows you to specify a default anchor for an element.

[`position-anchor`]: https://drafts.csswg.org/css-anchor-position/#position-anchor

```css
#target{
#target {
position-anchor: --my-anchor;
top: anchor(bottom);
width: anchor-size(width);
Expand All @@ -51,38 +55,40 @@ In their full form, anchor functions can get quite verbose and repetitive.

You can also use this to share positioning rules while using different anchors.
Both Target A and Target B will be positioned to the right of their anchor, but
they will use their own anchors.
they will use different respective anchors.

```css
.target{
.target {
left: anchor(right);
}
.target#a{
.target#a {
position-anchor: --anchor-a;
}
.target#b{
.target#b {
position-anchor: --anchor-b;
}
```

`position-anchor` will also be useful for things like [`inset-area`], which
isn't yet supported by the Polyfill.
isn't yet supported by the polyfill.

[`inset-area`]: https://drafts.csswg.org/css-anchor-position-1/#inset-area
[`inset-area`]: https://drafts.csswg.org/css-anchor-position/#inset-area

2. Anchor validity

Thanks to a great contribution from [@ayoreis], the validity algorithm has been
updated to match the [spec]. More can be found in the [issue], but this change
makes more elements available for anchoring. The notable use case is you can now
anchor to another element that is anchored as well (as long as the anchor
element is layed out before the target element).
makes more elements available for anchoring. Notably, you can now anchor to
another element that is anchored as well (as long as the anchor element is layed
out before the target element).

[@ayoreis]: https://github.com/ayoreis
[spec]: https://drafts.csswg.org/css-anchor-position-1/#target
[spec]: https://drafts.csswg.org/css-anchor-position/#target
[issue]: https://github.com/oddbird/css-anchor-positioning/issues/103

3. Support multiple names in `anchor-name`.
3. Support multiple names in [`anchor-name`].

[`anchor-name`]: https://drafts.csswg.org/css-anchor-position/#name

In this example, both `#target-a` and `#target-b` are referring to the same
element, but with different names.
Expand All @@ -91,18 +97,16 @@ element, but with different names.
.anchor {
anchor-name: --a, --b;
}

#target-a {
position-anchor: --a;
}

#target-b {
position-anchor: --b;
}
```

This will enable a number of use cases, for instance if you want `#target-b` to
have a different anchor on a different screen size.
This enables a number of uses, for instance if you want `#target-b` to have a
different anchor on a different screen size.

```css
@media (min-width: 768px){
Expand All @@ -115,29 +119,29 @@ have a different anchor on a different screen size.
## What's next?

While a lot of the basic functionality is already possible with the polyfill,
there's a lot left to do to bring the Polyfill up to date with the spec. Our
there's a lot left to do to bring the polyfill up to date with the spec. Our
[v1.0.0 Milestone] is prioritized based on what we think will be the most
impactful and useful features, and some of the upcoming ones are:

[v1.0.0 Milestone]: https://github.com/oddbird/css-anchor-positioning/milestone/1

- [#91] Applying the Polyfill to dynamic elements
- [#91] Applying the polyfill to dynamic elements
- [#167] Position Fallback
- [#180] Anchor Scope
- [#180] `anchor-scope`
- [#181] Support for `inset-area`

[#91]: https://github.com/oddbird/css-anchor-positioning/issues/91
[#167]: https://github.com/oddbird/css-anchor-positioning/issues/167
[#180]: https://github.com/oddbird/css-anchor-positioning/issues/180
[#181]: https://github.com/oddbird/css-anchor-positioning/issues/181

If you're as eager as I am to use these features, there's a few ways you can
If you're as excited as I am to use these features, there are a few ways you can
help. First, let us know which features you're most eager to see supported by
commenting on the GitHub issues. We also welcome PRs.

And of course, [sponsoring] OddBird's Open Source work is a great way to help
make our continued work on this polyfill and other work possible. We're grateful
for our existing sponsors who have made this release possible, and you can see
them below.
make our continued work on this polyfill (and others) possible. We're grateful
for our [existing sponsors] who have made this release possible!

[sponsoring]: https://opencollective.com/oddbird-open-source
[existing sponsors]: /polyfill/#open-source-sponsors

0 comments on commit 8c859e7

Please sign in to comment.