Bramus
@bram.us
Chrome DevRel at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us. Lives in Belgium.
Pinned
🔥 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).
👾 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).
🤩🤩
Firefox 147 just landed & it's pretty huge in terms of web features:
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
Firefox 147 release notes for developers (Beta) - Mozilla | MDN
This article provides information about the changes in Firefox 147 that affect developers.
Firefox 147 is the current Beta version of Firefox and ships on January 13, 2026.
developer.mozilla.org
January 13, 2026 at 2:22 PM
🤩🤩
I’m very happy to read that this year a new edition of Fronteers Dark Mode (www.fronteers.nl/en/conference/) will take place.
Last year’s edition was top notch. If you weren’t there, you missed out on something really really good …
Last year’s edition was top notch. If you weren’t there, you missed out on something really really good …
January 13, 2026 at 9:39 AM
I’m very happy to read that this year a new edition of Fronteers Dark Mode (www.fronteers.nl/en/conference/) will take place.
Last year’s edition was top notch. If you weren’t there, you missed out on something really really good …
Last year’s edition was top notch. If you weren’t there, you missed out on something really really good …
Reposted by Bramus
📢 New blog post: A polyfill for the HTML switch element.
Safari 17.4 added the native `` element. This post introduces a polyfill for it, covering accessibility, internationalization, styling, and its HTML spec status.
blog.tomayac.com/2026/01/12/a...
Safari 17.4 added the native `` element. This post introduces a polyfill for it, covering accessibility, internationalization, styling, and its HTML spec status.
blog.tomayac.com/2026/01/12/a...
A polyfill for the HTML switch element
The personal blog of Thomas Steiner
blog.tomayac.com
January 12, 2026 at 11:55 AM
📢 New blog post: A polyfill for the HTML switch element.
Safari 17.4 added the native `` element. This post introduces a polyfill for it, covering accessibility, internationalization, styling, and its HTML spec status.
blog.tomayac.com/2026/01/12/a...
Safari 17.4 added the native `` element. This post introduces a polyfill for it, covering accessibility, internationalization, styling, and its HTML spec status.
blog.tomayac.com/2026/01/12/a...
Reposted by Bramus
Made a lil' library:
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
January 12, 2026 at 6:52 PM
Made a lil' library:
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
codepen.github.io/slideVars/
Automatically detects CSS custom properties on the :root/html and gives you controls for adjusting them. (But it's also as configurable as you want it to be.)
Reposted by Bramus
Here's a little pure #CSS demo I made on @codepen.io a while back: clip element on #scroll codepen.io/thebabydino/...
(using scroll-driven animations, so support may still be spotty)
(using scroll-driven animations, so support may still be spotty)
December 17, 2025 at 3:16 PM
Here's a little pure #CSS demo I made on @codepen.io a while back: clip element on #scroll codepen.io/thebabydino/...
(using scroll-driven animations, so support may still be spotty)
(using scroll-driven animations, so support may still be spotty)
Reposted by Bramus
The speaker line up for #SotB26 is announced.
@bram.us
@cassiecodes.bsky.social
@kitation.co.uk
Fiona Safari
@jason-williams.co.uk
@mikehall314.bsky.social
@zachleat.com
It will be a full day of very interesting sessions and we can’t wait to see you all there!
2026.stateofthebrowser.com/speakers/
@bram.us
@cassiecodes.bsky.social
@kitation.co.uk
Fiona Safari
@jason-williams.co.uk
@mikehall314.bsky.social
@zachleat.com
It will be a full day of very interesting sessions and we can’t wait to see you all there!
2026.stateofthebrowser.com/speakers/
Speakers | State of the Browser
Here is the announced list of speakers for 2026's conference.
2026.stateofthebrowser.com
January 12, 2026 at 11:26 AM
The speaker line up for #SotB26 is announced.
@bram.us
@cassiecodes.bsky.social
@kitation.co.uk
Fiona Safari
@jason-williams.co.uk
@mikehall314.bsky.social
@zachleat.com
It will be a full day of very interesting sessions and we can’t wait to see you all there!
2026.stateofthebrowser.com/speakers/
@bram.us
@cassiecodes.bsky.social
@kitation.co.uk
Fiona Safari
@jason-williams.co.uk
@mikehall314.bsky.social
@zachleat.com
It will be a full day of very interesting sessions and we can’t wait to see you all there!
2026.stateofthebrowser.com/speakers/
A long overdue fix for `scrollbar-gutter: stable both-edges` is available in Chrome 145.0.7626.0 (soon in beta).
Before this fix, when both-edges was used, the scrollbar-gutter would also show on the side where the scrollbar is (which defeats the whole purpose of that property).
This is now fixed.
Before this fix, when both-edges was used, the scrollbar-gutter would also show on the side where the scrollbar is (which defeats the whole purpose of that property).
This is now fixed.
January 12, 2026 at 8:35 AM
A long overdue fix for `scrollbar-gutter: stable both-edges` is available in Chrome 145.0.7626.0 (soon in beta).
Before this fix, when both-edges was used, the scrollbar-gutter would also show on the side where the scrollbar is (which defeats the whole purpose of that property).
This is now fixed.
Before this fix, when both-edges was used, the scrollbar-gutter would also show on the side where the scrollbar is (which defeats the whole purpose of that property).
This is now fixed.
Reposted by Bramus
New year, new website.
Here's a little (big) write up about the evolution of my website, and some of the new fun things I built in the redesign.
p.s. please don't find any bugs, thank you
Here's a little (big) write up about the evolution of my website, and some of the new fun things I built in the redesign.
p.s. please don't find any bugs, thank you
I redesigned my website (again)
It's been almost 3 years since my last website redesign. Read about its evolution, new things in the redesign, and my quest to make my website more personal.
whitep4nth3r.com
January 9, 2026 at 7:17 PM
New year, new website.
Here's a little (big) write up about the evolution of my website, and some of the new fun things I built in the redesign.
p.s. please don't find any bugs, thank you
Here's a little (big) write up about the evolution of my website, and some of the new fun things I built in the redesign.
p.s. please don't find any bugs, thank you
Reposted by Bramus
This feature in @developer.chrome.com's DevTools is so helpful. Every time I get stuck on a calc() or other CSS functions, I solve the bug much quicker with it.
Thanks to everyone who worked on this! 👌
Thanks to everyone who worked on this! 👌
January 9, 2026 at 9:21 AM
This feature in @developer.chrome.com's DevTools is so helpful. Every time I get stuck on a calc() or other CSS functions, I solve the bug much quicker with it.
Thanks to everyone who worked on this! 👌
Thanks to everyone who worked on this! 👌
I am building a utility library of some sorts (in TypeScript) and am looking for inspiration on how to structure things and what to export.
Currently I am thinking of how I structured github.com/bramus/sda-u... but most likely there are much better example repositories out there.
Any suggestions?
Currently I am thinking of how I structured github.com/bramus/sda-u... but most likely there are much better example repositories out there.
Any suggestions?
January 9, 2026 at 2:10 PM
I am building a utility library of some sorts (in TypeScript) and am looking for inspiration on how to structure things and what to export.
Currently I am thinking of how I structured github.com/bramus/sda-u... but most likely there are much better example repositories out there.
Any suggestions?
Currently I am thinking of how I structured github.com/bramus/sda-u... but most likely there are much better example repositories out there.
Any suggestions?
Reposted by Bramus
Speaker reveal time! The speaker, who was obsessed with fonts and is not a fan of Meatloaf is Zach Leatherman! Zach will talk about best practices for using JavaScript.
@zachleat.com
2026.stateofthebrowser.com/speaker/zach...
Our speaker line up is complete! Are you excited for #SotB26?
@zachleat.com
2026.stateofthebrowser.com/speaker/zach...
Our speaker line up is complete! Are you excited for #SotB26?
January 9, 2026 at 9:21 AM
Speaker reveal time! The speaker, who was obsessed with fonts and is not a fan of Meatloaf is Zach Leatherman! Zach will talk about best practices for using JavaScript.
@zachleat.com
2026.stateofthebrowser.com/speaker/zach...
Our speaker line up is complete! Are you excited for #SotB26?
@zachleat.com
2026.stateofthebrowser.com/speaker/zach...
Our speaker line up is complete! Are you excited for #SotB26?
Reposted by Bramus
🎟️ JSHeroes tickets are live 🎟️
👉 jsheroes.io
A limited batch of Early Bird tickets is available for €170 - secure the best deal of the season for a 2-day conference with inspiring talks, amazing people, and unforgettable vibes. ✨
See you in May! 🚀
#JSHeroes #TechConference #TechInnovation
👉 jsheroes.io
A limited batch of Early Bird tickets is available for €170 - secure the best deal of the season for a 2-day conference with inspiring talks, amazing people, and unforgettable vibes. ✨
See you in May! 🚀
#JSHeroes #TechConference #TechInnovation
January 8, 2026 at 11:00 AM
🎟️ JSHeroes tickets are live 🎟️
👉 jsheroes.io
A limited batch of Early Bird tickets is available for €170 - secure the best deal of the season for a 2-day conference with inspiring talks, amazing people, and unforgettable vibes. ✨
See you in May! 🚀
#JSHeroes #TechConference #TechInnovation
👉 jsheroes.io
A limited batch of Early Bird tickets is available for €170 - secure the best deal of the season for a 2-day conference with inspiring talks, amazing people, and unforgettable vibes. ✨
See you in May! 🚀
#JSHeroes #TechConference #TechInnovation
Reposted by Bramus
While Apple's blog post about CSS Masonry/grid-lanes is making the rounds, in case you had missed it, we (Edge and Chrome) also have a testable version of it, and had published a similar article in 2025.
Brick by brick: Help us build CSS Masonry | Blog | Chrome for Developers
Help test the proposed masonry syntax in Chromium.
developer.chrome.com
January 8, 2026 at 9:44 AM
While Apple's blog post about CSS Masonry/grid-lanes is making the rounds, in case you had missed it, we (Edge and Chrome) also have a testable version of it, and had published a similar article in 2025.
Reposted by Bramus
January 7, 2026 at 8:34 AM
Reposted by Bramus
Temporal is the Date system we always wanted in JavaScript. It's extremely close to being available so Mat Marquis thought it would be a good idea to explain exactly what is better about this new JavaScript date system.
piccalil.li/blog/date-is...
piccalil.li/blog/date-is...
Date is out, Temporal is in
Temporal is the Date system we always wanted in JavaScript. It's extremely close to being available so Mat Marquis thought it would be a good idea to explain exactly what is better about this new JavaScript...
piccalil.li
January 7, 2026 at 3:22 PM
Temporal is the Date system we always wanted in JavaScript. It's extremely close to being available so Mat Marquis thought it would be a good idea to explain exactly what is better about this new JavaScript date system.
piccalil.li/blog/date-is...
piccalil.li/blog/date-is...
🎂 Happy Birthday, Safari.
www.apple.com/newsroom/200...
“MACWORLD EXPO, SAN FRANCISCO—January 7, 2003—Apple® today unveiled Safari™, the fastest and easiest to use web browser ever created for the Mac®”
www.apple.com/newsroom/200...
“MACWORLD EXPO, SAN FRANCISCO—January 7, 2003—Apple® today unveiled Safari™, the fastest and easiest to use web browser ever created for the Mac®”
Apple Unveils Safari
www.apple.com
January 7, 2026 at 1:39 PM
🎂 Happy Birthday, Safari.
www.apple.com/newsroom/200...
“MACWORLD EXPO, SAN FRANCISCO—January 7, 2003—Apple® today unveiled Safari™, the fastest and easiest to use web browser ever created for the Mac®”
www.apple.com/newsroom/200...
“MACWORLD EXPO, SAN FRANCISCO—January 7, 2003—Apple® today unveiled Safari™, the fastest and easiest to use web browser ever created for the Mac®”
Reposted by Bramus
The first Web Weekly of 2026 is going out. As always, it's jam-packed!
For the first time, the online version won't live on my blog but on the new Web Weekly site.😱 That's wild, isn't it?😅
webweekly.email/archive/web-...
If you're into web dev news close to the platform, you should check it out!
For the first time, the online version won't live on my blog but on the new Web Weekly site.😱 That's wild, isn't it?😅
webweekly.email/archive/web-...
If you're into web dev news close to the platform, you should check it out!
January 6, 2026 at 9:32 PM
The first Web Weekly of 2026 is going out. As always, it's jam-packed!
For the first time, the online version won't live on my blog but on the new Web Weekly site.😱 That's wild, isn't it?😅
webweekly.email/archive/web-...
If you're into web dev news close to the platform, you should check it out!
For the first time, the online version won't live on my blog but on the new Web Weekly site.😱 That's wild, isn't it?😅
webweekly.email/archive/web-...
If you're into web dev news close to the platform, you should check it out!
Ow yeah! 😎
FYI: you can start using customizable select *TODAY* because it is the perfect progressive enhancement: in browser with no support you get the status quo which is just a regular select (which you can also style up to a certain extent).
FYI: you can start using customizable select *TODAY* because it is the perfect progressive enhancement: in browser with no support you get the status quo which is just a regular select (which you can also style up to a certain extent).
Gecko: Intent to Prototype: "Customizable Select"
Gecko: Intent to Prototype: "Customizable Select"
Gecko: Intent to Prototype: "Customizable Select"
groups.google.com
January 6, 2026 at 6:06 PM
Ow yeah! 😎
FYI: you can start using customizable select *TODAY* because it is the perfect progressive enhancement: in browser with no support you get the status quo which is just a regular select (which you can also style up to a certain extent).
FYI: you can start using customizable select *TODAY* because it is the perfect progressive enhancement: in browser with no support you get the status quo which is just a regular select (which you can also style up to a certain extent).
Reposted by Bramus
Hello there. Just woke up and guess what?! It is 2026! Ready for 15 years of beyond tellerrand? Yes, 15 years. It feels crazy and brings back so many lovely memories. If you want to celebrate this, creativity, the web and the future, don't miss out. beyondtellerrand.com/events/dusse...
beyond tellerrand in Düsseldorf - 27–28 Apr 2026
beyond tellerrand is the affordable single-track event where creativity and technology meet. Taking place in Düsseldorf and Berlin these days with 500+ attendees each in a renowned, familiar and frien...
beyondtellerrand.com
January 6, 2026 at 11:04 AM
Hello there. Just woke up and guess what?! It is 2026! Ready for 15 years of beyond tellerrand? Yes, 15 years. It feels crazy and brings back so many lovely memories. If you want to celebrate this, creativity, the web and the future, don't miss out. beyondtellerrand.com/events/dusse...
Nice usage of `calc-size()` here: make the parent twice the size of its contents.
```
width: calc-size(fit-content, 2*size);
```
See developer.chrome.com/docs/css-ui/... for more details on this :)
```
width: calc-size(fit-content, 2*size);
```
See developer.chrome.com/docs/css-ui/... for more details on this :)
January 6, 2026 at 12:57 PM
Nice usage of `calc-size()` here: make the parent twice the size of its contents.
```
width: calc-size(fit-content, 2*size);
```
See developer.chrome.com/docs/css-ui/... for more details on this :)
```
width: calc-size(fit-content, 2*size);
```
See developer.chrome.com/docs/css-ui/... for more details on this :)
Reposted by Bramus
Ready for the first cool demo of the year?
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
January 2, 2026 at 1:39 PM
Ready for the first cool demo of the year?
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
Reposted by Bramus
I love using new CSS features in my WIP portfolio: so far I've implemented scroll driven animations, anchor positioning, sibling-index/-count, view transitions, at-starting-style, container style queries, interpolate size, allow discrete and more! CSS is awesome ✨
The sticker drag is GSAP though;)
The sticker drag is GSAP though;)
January 1, 2026 at 3:19 PM
I love using new CSS features in my WIP portfolio: so far I've implemented scroll driven animations, anchor positioning, sibling-index/-count, view transitions, at-starting-style, container style queries, interpolate size, allow discrete and more! CSS is awesome ✨
The sticker drag is GSAP though;)
The sticker drag is GSAP though;)
Reposted by Bramus
Happy new year! 🥳
The ZurichJS Conf CFP is officially open: conf.zurichjs.com/cfp
💙💛
And we’ve revealed our first speaker 👀
conf.zurichjs.com
Early bird tickets are available now! 🐣
The ZurichJS Conf CFP is officially open: conf.zurichjs.com/cfp
💙💛
And we’ve revealed our first speaker 👀
conf.zurichjs.com
Early bird tickets are available now! 🐣
Call for Papers | ZurichJS Conf 2026 | ZurichJS Conf 2026
Submit your talk proposal for ZurichJS Conf 2026. We're looking for lightning talks, standard talks, and workshops on JavaScript, TypeScript, and web development.
conf.zurichjs.com
January 1, 2026 at 4:20 PM
Happy new year! 🥳
The ZurichJS Conf CFP is officially open: conf.zurichjs.com/cfp
💙💛
And we’ve revealed our first speaker 👀
conf.zurichjs.com
Early bird tickets are available now! 🐣
The ZurichJS Conf CFP is officially open: conf.zurichjs.com/cfp
💙💛
And we’ve revealed our first speaker 👀
conf.zurichjs.com
Early bird tickets are available now! 🐣
Oh, this is such an addictive game: thomaswc.com/2025.html
Make 45 groups of 45! (By combining two at a time)
Progress is stored in LocalStorage, so you can revisit later.
Make 45 groups of 45! (By combining two at a time)
Progress is stored in LocalStorage, so you can revisit later.
December 31, 2025 at 12:15 AM
Oh, this is such an addictive game: thomaswc.com/2025.html
Make 45 groups of 45! (By combining two at a time)
Progress is stored in LocalStorage, so you can revisit later.
Make 45 groups of 45! (By combining two at a time)
Progress is stored in LocalStorage, so you can revisit later.