Bramus's Avatar

Bramus

@bram.us

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

9,419
Followers
382
Following
1,499
Posts
08.05.2023
Joined
Posts Following

Latest posts by Bramus @bram.us

But `:not(:granted)` _is_ `:denied`.

```
geolocation {
/* Shared */

&:granted {
/* Styles when granted */
}

&:not(&:granted) {
/* Styles when denied */
}
}
```

06.03.2026 09:23 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
The Big Gotcha of Anchor Positioning As it stands, you have to think about the layout engine and whether an element is

The Big Gotcha of Anchor Positioning

As it stands, you have to think about the layout engine and whether an element is "fully laid out" before an anchor is allowed to apply to it. Boooooo.

06.03.2026 08:39 πŸ‘ 9 πŸ” 1 πŸ’¬ 1 πŸ“Œ 1

For the β€œnot granted” styling you can use the `:not()` selector: `&:not(:granted)`

06.03.2026 09:06 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Preview
Request for developer feedback: focusgroup Β |Β  Blog Β |Β  Chrome for Developers Try out focusgroup and comment on the proposal.

Open UI has been working on speccing out the focusgroup attribute: a declarative way to support roving focus & add keyboard nav to composite widgets like toolbars/menus

We'd love your feedback!

Learn more & see open questions: developer.chrome.com/blog/focusgr...

H/t to Edge folks for prototyping

05.03.2026 16:54 πŸ‘ 67 πŸ” 20 πŸ’¬ 6 πŸ“Œ 2

πŸ₯ŒπŸ‘ˆ

05.03.2026 15:10 πŸ‘ 4 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

β€œThere’s also a sister method…”

I guessed `.rar()`. I was wrong.

05.03.2026 14:33 πŸ‘ 14 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Incomplete List of Mistakes in the Design of CSS - CSS Working Group Wiki

w3c.github.io/csswg-wiki/i....

> # Incomplete List of Mistakes in the Design of CSS
>
> * …
> * `border-radius` should have been `corner-radius`.
> * …

04.03.2026 15:13 πŸ‘ 3 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

This is AMAZING!

Very nicely done, and GREAT to see so many new/recent technologies being used to achieve this – all with a PE mindset approach.

⭐️⭐️⭐️⭐️⭐️ 5/5

04.03.2026 14:38 πŸ‘ 2 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Preview
Putting my money where my mouth is: a redesign built on progressive enhancement | utilitybend A look at how utilitybend.com was redesigned using progressive enhancement with modern CSS features like view transitions, corner-shape, @property, scroll-state queries, and anchor positioning.

πŸš€ I always talk a big game… β€œyou can do this as a progressive enhancement.” Time to put my money where my mouth is! πŸ’Έ
In recent months, I’ve updated my site with a range of new features. It is rock-solid across all modern browsers and is finally live! With a story πŸ“–:

04.03.2026 14:22 πŸ‘ 17 πŸ” 4 πŸ’¬ 2 πŸ“Œ 0

When in doubt, just say β€œIteratorable”.

04.03.2026 10:12 πŸ‘ 10 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Brilliant! 🀣

04.03.2026 09:30 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

No clue, but it seems to be consistent across browsers …

03.03.2026 18:55 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Preview
Get features faster with Chrome's two-week release cycle Β |Β  Blog Β |Β  Chrome for Developers From September 2026 Chrome releases will be every two weeks.

Chrome is moving to a 2-week release schedule!

(previously 4 weeks)

developer.chrome.com/blog/chrome-...

03.03.2026 18:30 πŸ‘ 34 πŸ” 3 πŸ’¬ 4 πŸ“Œ 2
Photo of Roy of the Ravers's album "2 Late 4 Love" (ACIWAX 90) featuring the stellar track "Emotinium".

Photo of Roy of the Ravers's album "2 Late 4 Love" (ACIWAX 90) featuring the stellar track "Emotinium".

A bit too much of that goa/psy-like sound for my liking TBH.

Winging back to the 303: look at this beautiful new record I picked up in London just last weekend … 😊

album.link/i/1677881270

03.03.2026 13:33 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Classic πŸ™Œ

03.03.2026 11:29 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Public Energy - Three O' Three ( 1993 )
Public Energy - Three O' Three ( 1993 ) YouTube video by Novumsquare

** pumps fist in the air **

03.03.2026 11:00 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Related: When installing a fullscreen PWA (with `viewport-fit=cover`) on Android it … does not go fullscreen (πŸ€¦β€β™‚οΈ)

πŸ‘‰ You might want to give issues.chromium.org/issues/40742... an upvote if you, like me, would like to see that changed.

03.03.2026 10:43 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Fronteers Belgium meetup on 12/03/26 at the offices of Craftzing in Ghent
Guest talks from: 
- Iben Van de Veire on Virtual DOM vs ChangeDetection, keeping your view up to date
- Karel De Smet on Your password has been breached!

Fronteers Belgium meetup on 12/03/26 at the offices of Craftzing in Ghent Guest talks from: - Iben Van de Veire on Virtual DOM vs ChangeDetection, keeping your view up to date - Karel De Smet on Your password has been breached!

Join us for the Fronteers Belgium relaunchπŸš€!
It’s going to be an evening packed with knowledge, connection, and a few surprises. πŸ‘€πŸΏ

Grab your spot and join your fellow developers for a night of learning
πŸ‘‰ www.meetup.com/fronteers-be...

#fronteersBelgium #BeTech #frontendmeetup

03.03.2026 09:31 πŸ‘ 2 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0
I wish there was a (simpler) way to highlight text in inputs When I was building the search engine for my blog, one feature I wanted to implement was syntax highlighting within the search input field. I wanted special operators (i.e. ...] [

When I was building the search engine for my blog, one feature I wanted to implement was syntax highlighting within the search input field. I wanted special operators (i.e.
[...]

03.03.2026 08:42 πŸ‘ 4 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0

`position: fixed` can fix most of these.

Also see Temani's article he's already shared.

02.03.2026 23:13 πŸ‘ 3 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Video thumbnail

On my way back home from #SotB2026 I hacked my way into animating between `position-area` values with View Transitions.

Demo + details can be found on my blog: www.bram.us/2026/03/02/a...

It’s not 100% perfect though, as Firefox doesn’t do anything and Chrome has a 1-frame glitch.

02.03.2026 22:28 πŸ‘ 41 πŸ” 2 πŸ’¬ 1 πŸ“Œ 0

Deal!

02.03.2026 19:47 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Dude, and you couldn't drop a small hint this weekend? Congrats! πŸ₯³πŸ‘

02.03.2026 19:25 πŸ‘ 3 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Advanced Range Input Component

I should do some small screen enhancements next. But I was able to update my multi-thumb range sliders with code samples showing how I vision HTML, styling and custom JS for native workings.

Should probably write an update on it soon. brechtdr.github.io/enhanced-ran...

02.03.2026 18:27 πŸ‘ 5 πŸ” 4 πŸ’¬ 3 πŸ“Œ 0
Screenshot of Safari 26.4 beta.

Screenshot of Safari 26.4 beta.

interop-2022-viewport.netlify.app/individual/s...

The viewport should extend to the top and bottom edges of the screen here, allowing the lime lines to be placed against those edges.

02.03.2026 16:54 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Video thumbnail

It seems we can now customize the select element, right? right?!

Demo: codepen.io/t_afif/pen/P... via @codepen.io

02.03.2026 13:44 πŸ‘ 369 πŸ” 82 πŸ’¬ 11 πŸ“Œ 13
Preview
March meetup, Wed, Mar 25, 2026, 7:00 PM | Meetup **March Meetup β€” devs.gent** **Location:** iO \| Digital Agency\, Raymonde De Larochelaan 15\, Gent **Hosted by:** The devs.gent team **Food & drinks provided** Come hang o

Don't miss the Devs.gent CSS & UI #meetup later this month! πŸš€ We’re diving deep into View Transitions with @bram.us , and I’ll be taking the stage to experiment with some new ideas. It’s an opportunity to learn great things and to witness me tripping over some words πŸ˜€ www.meetup.com/devs-gent/ev...

02.03.2026 12:48 πŸ‘ 4 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0

I think you could also play with `animation-range` and set it to `0px 1px` for example so that you can drop the magic percentages in the keyframes and just have them go from 0% to 100% (over a scroll distance of 1px).

02.03.2026 09:57 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Great article!

FYI: To give the bottom part a color, I noticed the magic value is 4px (instead of 6px).

02.03.2026 09:53 πŸ‘ 3 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

If only Safari supported `viewport-fit=cover` in Portrait Mode on iOS. The combo with the safe-area insets gives you full control over which colors to use where.

(For completeness: They support `viewport-fit=cover` in Landscape mode on iOS. And on iPadOS they do nothing but the cover behavior)

02.03.2026 09:36 πŸ‘ 13 πŸ” 2 πŸ’¬ 1 πŸ“Œ 0