Bram.us

フィード

記事のアイキャッチ画像
View Transitions Applied: Smoothly animating a border-radius with a View Transition
Bram.us
To smoothly animate things like borders as part of a View Transition, you need to duplicate that animation onto the ::view-transition-group. For best effect, have the View Transition separately capture the background and foreground of the element you’re animating.
2日前
記事のアイキャッチ画像
Place the Address Bar at the bottom in Chrome on Android
Bram.us
New in Chrome 134 on Android: the ability to place the Address Bar (aka “Omnibox”) at the bottom. To enable it, go to Chrome’s Settings, locate and tap “Address Bar”, and choose “Bottom”.
7日前
記事のアイキャッチ画像
View Transitions Applied: Dealing with the Snapshot Containing Block
はてなブックマークアイコン 1
Bram.us
Beware when manipulating the coordinates of the View Transition’s ::view-transition-group(*) pseudo. Depending on where you read those coordinates from, you might end up with layout jumps when writing them back. This post details the pitfalls and how to deal with them, unlocking more performant animations on the ::view-transition-group() pseudo along the way.
9日前
記事のアイキャッチ画像
Solved by StyleObserver: Element.matchContainer()
Bram.us
Martin Winkler published a package that polyfills Element.matchContainer to get notified in script when a Container Query matches/unmatches. Under the hood, it uses a StyleObserver.
18日前
記事のアイキャッチ画像
CSS @function + CSS if() = 🤯
Bram.us
Support for Nested Container Queries and the CSS if() function inside CSS Custom Functions make @function very powerful.
23日前
記事のアイキャッチ画像
CSS Custom Functions are coming … and they are going to be a game changer!
Bram.us
Chrome is currently prototyping CSS Functions, which is very exciting!
1ヶ月前
記事のアイキャッチ画像
View Transitions Applied: More performant ::view-transition-group(*) animations
Bram.us
If the dimensions of the ::view-transition-group(*) don’t change between the old and new snapshot you can optimize its keyframes so that it animates on the compositor.
1ヶ月前
記事のアイキャッチ画像
View Transitions Snippets: Keeping the page interactive while a View Transition is running
Bram.us
The ::view-transition root overlay captures all clicks … but you can undo that.
1ヶ月前
記事のアイキャッチ画像
MPA View Transitions Deep Dive
Bram.us
Back in December I joined Kevin J Powell on his channel to talk about Cross-Document View Transitions
2ヶ月前
記事のアイキャッチ画像
CSS attr() gets an upgrade
Bram.us
You can now use `attr()` with any CSS property — not just content – and it can parse values into data types other than <string>.
2ヶ月前