Seems this is a browser bug (but Edge stable and Safari TP both have the same issue) or maybe I don't understand `position-area` right, but if you use CSSOM to set multiple values to `position-area` with one of them being `span-all`, `span-all` would be ignored/removed. #CSS #CSSOM #CSSAnchorPositioning

https://codepen.io/marchbox/pres/wBBryoz

Oh man, how can we get browsers to ship #CSSanchorPositioning? #css is saving JS once again and we need to make this possible in all browsers!!!

#webkit & #mozilla where you at?

CSS Anchor positioning sucked the fun out of development for me currently.

No idea why position-try-fallbacks isn't working and I'm too exhausted to find out.

Maybe in a few weeks or month there are resources that show reasons why it gets ignored. But for now I have no energy left to fight with this.

I guess development on Questlog is paused for the rest of the year. An easy and quick addition was supposed to make it easier to use. But I've spent so much time on this small "feature" already that I just have no energy left for anything other.

Sorry for everyone that is still waiting for better Reviews and other bigger features…

#Coding #WebDev #CSS #CSSAnchorPositioning

Wanted to play around with #CSSAnchorPositioning. Everything works in Chrome but the Polyfill just positions every element in the top left in Safari and Firefox.

Bummer… So I probably won't try this the next two years again and still fight this challenge with JavaScript.

Really wanted this to work, but for such a small thing (that is solved with JavaScript for years) that's just too much work yet.

#WebDev #Coding #CSS

💬 Popping Comments With CSS Anchor Positioning and View-Driven Animations

by Juan Diego Rodríguez @monknow_dev
at @csstricks
#css #CSSanchorPositioning #webdev #ViewDrivenAnimations

https://css-tricks.com/popping-comments-with-css-anchor-positioning-and-view-driven-animations/

@jamessw Wow, that's nuts! When are we getting this in #mozilla and #webkit browsers?

Love the work going into the polyfill here, but it sure as heck isn't _quick_ for this sort of awesome use case.

#CSSAnchorPositioning #webDev

@kizu CSS Anchor positioning, please and thank you!

🙏 🙇 👼

#CSSAnchorPositioning #webkit #mozilla

@jensimmons Would love it if I could use https://caniuse.com/css-overflow-anchor cross browser. More advanced scroll layouts really get slick with this added and it's too bad the way this needs to be polyfilled with JS to work in #WebKit.

#CSSAnchorPositioning

Living on the double edge with this #CSSAnchorPositioning API lately. Cool to see the APIs getting closer, but the today is `position-anchor`, yesterday it's `inset-area`, tomorrow it's something else is a bit dizzying when you're hopping back and forth between 6+ Chromium variants for testing and developments. 🫠 🌀 😵‍💫

@csswg Do we really not got to transform anchored content like this? 😱 😭

https://issues.chromium.org/issues/364318220#comment5

Seems like a great use case for anchored content would be to call attention to it by pulsing via scale or shaking via translate or what not. Right? 🤔 🤷‍♂️

#css #CSSAnchorPositioning #csswg #sayItAintSo #webDev

@kizu Caught an interesting bug here... seems that a parent with "transform" related styling will confused "position-anchor" resolution. 🐛

https://issues.chromium.org/issues/364318220

If you'd love this to be fixed too, remember to add your "+1" to support Chromium Devs in understanding the priority of issues like these. 🙇

#CSSAnchorPositioning #testTheWebForward #chrome

Hey #css friends! Looking at CSS Anchor Positioning... I've got an arrow on a tooltip, what's the path to _knowing_ which `position-try-fallbacks` is actually being leveraged to ensure the tooltip is displayed correctly?

#CSSAnchorPositioning #whatAmIMissing

#CSSQuestions #CSSAnchorPositioning #confused

I should be able to make https://codepen.io/Westbrook/pen/wvLBwLP look like https://codepen.io/Westbrook/pen/QWXwWWx even though the earlier uses `position: fixed` and the later does not, right? :thinkhappy:

Now that CSS Anchor Positioning allows us to "name a reference" in CSS, do we need being able to consume the value of `:nth-child` or similar when naming things?

Something like:

a {
anchor-name: --link-${indexOf};
}

So we could anchor to ANY `<a>` on a page without needing to explicitly give each one of those an `anchor-name`?

I don't much know the View Transitions API, but maybe it could benefit from similar?

#CSSWG #CSSAnchorPositioning #CSSNaming #CSSNext

🔵⚪️ Let’s hang! An intro to CSS Anchor Positioning with basic examples
by Brecht De Ruyte
@utilitybend @utilitybend
#CSSAnchorPositioning #css #AnchorPositioning #webdev

https://utilitybend.com/blog/lets-hang-an-intro-to-css-anchor-positioning-with-basic-examples

> The #CSS #AnchorPositioning #API is a game-changer in #web #development because it lets you natively position elements relative to other elements, known as anchors. This API simplifies complex #layout requirements for many interface features like menus and submenus, tooltips, selects, labels, cards, settings dialogs, and many more.

https://developer.chrome.com/blog/anchor-positioning-api

#webDev #cssAnchorPositioning

🟦 Drawing a Line to Connect Elements with CSS Anchor Positioning
by Silvestar Bistrović @malimirkeccita
at @FrontendMasters

#CSSanchorPositioning #css #webdev

https://frontendmasters.com/blog/drawing-a-line-to-connect-elements-with-css-anchor-positioning/