Lightnews — Scholar-powered news

Bramus

@bram.us

8.9K followers 340 following 930 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

Reposted by Bramus

Justin Fagnani @justinfagnani.com · 16h

inherit() is going to be absolutely huge for working with CSS custom properties. Two big things it'll enable:

Nested indentation:

--indent: calc(inherit(--indent, 0) + 1);

Overridable design token defaults:

--primary-color: inherit(--primary-color, blue);

IntentToShip @intenttoship.dev · 16h

Blink: Intent to Prototype: The inherit() CSS function

groups.google.com

7 15 55

Reposted by Bramus

Alex Russell @infrequently.org · 1d

Look, you might think frontend is fine and going well, but today I found a 1.1MB PNG (that could have been a 40K AVIF) in the critical path of an important app.

Embedded in an SVG as a `data:` URL.

Shipped as a React component.

12 6 140

Reposted by Bramus

CSS by T. Afif @css-only.dev · 20h

It's also easy to debug using @developer.chrome.com

It shows you which fallback position is used by crossing out all the others. When all of them are crossed out, the position defined on the element is the one used.

1 6 30

Reposted by Bramus

Una Kravets @una.im · 1d

The #CSSPodcast is back! 💕🎙️

Join @bram.us and I this season as we talk about a bunch of awesome new CSS features, starting with custom functions and if()

thecsspodcast.libsyn.com/92-css-if-an...

The CSS Podcast: 92: CSS if() and custom functions

Welcome back to the new season of the CSS Podcast, where Una and Bramus are your guides, your cohosts, and your CSS best friends. In this episode we dig into two very powerful new CSS features: inlin...

thecsspodcast.libsyn.com

1 6 42

Bramus @bram.us · 1d

Thanks!

Bramus @bram.us · 1d

Feestje op maandag! 🙌

a crowd of people watching a concert with blue lights shining on them

Alt: A crowd of people watching a concert with blue lights shining on them

media.tenor.com

Bramus @bram.us · 1d

Streaming and animations don't play nice together. What can help is to use DevTools to slow things down and show it that way.

Bramus @bram.us · 1d

Also: they named (*) the stages “gates”, so this Euro retro-classic has been stuck in my head all day:

www.youtube.com/watch?v=2JVN...

🤌 THE GATES ARE OPEN! 🤌

(* mistranslated?)

D-Devils - 6th Gate

YouTube video by xope87

www.youtube.com

Bramus @bram.us · 1d

I am currently in Milan (Italy) for CodeMotion, where I’ll be giving a talk tomorrow afternoon.

As you might have guessed/expected, I’ll be spreading the word on View Transitions 😊

3 1 16

Bramus @bram.us · 1d

Check out this sweet Scroll-Driven Animations demo created by Jeff (after he watched my free video course – scroll-driven-animations.style#learn)

codepen.io/webcraftsman...

(Browser support: Chrome 115, Safari 26)

1 6

Reposted by Bramus

Matthias Ott @matthiasott.com · 2d

✍️ New post: The Lifeblood of the Web

Because conferences are just 🔥🎉💙

#blogtober #web #conferences #community
matthiasott.com/notes/the-li...

The Lifeblood of the Web · Matthias Ott

Matthias Ott is an independent user experience designer and web design engineer from Stuttgart, Germany. He also teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design.

matthiasott.com

2 9 22

Bramus @bram.us · 1d

@nomster.bsky.social pointed out that a `custom.css` has privacy implications as well.

I recall Arc exposing custom props for its color theme (such as `--arc-palette-title`, ), which could be used to 1) Detect Arc but also to 2) Uniquely identify and track Arc users across the web.

1 1

Reposted by Bramus

Brecht De Ruyte @utilitybend.com · 1d

🚀As a case study, I tried to recreate the famous Guess Who game with built-in AI and the Prompt API. It was a really interesting experience, to say the least.
My heart is at CSS & UI, and always will be. However, I do love to experiment with a variety of (web)technologies 😄 Read all about it

Build a guessing game with the Prompt API | Blog | Chrome for Developers

My game of Guess Who demonstrates how AI can be used to build thoughtful game logic, and the importance of prompt engineering to get the outcomes you expect.

developer.chrome.com

1 5 9

Reposted by Bramus

Sara Soueidan @sarasoueidan.com · 1d

This talk by @nerdy.dev is a wonderful presentation of why CSS is awesome and why we love it so much www.youtube.com/watch?v=QW6G...

Just look at what's possible with #CSS today

And the format is great for the impatient ones (myself included). Right speed, right transitions (pun intended 😉)

Adam Argyle - 25 new & rad feature of CSS

YouTube video by CascadiaJS

www.youtube.com

1 5 53

Bramus @bram.us · 2d

Ooh, #TIL!

Bramus @bram.us · 2d

FWIW: there are extensions that allow you to set custom CSS on all/specific sites.

The injected CSS is Author-origin, though, so you'll most likely need to bump up the specificity of your selectors or slap some !important's on some (all?) declarations.

Bramus @bram.us · 2d

Many browsers _did_ support it back in the day, but moved away for <reasons>.

I don't know the details, but one thing that immediately comes to mind could be security. If a UA offers a custom sheet (at a fixed location), it'd be easy for malware to abuse this.

2 1

Reposted by Bramus

Aleksandr @aleksandrhovhannisyan.com · 3d

> Writing an article

> Hey I should explain some background knowledge first

> Hmm, maybe that should be its own article

> Neither article gets written

2 4 44

Bramus @bram.us · 3d

Out of curiosity, what would you put in your user-origin stylesheet?

(Side note: css-cascade-6 is the latest level of that spec — drafts.csswg.org/css-cascade-... — so there's more steps in the cascade nowadays)

Bramus @bram.us · 3d

IIRC it was possible at one time in Chrome, but the option got removed and replaced with some controls such as a slider to control the default font-size to use.

This predates my time at Chrome, so I don't l know the backstory there.

1 1

Bramus @bram.us · 3d

How UAs let you define the contents that goes in the user-origin is not defined anywhere, as that's an implementation detail.

Some browsers could offer a CLI flag that points to a file, others could use a textbox, others could let you refer to a file from the settings, etc.

Reposted by Bramus

Sara Soueidan @sarasoueidan.com · 7d

OK @kevinpowell.co has written what has to be one of the best (if not THE best) practical article to #CSS colors I have read in a while. piccalil.li/blog/a-pragm...

Easy to read, practical examples, and *perfect* for someone like me who's fallen behind and hasn't kept up with all the new stuff.

A pragmatic guide to modern CSS colours - part one

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...

piccalil.li

5 30 150

Reposted by Bramus

Sam Rose @samwho.dev · 3d

Oh shit, I needed this just recently but didn’t know it existed, so used aria-live.

denodell.com/blog/html-be...

HTML’s Best Kept Secret: The output Tag

Make your dynamic content accessible by default with the HTML tag that time forgot.

denodell.com

3 11 60

Reposted by Bramus

Katie Fenn @katiefenn.bsky.social · 4d

Hey #WDC2025, if you want a talk to watch on the way home, my talk from @heypresents.com was published today!

I make some Daft Punk with a MIDI controller and a web browser.

Hey! Presents @heypresents.com · 4d

Not only that, but we managed to interrupt a movie playing in the screen next door with the volume of the demo. It certainly woke us all up before heading off to the social. It sounded incredible! Watch the talk and find out more here:

heypresents.com/talks/around...

Around the wwworld: Web MIDI, Web AUDIO and what the web does best

So, you don't use the Web Audio and Web MIDI APIs in your day job - does that mean they have nothing important to tell us about the nature of the Web? Think again! Katie Fenn takes us on a tour of the...

heypresents.com

9 30

Reposted by Bramus

Chris Coyier @chriscoyier.net · 5d

rawdogging some shape() to build "round out" tabs.

I'll blog it eventually. modern CSS rules.

10 5 150