Bramus Van Damme | State of the Browser

Bramus is a web developer from Belgium. He’s part of the Chrome Developer Relations team at Google, focusing on CSS, Web UI, and DevTools. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since. Before joining Google, Bramus worked as a freelance developer in various frontend and backend roles. For seven years he also was a College Lecturer Web & Mobile, educating undergrad students all about HTML, CSS, and JavaScript — in that order.

I’d really like to have this so that I can change `transform-origin` on a menu that has `scale` transition on toggle. But this approach doesn’t work on the anchor target element itself since it’s a container query block can’t style the container itself, not sure how useful this is without extra DOM. Maybe `transform-origin` should add a new keyword value like `match-position`. #CSS #CSSAnchorPositioning
https://fed.brid.gy/r/https://bsky.app/profile/did:plc:cs3zn3kikj5kwzljlvyr55sg/post/3m27d4ulwcw2v
IntentToShip (@intenttoship.dev)

Blink: Intent to Ship: CSS Anchored Fallback Container Queries https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeTTXWgFr_uJaL2xxjPmsXTWr6Ogi1VtJHB43gGkWyDHUw%40mail.gmail.com

Bluesky Social

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

position-area: span-all not added with CSSOM

...

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/

Popping Comments With CSS Anchor Positioning And View-Driven Animations | CSS-Tricks

The State of CSS 2024 survey wrapped up and the results are interesting, as always. Even though each section is worth analyzing, we are usually most hyped

CSS-Tricks

@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

CSS overflow-anchor (Scroll Anchoring) | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.