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

Bramus @bram.us · 1h

😇😇😇

(Rowdy had an interactive part in his talk where people could send jokes straight to a thermal printer. At the end, some intelligence of the articifial kind was instructed to pick the best joke from all submissions as the winner)

Rowdy Rabouw @rowdy.codes · 6h

No, no, no @bram.us It doesn’t work that way. 😆 #CodemotionMilan

1 9

Reposted by Bramus

Stefan Judis @stefanjudis.com · 5h

Disclaimer: the following is Chromium-only and more than cutting edge, but it's kinda wild that we can implement custom functions like "light-dark()" ourselves eventually.

Here's @bram.us looking into the future. 👇

www.bram.us/2025/09/30/c...

@function --light-dark(--l, --d) {
result: if(color-scheme(dark): var(--d); else: var(--l));
}

1 1 3

Reposted by Bramus

Веб-стандарты @web-standards.ru · 10h

Кастомные функции и if() в CSS. Юна Кравец и Брамус возвращаются в новом составе CSS Podcast. В свежем эпизоде — про нетипичные для CSS новинки, которые появились в Chrome в этом году и сильно поменяют, как мы пишем стили в будущем. #css #podcast

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

CSS Podcast. CSS if() and custom functions

2 4

Bramus @bram.us · 10h

👀

Bramus @bram.us · 10h

With all the excitement of (Same-Document) View Transitions (and more VT features) becoming Baseline Newly available (yay! 🎉), one might overlook the inclusion of the moveBefore() method.

This method is a pretty big deal as it allows you to move elements around the DOM while preserving their state.

1 11 60

Reposted by Bramus

Piccalilli @piccalil.li · 8d

A great run-down of what corner-shape is capable of. You’ll be surprised at what can be achieved!

css-tip.com/corner-shape/

CSS Shapes using corner-shape

Recreate all the common CSS shapes using corner-shape and border-radius

css-tip.com

2 12

Reposted by Bramus

Justin Fagnani @justinfagnani.com · 1d

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 · 1d

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

groups.google.com

7 16 58

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 · 1d

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.

2 7 31

Reposted by Bramus

Una Kravets @una.im · 2d

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 · 2d

Thanks!

Bramus @bram.us · 2d

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 · 2d

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 · 2d

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 · 2d

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 17

Bramus @bram.us · 2d

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 · 2d

@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 · 2d

🚀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 · 2d

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 · 3d

Ooh, #TIL!

Bramus @bram.us · 3d

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 · 3d

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 · 4d

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)