- From: Jhey Tompkins via GitHub <sysbot+gh@w3.org>
- Date: Mon, 05 Dec 2022 14:25:55 +0000
- To: public-css-archive@w3.org
Yep – Transitioning the inset properties or being able to use those values in calc to generate `transform` values would be super useful. The demo in question is this one 👇 https://user-images.githubusercontent.com/842246/205658978-489b6590-bbbf-44ee-a1d2-cd369c32db88.mp4 It shows a use case where you might want an element to follow user interaction. Not one I'd throw into production anytime soon 😅 But it works using `:has()` to update and `--active-anchor` custom property (this did work in ~108). ```css :root { --active-anchor: --email; --active-left: anchor(var(--active-anchor) right); --active-top: anchor(var(--active-anchor) center); } :root:has(.form-group:focus-within) { --anchor-scale: 1; --anchor-transition: top 0.2s, left 0.2s, transform 0.2s; } #password { anchor-name: --password; } :root:has(#password) { --active-anchor: --password; } ``` A combination of implicit anchor and transition could also be useful in a variety of tooltip/overlay scenarios too. Even those type trigger UI where like on here when you type `#` to get the dropdown (What is the technical name for that pattern? 😅 ) -- GitHub Notification of comment by jh3y Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8181#issuecomment-1337460047 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 5 December 2022 14:25:57 UTC