Sign in

Bramus

@bram.us
10K followers 431 following 2.3K posts

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

PostsRepliesMedia
Reposted by Bramus
Paweł Grzybek @pawelgrzybek.com · 6h
✨ New post "Top picks — 2026 September" My monthly collection of my favourite resources on the web from the past month. Also, some music recommendations. Enjoy 🤗 pawelgrzybek.com/top-picks-20...
pawelgrzybek.com
Top picks — 2026 September | pawelgrzybek.com
Most of this month I spent away from technology with family at the Polish seaside. Other than that, I organised a really successful meetup and read a bunch of good stuff on the web. Enjoy some of the ...
031
Bramus @bram.us · 22h
That `overscroll-behavior: chain` is a nice one to complete the set of values for `overscroll-behavior`. Check it out in codepen.io/editor/bramu... to see how it compares to other values. Supported in Blink/Chromium and Gecko/Firefox.
codepen.io
overscroll-behavior: chain
A code demo by Bramus created on CodePen
1180
Bramus @bram.us · 25/09/2026
The time to ramp up your scroll-driven animations skills is **NOW** Go check scroll-driven-animations.style for and free 10-part video course created by yours truly, as well as a bunch of tools and demos.
scroll-driven-animations.style
Scroll-driven Animations
A bunch of demos and tools to show off Scroll-driven Animations
311120
Reposted by Bramus
MDN Web Docs @developer.mozilla.org · 25/09/2026
🆕 Customize MDN's browser compat tables! Press ⚙️ Settings on any compat table to choose which browsers and engines you see, and hide the ones you don't need. Your picks are saved in your browser. Try it 👇 developer.mozilla.org/en-US/docs/W...
MDN's browser compatibility table for the HTML popover attribute. Its columns cover desktop and mobile browsers, showing which versions support the attribute and its "hint" value. A "Settings" button sits above the table.The Browser compatibility settings dialog on MDN. Browsers appear as chips grouped under Desktop, Mobile, Server and XR, and each one can be added to or removed from the table.
27724
Reposted by Bramus
Manuel Matuzović @matuzo.at · 25/09/2026
In case you missed it, here's a recording of my talk 19½ Things You Didn’t Know about Accessibility in HTML and CSS, which I presented yesterday at #ID24. www.youtube.com/watch?v=h3Jh... Slides: noti.st/matuzo/OD53a...
youtube.com
Manuel Matuzović / 19½ Things You Didn’t Know about Accessibility in HTML and CSS #id24 2026
YouTube video by Inclusive Design 24 #id24
22811
Reposted by Bramus
Fronteers @fronteers.bsky.social · 25/09/2026
⏰ Last call for Fronteers Dark Mode 2026! Ticket sales close tomorrow, Saturday at midnight, and there are just 13 seats left. So if you’ve been thinking about joining us in Dordrecht next Friday, this really is your last chance. 🌑✨ 🎟️ www.fronteersconf.org We’d love to see you there! ❤️
Fronteers Dark Mode 2026, Friday, October 2, at Cinema De Witt in Dordrecht. An intimate evening of frontend talks and community from 3 PM until after midnight. Tickets €99 at fronteersconf.org. Collage showing Dordrecht, dinner, the Cinema De Witt venue and its red-seated screening room, with a QR code linking to the conference website.
156
Reposted by Bramus
Ahmad Shadeed @ishadeed.com · 24/09/2026
✍️ New Article: Detect when elements overlap with CSS Can CSS tell when two elements overlap? At first, I thought this was not possible, but it turned out it can be done with scroll-driven animations and anchor positioning. ishadeed.com/article/css-...
ishadeed.com
Detect when elements overlap with CSS
Detecting when two elements overlap using only CSS anchor positioning and scroll-driven animations.
57419
Bramus @bram.us · 24/09/2026
@media (prefers-unicorns: plenty) { a::before, a::after { content: '🦄'; } } (Ship it, you cowards! *waves fist*)
1220
Reposted by Bramus
Niels Leenheer @html5test.com · 24/09/2026
Fronteers Dark Mode conference is next week! Monday I'll send badges to the printer... which means if you want a proper badge... sign up now! We've got a handful of tickets left and they are only €100 for an evening of front-end talks by some amazing speakers. www.fronteersconf.org
fronteersconf.org
Fronteers Dark Mode, Friday, October 2nd, Dordrecht
Join us at Cinema de Witt in Dordrecht for our after work conference.
098
Reposted by Bramus
Cory LaViska @cory.laviska.com · 23/09/2026
i keep discovering things I probably should have know for years, like pressing OPTION to copy a file's pathname way easier than get info > select pathname > copy
Screenshot of a desktop icon's context menu, highlighting Copy "test.html" as Pathname which shows when you press option
4261
Bramus @bram.us · 23/09/2026
@saron.bsky.social @jensimmons.bsky.social Is the “Safari Web Extension Packager” available to the public yet? I am following developer.apple.com/documentatio..., and: - The Xcode Cloud tab (from the topnav) does not show the packager. - There is no Xcode Cloud tab when on the app detail view.
131
Reposted by Bramus
Vadim Makeev @pepelsbey.dev · 23/09/2026
An SVG inside <img> has always been a styling dead end: you can place it, but you can’t paint it. CSS Linked Parameters fix that in Firefox Nightly, so I traced Warhol’s Marilyn and repainted it nine times from one 50 KB file 💅 pepelsbey.dev/articles/svg...
Nine Marilyn Monroe portraits in a three by three grid, each in a different set of colors: pink and yellow, turquoise and orange, plum and navy, lilac and sky blue, magenta and orange, mint and amber, grey and slate blue, green and brick red, teal and magenta.
1327
Reposted by Bramus
Nilesh Prajapati @nileshprajapati.com · 23/09/2026
New in Chrome 154: iframes that automatically resize themselves to their content by @bram.us #html
bram.us
New in Chrome 154: iframes that automatically resize themselves to their content
Chrome 154 adds support for responsively-sized iframes, letting an <iframe> size itself based on the intrinsic size of its embedded document. This is perfect for seamlessly embedding third-party comme...
5536
Reposted by Bramus
Web Standards @web-standards.dev · 22/09/2026
Responsive iframes in Chrome 154. Sebastian Benz and Bramus introduce frame-sizing, a CSS property that sizes an <iframe> to its content, with a <meta> element opt-in and window.requestResize() for later updates. #html #css developer.chrome.com...
Chrome logo, an illustration of a scrollable embedded page, an HTML snippet with a responsive-embedded-sizing <meta> element, a frame-sizing CSS snippet, and title “Responsive iframes in Chrome 154”.
2328
Reposted by Bramus
Patrick Brosset @patrickbrosset.com · 22/09/2026
One more call for feedback! Yeah, I know, I often ask for feedback but, think about it, the more you share, the better the feature. 💡Support low-quality image placeholders on the web! ➡️<img previewsrc="preview.avif" src="photo.avif"> ❓Would you use this? What capabilities do you need? Read more⬇️
patrickbrosset.com
Patrick - Blurry before beautiful: image previews for the web
Showing blurry previews while images are loading on the web is a very common pattern which we'd love to standardize at the browser level, so that all developers can use it with very little code and co...
13309
Bramus @bram.us · 22/09/2026
Another week, another package: show-keystrokes.netlify.app The native app I typically use to display keystrokes on the screen is disallowed by a corp policy. So I wrote a component to fill that gap. Embed it on your site and you’re good to go.
show-keystrokes.netlify.app
<show-keystrokes> – Keystroke & Shortcut Visualizer
A custom element that visualizes keystrokes, keyboard shortcuts, and navigational keys with macOS/Windows support and customizable themes.
58112
Reposted by Bramus
Master.dev (Formerly Frontend Masters) @frontendmasters.com · 22/09/2026
Dark Mode Very Much Matters To Me It's not just vibes, it's an accessibility thing.
blog.master.dev
Dark Mode Very Much Matters To Me
It's not just vibes, it's an accessibility thing.
2132
Reposted by Bramus
Patrick Brosset @patrickbrosset.com · 21/09/2026
📢 Lot's of updates in our new Edge for devs issue: OpaqueRange, referenceTarget, window-drag, <install>, WebMCP, and more!
blogs.windows.com
New in Edge for developers – Create better components and make your site agent-ready
Welcome back to New in Edge for developers, our recurring roundup of recent web platform updates in Microsoft Edge. In this edition, we'll look more closely at some of the newest additions to Microso...
083
Reposted by Bramus
Bramus @bram.us · 20/09/2026
Device Posture API on the iPhone Duo: check! 🎉 Live demo: serene-limit-trout.codepen.app
Screenshot of https://serene-limit-trout.codepen.appScreenshot of https://serene-limit-trout.codepen.app
1153
Reposted by Bramus
Nicolò Ribaudo @nicr.dev · 21/09/2026
Today is Igalia's 25th birthday! 🎂 www.igalia.com/2026/09/21/T...
igalia.com
Twenty-Five Years Upstream | Igalia
Igalia is an open source consulting firm specialised in the development of innovative projects and solutions. Our engineers have expertise in a wide range of technological areas, including browsers an...
28212
Reposted by Bramus
Mike Hall @mikehall314.bsky.social · 21/09/2026
Tickets for Viewport are on sale now! This has been in progress for several months, and we will have such a great line up of speakers.
183
Bramus @bram.us · 20/09/2026
New on the blog: Ship cleaner packages (without the `./dist` or `./src` folder) by publishing a subfolder to NPM → brm.us/npm-publish-...
brm.us
Ship cleaner packages (without the ./dist or ./src folder) by publishing a subfolder to NPM
One detail that has always bugged me about publishing a package to NPM is how build output paths like dist/ can leak into the public API.Turns out, npm publish can do it, but to make it work seamlessl...
5453
Bramus @bram.us · 19/09/2026
Of course I am checking Viewports in Safari on an iPhone Duo (Front Screen) … (Simulated device; Xcode 27.1 Device Hub)
Screenshot of https://interop-2022-viewport.netlify.app shown on a iPhone Duo (simulator) on the front screen. The device is rotated to landscape view.Screenshot of https://interop-2022-viewport.netlify.app/individual/safe-inset-areas/viewport-fit-cover shown on a iPhone Duo (simulator) on the front screen.
1342
Reposted by Bramus
Keith Cirkel @keithamus.social · 19/09/2026
I want Custom Attributes to exist - think Custom Elements (Web Components) but Attributes. I've been working on a proposal, specs, and now a polyfill: www.keithcirkel.co.uk/custom-attri... More coming soon!
keithcirkel.co.uk
Custom Attributes polyfill
79722
Reposted by Bramus
Wes Bos @wesbos.com · 18/09/2026
iPhone duo simulator just released: No sign of the viewport segment or device posture API in Safari folded view safari adds toolbars to both the bottom AND the right of the viewport leaving very little room for website
12664
Reposted by Bramus
Patrick Brosset @patrickbrosset.com · 18/09/2026
Customizable selects are so 2025. Now is the time for styleable multi-thumb range controls! Great work by @utilitybend.com and Open UI. The <rangegroup> element is being prototyped in Chromium by our team. Can't wait to play with it, which you can do with: brechtdr.github.io/enhanced-ran...
Audio & Video editing range control.Time shift range control.Radial range control with 2 thumbs, allowing to select a range between 0 and 100. The selected range is 25 to 75.
2426
Bramus @bram.us · 18/09/2026
Whenever I see the (product) name Jev, my mind races to this clip right here … www.youtube.com/watch?v=AfIO... (And now your brain does too. You’re welcome.)
youtube.com
My name is Jeff
YouTube video by fpSmoker
180
Bramus @bram.us · 17/09/2026
UI/UX Question Say you have this “Rewrite” button with a little ⓘ icon next to it. Clicking/hovering that ⓘ shows a popover with extra info about the button. Would you expect: Q1: The popover to show above the button or the ⓘ? Q2: The button to match `button:hover` when hovering the ⓘ?
Screenshot of the UI
2452
Reposted by Bramus
Rachel Andrew @rachelandrew.co.uk · 17/09/2026
csslayout.news/a/3mvn7bkmuz... Here's Issue 345 of CSS Layout News. Lots of great how-to tutorials included this time.
csslayout.news
Issue 345
1204
Reposted by Bramus
Paweł Grzybek @pawelgrzybek.com · 17/09/2026
This recent article by @bram.us announces a new web component, that is built on top of two superb exciting modern APIs. • CSS Custom Highlight API • OpaqueRange API These two will change the way we build for the web. This post is really worth reading. www.bram.us/2026/09/14/i... #web #css
bram.us
Introducing <rich-input>, a GitHub-like search/filter text input to embed on your site
While working on a side-project to better navigate and search through my record collection, I found myself in need of a rich search input: one that accepts free-form text alongside structured filters ...
0274
Bramus @bram.us · 17/09/2026
Always nice to do updates like this one 😊 Yes, CSS `light-dark()` with `<image>` values is now available in all major browser engines. Check brm.us/light-dark-i... to get the details.
Screenshot of an updated browser compat table on my site.
1242
Reposted by Bramus
Manuel Matuzović @matuzo.at · 17/09/2026
Friends, it's that time of the year: Once again, I'm asking you to help me create another amazing HTMHell Advent Calendar by writing about HTML. The CFP is open until October 3! docs.google.com/forms/d/e/1F...
docs.google.com
HTMHell Advent Calendar
Hello, my dear friends of high-quality markup! We're getting closer to the last quarter of 2026, which means that the HTMHell Advent Calendar is getting closer, too. Last year, once again, you contrib...
34936
Reposted by Bramus
CSS by T. Afif @css-only.dev · 16/09/2026
📝 New CSS Article! Learn how I used Scroll-Driven Animations and other modern features to extract various information from a CSS grid. blog.master.dev/extracting-g... Another article to show that CSS is more than a simple set of properties/values.
blog.master.dev
Extracting Grid Information Using CSS
It's an interesting and potentially useful trick to have an element know where it is on a grid. That's tricky enough when the items are in one row/column, but what about when they span?
0445
Bramus @bram.us · 17/09/2026
Hahaha, I asked Antigravity to generate Mermaid Diagrams using the mermaid-element.netlify.app component I built a few days ago (using that same Antigravity) and it came back with this ... /insert obama-medal-meme.jpg 😂
“I'm impressed by the clean design of `<mermaid-element>`” 😂😂
1150
Reposted by Bramus
Viewport @viewportconf.org · 03/09/2026
We just finished the beta of our website. Look out for updates on Viewport soon! You can sign up to our mailing list to be kept in the loop. viewportconf.org
viewportconf.org
Viewport 2027 — An independent conference about the web
An independent conference about the web, the people who build it, and the people we build it for. Liverpool, May 2027.
1136
Reposted by Bramus
Chris Coyier @chriscoyier.net · 15/09/2026
This GIF from @joshwcomeau.com's last email is mesmerizing. Here's the border-shape he made of that codepen.io/editor/joshw...
1839
Reposted by Bramus
Chris Bolson @cbolson.bsky.social · 15/09/2026
A CSS-only circular nav using experimental `::scroll-*`, `animation-timeline: scroll()` and anchor positioning. Scroll drives the items around the circle, with anchors handling the current label and prev/next controls. ⚠️ Chromium only. See the demo on @codepen.io: codepen.io/editor/cbols...
0333
Reposted by Bramus
Rachel Andrew @rachelandrew.co.uk · 15/09/2026
Remove start and end margins with the margin-trim property A frequently asked multiple-column layout question is why a new paragraph at the start of the column has additional space above... rachelandrew.co.uk/archives/2026/09…
rachelandrew.co.uk
Remove start and end margins with the margin-trim property
A frequently asked multiple-column layout question is why a new paragraph at the start of the column has additional space above it. The space above the first column is the top margin of the initial paragraph. The space is the margin on the paragraph, which doesn't collapse if the paragraph is inside a multicol container....
0264
Reposted by Bramus
Vale @vale.rocks · 15/09/2026
@css-tricks.bsky.social is once again stuck in an arbitrary suspension at the hands of DigitalOcean's radio silence. It is devastating to see such a brilliant publication treated so very poorly. The current situation: vale.rocks/micros/20260...
vale.rocks
CSS-Tricks in Limbo - 15 Sept 2026 01:35 UTC
49130
Reposted by Bramus
beyond tellerrand @beyondtellerrand.com · 14/09/2026
Say hello to first speakers revealed for #btconf Düsseldorf. Let's start with @kevinpowell.co about whom I am absolutely happy. Knowing him for a while through other events, I know it is always a pleasure meeting him. Welcome Kevin! beyondtellerrand.com/events/dusse...
beyondtellerrand.com
Kevin Powell: Speaker at beyond tellerrand in Düsseldorf 2027
Kevin Powell is a CSS evangelist and educator whose primary goal is to help people fall in love with CSS and, failing that, to at least help them be a little less frustrated by it. He is best known fo...
2246
Reposted by Bramus
Jeremy Keith @adactio.com · 14/09/2026
Journal: Stalling installing Trying to get past Webkit’s blockage at the W3C. 🔗https://adactio.com/journal/22757
75713
Reposted by Bramus
Philip Walton @philipwalton.com · 15/09/2026
If you've ever tried using a new web API in TypeScript, you've probably hit this problem: An API exists. It works in your browser. But TypeScript has no types for it. The reason is a limitation that TS unfortunately applies to its built-in libs. BUT, I've created a relatively simple fix 👇
3419
Reposted by Bramus
Jake Archibald @jakearchibald.com · 14/09/2026
This is a great article. I've always been sus about the hype around JPEG XL, as it never stacked up when I actually tested it with web use-cases. giannirosato.com/blog/post/ca...
giannirosato.com
The case against JPEG XL | Gianni Rosato
Investigating JPEG XL's place as a Web image codec.
25111
Reposted by Bramus
Ana Rodrigues @ohhelloana.blog · 14/09/2026
you really should and I need to do it more too ohhelloana.blog/tell-the-spe...
ohhelloana.blog
Tell the speakers that you liked their talks
if you always wanted to but think it isn't worth telling a speaker you liked their talk, this is your encouragement post to do so.
27721
Reposted by Bramus
Web Standards @web-standards.dev · 14/09/2026
The browser’s main thread is expensive. Sunhyoup Lee explains how to fit JavaScript, styles, layout, and events into 10 milliseconds per frame: split long tasks and yield, batch frequent events, or move work to the compositor or a Worker. #performance #js kciter.so/posts/the-...
A browser window with a huge loading spinner rolling over colorful blocks on a road, a cartoon avatar, and the title “The Browser's Main Thread Is Expensive” by Sunhyoup Lee.
0205
Reposted by Bramus
Project Wallace @projectwallace.com · 14/09/2026
🍾 NEW: Baseline overview Quickly scan the Baseline status of your website's CSS! 🩻 www.projectwallace.com/baseline-ove...
A portion of a page from project wallace. It shows three panels, two on the top, one at the bottom. The top left panel is titled "Baseline status summary" and shows a table and graph showing that 26 feaures are widely available, 2 newly available and 5 limited available. The top right panel is titled "Widely available features by year" and shows a table with all years since 2018 and each year has a bar graph of how many features of that year are used. The bottom panel shows a huge table with each used feature, the amount of usage, the dates fro when it became newly available, widely available, often a link to caniuse.com, and finally a column that indicates browser support for Edge, Chrome, Firefox and Safari.
0286
Bramus @bram.us · 13/09/2026
QQ: What would you call the sort of input that you see on GitHub (see screenshot)? I'm thinking of "rich search field". Does that carry the load?
Screenshot of GitHub's search field in the issues of a repository. I have typed `author:` and it suggests a list of names.
10181
Bramus @bram.us · 13/09/2026
Current Status: “You are not wrong at all — it is completely useless.”
1100
Bramus @bram.us · 11/09/2026
🤩 Safari is about to support `interactive-widget` in the viewport meta tag github.com/WebKit/stand... This allows you to control what should happen to the viewport when the virtual keyboard gets shown. developer.chrome.com/blog/viewpor... (from 2022!) has the details.
MobileMiniBrowser showing a test page set to `overlays-content`MobileMiniBrowser showing a test page set to `resizes-visual`MobileMiniBrowser showing a test page set to `resizes-content`
45013
Bramus @bram.us · 11/09/2026
Maybe one nuance to make here is that custom properties ALWAYS compute before they inherit. With @property you control _what_ it computes to, not _when_. If nothing is specified, you inherit the raw token stream, otherwise you get a parsed value. (And if that parsing fails, you get brm.us/iacvt)
2181