Subscribe
Public posts from @bramus@front-end.social
btconf 2026 speakers
Bootstrap 6 alpha 1 got announced today: https://blog.getbootstrap.com/2026/10/08/bootstrap-6-alpha/
Great to see how many modern CSS features the project is now leaning into: @property, @layer, @starting-style, oklch(), color-mix(), light-dark(), interpolate-size, :has(), …
(Yes, Bootstrap still is a thing)
RE: https://fed.brid.gy/r/https://bsky.app/profile/did:plc:cs3zn3kikj5kwzljlvyr55sg/post/3mxfmi3rlvg2z
👀 Ooh, support for `interpolate-size: allow-keywords` and `calc-size()` in Safari Technology Preview 254.
These two allow you to do things like animating elements to `height: auto`.
Check https://developer.chrome.com/docs/css-ui/animate-to-height-auto to get the details.
Today I built `<calc-input>`. It’s a custom input element that accepts mathematical formulas — such as 2 + 3 or (2 + 3) * 4 — and automatically toggles between showing the formula on focus and the calculated result on blur.
If this looks familiar: I first started working on this in 2024 but never got round to finishing the project.
https://front-end.social/@bramus/113668504142777945
(I also mentioned it a few times at conferences)
Thanks to Gemini, I finally managed to implement the remaining effects and got to releasing the 1.0.0 version 😊
Remember Internet Explorer’s “Page Transitions”?
Well, they’re back, thanks to the View Transition API!
→ Blog post: https://brm.us/page-transitions
→ Demo site: https://page-transitions.style/
The project leverages IE’s meta tags so browser support is not limited to Modern Browsers™ but also includes IE 5.5–8.0 😆
After 7.5 months of tweaking, reviewing, and rewriting, the docs for Scroll-Triggered Animations have landed on @mdn (MDN)!
Congrats and thanks to @chrisdavidmills and @estelle for their hard work and sweating the details on this!
RE: https://mastodon.social/@firefoxwebdevs/117354510309471164
That `overscroll-behavior: chain` is a nice one to complete the set of values for `overscroll-behavior`.
Check it out in https://codepen.io/editor/bramus/pen/01a0c81c-666b-7b74-b099-ffb6a76de6d6 to see how it compares to other values.
Supported in Blink/Chromium and Gecko/Firefox.
With Scroll-Driven Animations announced for Firefox, the time to ramp up your SDA skills is **NOW**
Go check https://scroll-driven-animations.style for a free 10-part video course created by yours truly, as well as a bunch of demos and tools.
And if you are using Chrome: Download the DevTools extension I built to help you debug and understand how these work.
Yes, you too get an extension, Firefox. 🦊❤️
(Review Pending)
Look, a blog post: https://brm.us/show-keystrokes
You can easily position the component in the top right corner of the viewport (default), next to the cursor, or just inline.
Stays on top thanks to the Popover API. Repositions itself thanks to CSS Anchor Positioning.
Also comes as a bookmarklet and extension (pending review), to run on any site.
Another week, another package: https://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.
New in version 1.4.0: Support for (configurable) Operators, Combinators, and Delimiters.
→ https://brm.us/rich-input-demo
(Hit the “📦 Grouped Query with Delimiters” button in the demo to see the new feature in action)
New on the blog: Ship cleaner packages (without the `./dist` or `./src` folder) by publishing a subfolder to NPM
Device Posture API on the iPhone Duo: check! 🎉
Live demo: https://serene-limit-trout.codepen.app
(It’s behind a feature flag … and that is a bit hidden in the Simulator because the “Feature Flags” option is placed below the fold)
I am checking out viewports (and more) on the iPhone Duo and am documenting things over at Bluesky.
https://bsky.app/profile/bram.us/post/3mvvqnzqk3c2w
Some screenshots to get you started …
You can try it right here: https://codepen.io/editor/bramus/pen/01a09116-9ed5-79c0-8b5b-0cc4c73f6807 (in Chrome Canary + Experimental Web Platform Features flag)
Currently in Chrome Canary the popover gets shown on the button and the hover styles match on the button when hovering the ⓘ … if you find that weird, that might inform your answer.
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` while hovering the ⓘ?
(I have an opinion about it of course, but I’m interested to hear what you think)
Always nice to do updates like this one 😊
Yes, CSS `light-dark()` with `<image>` values is now available in all major browser engines.
Check https://brm.us/light-dark-images to get the details.
@matuzo If you have time, could you take a quick peek?
#A11Y question
The A11Y aspects for this component were modeled after https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
AFAICT things are correctly set up: the `role=combobox` is there, the expanded state is dynamically communicated, the `aria-controls` are set pointing to a listbox, `aria-label` gets set when necessary, etc.
But: I am no A11Y expert … anyone here that can confirm I got things right? And if things are not right, could you point me in the right direction?
Yesterday evening I nerd sniped myself (again) into building a new component: `<rich-input>`
A rich input field that acts like a regular `<input type="text">`, enhanced with contextual keyword-based autocompletion (`keyword:value`) and in-input highlighting powered by `<datalist>`, the OpaqueRange API, and the CSS Custom Highlight API.
Current Status: “You are not wrong at all — it is completely useless.”
Screenshots were taken using the iPhone Device Simulator and the MobileMiniBrowser application with https://viewport-resize-behavior.netlify.app/ loaded.
These changes are not part of Safari 27 (explaing why a local WebKit build + MobileMiniBrowser was used), but my guess is that this lands in Safari 27.1.
🤩 Safari is about to support `interactive-widget` in the viewport meta tag
https://github.com/WebKit/standards-positions/issues/65#issuecomment-5346189958
This allows you to control what should happen to the viewport when the virtual keyboard gets shown.
https://developer.chrome.com/blog/viewport-resize-behavior#opting_in_to_a_different_behavior (from 2022!) has the details.
(No word on the Virtual Keyboard API though)
RE: https://mastodon.social/@firefoxwebdevs/117246953483030890
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 https://brm.us/iacvt)
@codepen (If I have been procrastinating, you ask? You betcha I did!)
