Lightnews — Scholar-powered news

Bramus

@bram.us

8.9K followers 340 following 910 posts

Chrome DevRel at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us. Lives in Belgium.

Posts Media Videos Starter Packs

Pinned

Bramus @bram.us · Dec 17

🔥 Remember Internet Explorer’s Page Transitions? THEY’RE BACK BABY!

👾 Demo: ie-page-transitions.netlify.app
⌨ Repo: github.com/bramus/ie-pa...

To configure these, use the meta tags from the olden days + load up the library.

Works in IE 5.5–7.0, Chrome 126+, and Safari 18.2 (buggy).

17 27 140

Bramus @bram.us · 25m

I see you featured --light-dark() which, I guess, you got from my blog.

Worth noting is that the code doesn't actually work right now, because the `color-scheme()` query-fn isn't implemented in any browser yet.

Also note that the color-scheme property can be set on _any_ element, not just :root.

Reposted by Bramus

Tim Kadlec @tkadlec.bsky.social · 1h

Got the slides up now. noti.st/tkadlec/gIzx...

One Step Ahead by Tim Kadlec

As the web grows more powerful, so do user expectations. What feels fast today will be slow tomorrow, and meeting current performance standards will soon be the bare minimum. The real winners will be ...

noti.st

1 1 1

Bramus @bram.us · 9h

A lot has happened since Chrome shipped Same-Document View Transitions in 2023.

In 2024 we shipped Cross-Document VTs, added refinements such as `view-transition-class` and VT Types, and also welcomed Safari in adding VT support.

And this year … well, I wrote a post summing it all up.

What's new in view transitions (2025 update) | Blog | Chrome for Developers

An overview of what changed for View Transitions in 2025

developer.chrome.com

5 17

Bramus @bram.us · 15h

I would have guessed that 😁

Bramus @bram.us · 15h

And from the more recent, non-math, functions, which do you like?

Bramus @bram.us · 15h

And from the more recent, non-math, functions, which do you like?

Bramus @bram.us · 15h

And from the more recent, non-math, functions, which do you like?

1 1

Bramus @bram.us · 1d

What are your favorite CSS functions?

23 4 17

Reposted by Bramus

Bruce Lawson @brucel.bsky.social · 1d

AT #smashingconf, @tkadlec.bsky.social is reminding us that betting on the browser (rather than JavaScript abstractions) is our best chance of long-term success.

1 8 35

Reposted by Bramus

Patrick Brosset @patrickbrosset.com · 1d

I gave a lightning talk at yesterday’s @smashingconf.com Jam session on CSS masonry. Here are my slides.

In short: Masonry isn’t only for Pinterest-style layouts, doing Masonry on the web today is hard, but built-in Masonry support is coming to browsers very soon!

Patrick - Talks

Talks

patrickbrosset.com

3 8 14

Reposted by Bramus

CSS by T. Afif @css-only.dev · 2d

Here is my idea with less of code

css-tip.com/tooltip-anch...

The trick is to play with the margin property to show/hide the arrows.

cc @una.im @bram.us

12 46

Bramus @bram.us · 1d

👀

Bramus @bram.us · 2d

Anchor(ed) queries are set to ship next month in Chrome 143.

```
#anchored {
position-try-options: flip-block;
container-type: anchored;
}

@container anchored(fallback: flip-block) {
#anchored > .arrow {
--arrow-rotation: 180deg;
}
}
```

Demo by @una.im: codepen.io/una/pen/ZYbz...

Anchor Queries - Reposition tether arrow (Chrome 139+)

...

codepen.io

Bramus @bram.us · 2d

This solution by Niels to “making the arrow point to the anchor” is quite clever!

In Chrome you’ll soon be able to use a new anchor() style query that allows you to query which position-try-fallback is currently being used, and style the (one) tether based on that.

Niels Leenheer @html5test.com · 2d

I was reading through the CSS Anchored Position spec and I just could not figure out how to make a tooltip that points towards the anchor. To me that was kind of an obvious requirement as this is a really common pattern for tooltips.

This is what I ended up with:
codepen.io/NielsLeenhee...

Anchored Positioning Tip pointing to anchor

...

codepen.io

1 16

Reposted by Bramus

Rick Byers @rbyers.net · 4d

I believe it's fundamentally impossible to ship Chrome on iOS meeting the same high quality bar we have on other platforms when we are forced to rely on WKWebView and very slow and unreliable issue handling.

1 4 18

Bramus @bram.us · 4d

Wonderful sketchnotes of a lovely evening. Thanks for that!

Reposted by Bramus

Jeroen Heijmans @jeroenheijmans.nl · 4d

Back home from #Fronteers "Dark Mode" evening conference, MC'd by @bram.us - taking a moment to share my sketch notes in this thread before tucking in!

1 2 4

Bramus @bram.us · 5d

At #fronteers #DarkMode, @utilitybend.com proposed the HTML Element.

It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range.

Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...

Brecht on stage showing some of the demos.

2 7 42

Bramus @bram.us · 5d

That is inherent to using View Transitions, because the snapshots render on top of the entire document.

Workaround is to add a view-transition-name to the element that must stay on top.

In the future you can use Scoped View Transitions for that, which we just announced in preview (see link).

Ready for developer testing: Scoped view transitions | Blog | Chrome for Developers

Help us build the next iteration of View Transitions

developer.chrome.com

1 2

Reposted by Bramus

Brecht De Ruyte @utilitybend.com · 5d

@bram.us starting his mc role at #fronteers

1 5

Bramus @bram.us · 5d

Exactly! I found the throttled version (see follow-up message) to be quite jarring though. Either you do it in realtime, or debounced.

Bramus @bram.us · 5d

I'm in Dordrecht (NL) to MC at @fronteers.bsky.social's "Dark Mode" conference later today and tonight.

Even though it's a new location, this feels like coming home, as I've been attending this conference since 2010 (and also spoke at the 2022 edition).

fronteersconf.org

Photo of the swag speakers get: a poster, a t-shirt, a DND sign, and a personalized gift (not pictured).

1 3 16

Bramus @bram.us · 5d

Nice job! 👏

Bramus @bram.us · 5d

Resizing in a throttled way does get jumpy when a scroller is involved along with responsive components.

Here's the Messages app for example. As you resize the app, the text bubbles resize, and thus the scroll offset needs to change, and thus the whole thing jumps at an interval.

Reposted by Bramus

Sophie Koonin @localghost.dev · 5d

Yes yes YES THIS. The best thing a web dev can do is put the frameworks down sometime and learn how it really works. @una.im @ @nordicjs.com

Una presents a slide that says "the best way to level up your web development skill set is to get good at CSS and HTML"

6 30 120