I recreated the Google Antigravity website with Modern CSS.
Tag Archives: css
Anchor Positioning and the Inset-Modified Containing Block (IMCB)
If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for short).
Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open
Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal) <dialog> is open.
Señors @ Scale: Modern CSS at Scale with Bramus
A while ago I joined Dan Neciu – whom I met at Frontmania in 2023 – on his “Señors @ Scale” podcast. We talked about all things CSS.
Anchor Positioning is transform-aware in Chrome 144+
Starting with Chrome 144, Anchor Positioning is going to be transform-aware. From then on, anchoring will resolve against the bounding box of the transformed ancho
Animating CSS width or height no longer forces a Main Thread animation (in Chrome, under the right conditions)
When their values don’t change throughout the animation, CSS width / height animations can run on the Compositor, instead of being forced to run on the Main Thread.
Combining Scroll-Driven Animations with @starting-style
How the cascade, the animation-fill-mode, and implicit keyframes make things a bit more complicated then you’d initially think …
Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up.
CSS @starting-style debugging is available in Chrome DevTools!
I built something that I needed into DevTools: debugging support for CSS @starting-style rules.
The CSS Podcast is back! And I’m a co-host now.
The CSS Podcast is back! Together with Una I’m co-hosting season 5 of the show, and we have some good episodes coming your way …