iiinova — where your digital self keeps evolving

Bramus @bram.us · 25/09/2026

Extra posture added 😀 → serene-limit-trout.codepen.app

The https://serene-limit-trout.codepen.app/ demo with the iPhone Duo’s simulator set to the “Laptop Posture”

Bramus @bram.us · 24/09/2026

Thanks! I checked, but I’m still not seeing it (also checked using Safari and on my personal MacBook, just to be sure). I am admin of the account. Do you know who I can reach out to? Happy to provide them with more details if needed.

Screenshot of App Store Connect, showing the Users and Access tab, showing the Xcode Cloud subtab.

000

Bramus @bram.us · 23/09/2026

Yes, you too get an extension, Firefox. 🦊❤️ (Pending Review)

Screenshot of the Firefox Add-ons Developer Hub

030

Bramus @bram.us · 23/09/2026

Look, a blog post: brm.us/show-keystro...

171

Bramus @bram.us · 20/09/2026

New in version 1.4.0: Support for (configurable) Operators, Combinators, and Delimiters. → brm.us/rich-input-d... (Hit the “📦 Grouped Query with Delimiters” button in the demo to see the new feature in action)

Screenshot of the demo with the updated features visible

052

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.app

1153

Bramus @bram.us · 20/09/2026

Oh wait a minute … what do we have here? 👀 (It’s a bit hidden in the Simulator because the “Feature Flags” option is placed below the fold …_)

Screenshot of the Device Posture API Feature Flag

Screenshot of the Viewport Segments API Feature Flag

251

Bramus @bram.us · 20/09/2026

It says “Recognised” but nothing is matching … 🤔

010

Bramus @bram.us · 20/09/2026

Fullscreen API also says no.

Screenshot of https://serene-limit-trout.codepen.app/ after having pressed the fullscreen button

110

Bramus @bram.us · 20/09/2026

The Device Posture API (developer.mozilla.org/en-US/docs/W...) also not supported. In serene-limit-trout.codepen.app, I think it would be handy to show the list of places in a floating bar when the device is fully open (continuous), and to show them in a separate column when the device is folded.

Screenshot of https://serene-limit-trout.codepen.app/ with the iPhone Duo in a fully open state.

Screenshot of https://serene-limit-trout.codepen.app/ with the iPhone Duo in a folded state.

Screenshot of https://serene-limit-trout.codepen.app/ with the iPhone Duo in a folded state, with an emulated device posture value of `folded`

200

Bramus @bram.us · 20/09/2026

Turning to the iPhone Duo in an open state, Safari does not seem to support the Viewport Segments API (developer.mozilla.org/docs/Web/API...) Live demo: decent-butterfly-cobra.codepen.app (I know, the seam is exaggerated here, but it could be just a narrow 1px line)

Screenshot of https://decent-butterfly-cobra.codepen.app/

Screenshot of https://decent-butterfly-cobra.codepen.app/, with viewport segments emulated.

100

Bramus @bram.us · 20/09/2026

An open keyboard looks like this.

240

Bramus @bram.us · 20/09/2026

The detection seems to be a one-off though, and doesn't update when there are multiple backdrops (e.g. when stacking modals) or when the backdrop changes.

A page with a stacked modal dialogs open.

A page with a modal dialog open. The color of the backdrop changed after opening.

120

Bramus @bram.us · 20/09/2026

From what I can tell there seems to be some magic going on that copies over the backdrop when, for example, something like a modal dialog gets shown.

A page with a modal dialog open. The backdrop is a semi-transparent gray.

A page with a modal dialog open. The backdrop is a semi-transparent pink.

120

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

Bramus @bram.us · 18/09/2026

With a little CSS, one could make both parts be more visually connected. Does that solve your concern?

200

Bramus @bram.us · 18/09/2026

Oh, that’s just a matter of changing the styles a bit so that both things are more visually connected … See attached screenshot for a corrected version 😊 Based on that, what would your answers to the two questions be?

Altered version of the demo that shows the info icon visually connected to the button.

100

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 ⓘ?

2452

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

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

Bramus @bram.us · 14/09/2026

👀 Went for “rich input” … rich-input.netlify.app

240

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 · 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 · 10/09/2026

My timeline is making weird combinations today …

Screenshot of a three word post reading “Three.js Conf Time” right after a post asking to “Write a horror story using only three words”

040

Bramus @bram.us · 08/09/2026

Productive evening. Added 1 new feature + fixed 3 bugs for my Scroll-Driven Animations DevTools extension (brm.us/sda-debugger) - Scrollable Minimap - Support more units in the ranges - Support min(), max(), … in the ranges - Take `view-timeline-inset` into account (+ visualize) Release imminent.

Screenshot of the minimap taking the `view-timeline-inset` into account and drawing lines on the map as a visual indicator.

191

Bramus @bram.us · 08/09/2026

Here’s a more high-fidelity demo. → brm.us/animated-grid

190

Bramus @bram.us · 07/09/2026

Back in June I shared a demo of a grid that smoothly animates on resize without JS or View Transitions. I finally sat down to write up how it works: CSS Anchor Positioning + scoped anchors + regular CSS transitions. → brm.us/animated-grid

410710

Bramus @bram.us · 03/09/2026

Also, if you read about `random()` before, go re-read things because the keywords changed after I brought them up for re-discussion at the WG (w3c/csswg-drafts#13132) Awaiting an MDN update, the correct keywords and descriptions can be found in the spec: drafts.csswg.org/css-values-5...

171

Bramus @bram.us · 02/09/2026

Way back in 2005, I used a Flash PageFlip component to display a book on a website. Ever since, recreating a modern version has been on my backlog to investigate. With the arrival of HTML-in-Canvas (experimental), we can finally bring it back — this time using real HTML. → brm.us/hic-pageflip

5686

Bramus @bram.us · 17/08/2026

It’ll work because of the context step of the cascade that was created for this. It is evaluated before layers and specificity. The context step says that for normal rules the declarations from an outer context (= external stylesheet) win from the inner context (= styles in your component).

Screenshot from a talk of mine (https://www.bram.us/2022/06/28/the-css-cascade-a-deep-dive-2022-06-09-css-day/) that shows the steps of the cascade. Context is pretty high up.

220

Bramus @bram.us · 14/08/2026

Done! (While at it, I also added a pie chart and some other improvements)

Screenshot of the app showing a sunburst chart

020

Bramus @bram.us · 10/08/2026

When you scroll a 2D scroller on the web, the browser may ignore some minor scroll deltas in the non-main scrolling axis when the user’s intent was to scroll only one axis. Sometimes this “railing” gets in the way … and with `scroll-axis-lock: none`, you can soon remove it 😊 brm.us/scroll-axis-...

28610

Bramus @bram.us · 01/07/2026

New in Chrome DevTools in Chrome 151 (which goes stable mid July): The specificity bubble can now show you a breakdown of how the specificity was calculated. Big thank you and congrats to @hjanuschka.bsky.social for contributing this to Chromium 👏

Screenshot of Chrome 151 showing the specificity calculation for the currently hovered over selector.

0586

Bramus @bram.us · 01/07/2026

At the CSSWG there is an issue about 2D Mesh gradients. The consensus was that whatever we do, it should be PDF compatible. With the help of Gemini I found my way to “Coons Patches” as the underlying mechanism. Using AIStudio, I then generated this editor: genuine-waterfall-crane.codepen.app

1203

Bramus @bram.us · 29/06/2026

My personal take is that I am not sure if this would 100% please everyone when it comes to finer details. In this grid I snooped from your blog, my preference would be 1-2-3-6-4-5-10-8-9-7-… (note the jump from 3 to 6, before going to 4) but that doesn’t match your expectation.

200

Bramus @bram.us · 29/06/2026

If you were to change the value to `safe end`, you can see that it gets interpreted as `start` when the button is smaller than the popover. When the button becomes wider than the positioned element (e.g. by edition its text) the `end` justification gets used.

100

Bramus @bram.us · 29/06/2026

Attached is a demo using a WIP DevTools extension I built to help debug this type of stuff, so you can see what Chrome does. The IMCB is the green area underneath the button, and inside it you then justify the positioned element (in an unsafe manner).

100

Bramus @bram.us · 29/06/2026

With #GoogleIOConnect Berlin just last week, my pre-summer conference season has come to a close. In 2 months I did 4 Meetups, 5 Conferences, and 1 Team Summit … while doing some _actual work_ in between 🫨 This week I’m tying up some loose ends, and after that I’ll be taking some time off 🏝️

Me at #GoogleIOConnect Berlin, hosting a panel. From left to right we have Bramus, Rachel, Jeremey, Michael, and Brecht.

0120

Bramus @bram.us · 25/06/2026

I finally (finally!) got round to writing blog posts about some of the events I spoke at the past few months. Find slides, videos, and personal notes on my blog: - @beyondtellerrand.com (2026.04.28): www.bram.us/2026/06/25/c... - @heypresents.com (2026.05.07): www.bram.us/2026/06/25/c...

Me on stage at Beyond Tellerrand Dusseldorf 2026

5204

Bramus @bram.us · 22/06/2026

Reminder: The State of CSS Survey is closing *SOON*, so **NOW** is the moment to complete it. stateofcss.com/en-US/ This survey directly influences efforts like Interop and feature planning, so this is **YOUR** moment to let browser vendors know what you find missing on the web!

Promotional Image for the State of CSS Survey 2026

1159

Bramus @bram.us · 19/06/2026

And yet somehow, folks _will_ start relying on it. I’ve heard about a recent complaint about a feature in Origin Trial that changed, and the devs are now angry at us. They seem to be forgetting that they ticked these 4 checkboxes in the Origin Trials form when they signed up for a token 🤷‍♂️

020

Bramus @bram.us · 18/06/2026

Starting a new feedback doc … 😅

Photo of the structure of my new feedback doc. The first line of feedback reads "this is confusing as hell" 😁

1280

Bramus @bram.us · 16/06/2026

I tried to repro and I’d say that DevTools can handle it _mostly_ fine as it’s showing a clickable reference to the element (yay!) but the presentation part is off (meh!). PS: the best location to complain about this is crbug.com/new … but I’ve got you covered this time 😉

310

Bramus @bram.us · 15/06/2026

New demo: Animated CSS Grid Layout. codepen.io/bramus/pen/o... Here’s the thing: No View Transitions. No JS at all. Instead, it uses Anchor Positioning to anchor the cell contents to the cell. Then, CSS transitions are used to animate the contents to their new location as the grid re-layouts.

416422

Bramus @bram.us · 12/06/2026

Excited for this talk by @nerdy.dev. I got a sneak peek yesterday, and this is gonna be gooooodddd! 🤩 #CSSDay

0120

Bramus @bram.us · 12/06/2026

Ready for @una.im's talk on Modern UI Patterns, digging deeper into these 5 core principles and which Modern Web Features you can use to adhere to these principles. #CSSDay

Una on stage, with the 5 principles listed on screen.

190

Bramus @bram.us · 12/06/2026

We did a first public pitch of something we are currently prototyping: a way to add styles based on the active navigation. Handy for View Transitions, and a few other things. drafts.csswg.org/css-navigati... is a WIP spec, with some bits implemented (behind a flag) in Chrome.

2182