How do we move logical shorthands forward?
There are several proposals, but one major road block
We’re trying to make progress on shorthand syntax for CSS logical properties. But the path forward depends on where we hope to be a decade from now.
Catching up to the spec
Our sponsors are supporting the continued development of the CSS Anchor Positioning Polyfill. Here’s a summary of the latest updates.
Check out our Winging It conversations about design, frontend, and backend development.
Winging It episode 8: CSS Anchor Positioning in Practice
Winging It episode 16: Debugging CSS Anchor Positioning
A few 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.
position-anchor
In their full form, anchor functions can be quite verbose and repetitive.
#target {
top: anchor(--my-anchor bottom);
width: anchor-size(--my-anchor width);
}
position-anchor
allows you to specify a default anchor for an element.
#target {
position-anchor: --my-anchor;
top: anchor(bottom);
width: anchor-size(width);
}
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 different respective anchors.
.target {
left: anchor(right);
}
.target#a {
position-anchor: --anchor-a;
}
.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.
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. 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).
anchor-name
.In this example, both #target-a
and #target-b
are referring to the same
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 where a target can be anchored to
different anchors, depending on what is available. Perhaps some of your pages
have a different layout, where you want #target-b
to anchor to a
#side-anchor
if there is one, but otherwise to the default .anchor
.
.anchor#side-anchor {
anchor-name: --b;
}
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 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:
anchor-scope
inset-area
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 others) possible. We’re grateful for our existing sponsors who have made this release possible, and you can see them below.
A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!
We love contributing back to the languages & tools that developers rely on, from CSS & Sass to browser polyfills and Python. Help us keep that work sustainable and focused on developer needs!
There are several proposals, but one major road block
We’re trying to make progress on shorthand syntax for CSS logical properties. But the path forward depends on where we hope to be a decade from now.
Can we get this process unstuck?
The CSS Working Group recently resolved to add a size
shorthand for setting both the width
and height
of an element. Many people asked about using it to set the ‘logical’ inline-size
and block-size
properties instead. But ‘logical shorthands’ have been stalled in the working group for years. Can we…
It’s not just a shorthand for anchor()
position-area
might be my favorite part of the CSS Anchor Positioning spec, with a ton of features packed in to make things just… work. But there’s no magic here, just a few key parts that work well.