[csswg-drafts] Pull Request: [css-anchor-1] Update the anchor() math example

kizu has just submitted a new pull request for https://github.com/w3c/csswg-drafts:

== [css-anchor-1] Update the anchor() math example ==
[css-anchor-1] Update the anchor() math example

I was re-reading the specs, and noticed that one of the examples seemed to promise a fix for one of the use-cases I was wondering what could be the best fix for — the one where we can use an extensive calculation to get a centered message.

When trying it in the Canary, I noticed that the code for the example is not optimal, so I did update the example.

Here is a CodePen demonstrating the example with my changes (using the calculations instead off the missing `abs()`): https://codepen.io/kizu/pen/wvYYLGr?editors=1100

The changes:

1. Because the example does not contain `display: flex` or similar, the `justify-content` does not do anything. So, in order to make things work — to center the element properly — we can use `auto` margin.
2. We can also demonstrate the `anchor-default` instead of using the explicit anchor name in the calculation. Potentially, this can make it easier to later reuse this as a part of a position-fallback.
3. I did recently read the https://github.com/w3c/csswg-drafts/issues/8727 issue, and I mostly agree with it, so I took this chance to replace the physical keywords with logical (I like how when used inside `anchor()` there is no need to think of which axis we're thinking about, and this potentially could be used to also separate these parts and reuse for different axis easier).

See https://github.com/w3c/csswg-drafts/pull/8856


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 18 May 2023 21:19:30 UTC