Bramus / is on Nostr

Chrome Developer Relations at Google (CSS + Web UI + DevTools). CSSWG Member. PADI Divemaster. Blogs at bram.us

🔗 Blog: https://www.bram.us
🎮 Playground: https://codepen.io/bramus
🪺 Birdsite: https://x.com/bramus
📍 Location: Belgium

Last Notes

2024-06-13 20:37:57

Current Status: doing what @npub1ahn…kqax was doing back in 2015.
Ana, I bow to thee 🙇‍♂️
https://css-tricks.com/cutting-inner-part-element-using-clip-path/

2024-06-11 20:55:40

🎉 Happy Cross-Document View Transitions day!
Today Chrome 126 is released. It enables Cross-Document View Transitions triggered by a same-origin navigation.
From now on, you no longer need rearchitect your app to an SPA in order to use View Transitions!
Developer Docs: https://developer.chrome.com/docs/web-platform/view-transitions/cross-document
Demos: https://view-transitions.netlify.app/
More View Transitions features Chrome recently shipped: https://developer.chrome.com/blog/view-transitions-update-io24
Recording: https://astro-zerojs-transitions.vercel.app/ by the @npub1d33…yg52 folks.
https://cdn.masto.host/frontendsocial/media_attachments/files/112/599/971/928/383/424/original/a9cdeb0cf1e35372.mp4

2024-06-07 13:24:43

CSS
IS
A
W
E
S
O
M
E
— Great fix by @npub1p63…gl53 😂
#cssday
https://cdn.masto.host/frontendsocial/media_attachments/files/112/575/557/074/290/956/original/1d7a065b418788fc.jpeg

2024-05-28 21:38:34

🥹
Very exciting news! This is the thing that gives Custom Properties their SUPERPOWERS.
Yes, you can use them to enforce type safety, limit their inheritance, and set up a default but what I like most about them is that YOU CAN ANIMATE/TRANSITION REGISTERED CUSTOM PROPERTIES.
https://botsin.space/@intenttoship/112519846001484140

2024-05-24 08:59:58

📣 PSA: Time to update your MPA View Transitions demos!
The opt-in for Cross-Document View Transitions for MPA is by means of the @view-transition at-rule in CSS.
The meta tag from before was a temporary thing while the feature was being developed behind a flag.
https://cdn.masto.host/frontendsocial/media_attachments/files/112/495/243/239/627/417/original/8e5fbce6afdb2ad6.jpg

2024-05-16 16:19:11

What's new in view transitions? (Google I/O 2024 update)
In this video I introduce you to cross-document view transitions for MPA along with two improvements that allow you to more easily work with view transitions in general.
https://developer.chrome.com/blog/view-transitions-update-io24
#viewtransitions #googleio

2024-04-30 19:26:38

🎉🍾 View Transitions Excitement!
Intent to Ship: View Transitions Same-Origin Navigation
https://groups.google.com/a/chromium.org/g/blink-dev/c/LsA567xpe7k
Soon you'll no longer have to rearchitect your website to an SPA in order to use View Transitions, as Cross-Document View Transitions work with MPAs!
To be included in Chrome 127, which goes stable mid July 2024.

2024-04-12 21:02:34

- reply

To close (for now), here’s a poll: Would you, as a user, benefit from per-site light/dark mode overrides that can diverge from the OS setting?

2024-04-12 21:02:07

- reply

The extension is getting its final touch ups and should be published soon.
Consider this more of a POC than a 100% polished extension. Especially because you will get FART (https://css-tricks.com/flash-of-inaccurate-color-theme-fart/) as it relies on injection scripts.
(If this override would ever become a proper Chrome feature, you would not have the FART)

2024-04-12 21:01:55

- reply

Furthermore because the extension uses the Web Preferences API, it can also respond to changes invoked by the website.
See 2nd part of the recording where the extension responds to Luke’s site changing the preference.

2024-04-12 21:01:51

- reply

Overrides get persisted in your Chrome profile. So if you re-open a website, or switch from your one Chrome to your other, the chosen override gets applied.
That way your OS can remain in Light Mode, while a certain website will always be in Dark Mode (or vice versa).

2024-04-12 21:01:30

- reply

To close that gap, and to get to that “Browser Dark Mode Toggle” I’ve been wanting, I’ve built an extension that does the job.
The extension adds a button to Chrome that allows you to cycle through system-dark-light on a per-origin basis.
https://www.youtube.com/watch?v=oaN39_M4zk4

2024-04-12 21:01:19

- reply

The API is experimental and only available in Chrome Canary behind the “Experimental Web Platform Features” feature flag.
While the API works, Chrome itself doesn’t do anything with the changes yet. If you override a value on a site, the override is not persisted in Chrome.

2024-04-12 21:01:08

- reply

Thanks to this API, you can ask the website to override the reported value of `prefers-color-scheme` to `light` or `dark`.
This in contrast to existing approaches where you toggle a class/data-attribute on :root and then need to duplicate your dark styles in your CSS.
https://cdn.masto.host/frontendsocial/media_attachments/files/112/260/261/784/461/685/original/dfcd60ce414d9dd3.png

2024-04-12 21:00:29

- reply

Since writing that article in 2022, [@Lukew](https://toot.wales/@Lukew) has been working on the Web Preferences API.
It’s a way for sites to override the value for a given user preference (e.g. color-scheme preference) in a way that fully integrates with existing Web APIs.
https://wicg.github.io/web-preferences-api/

2024-04-12 20:59:54

🌞 ~vs~ 🌑
If you’ve been following me for a while here you most likely know that I think that Dark Mode Toggle Buttons should be a browser feature:
Let the user decide which color-scheme they want on a per-site basis and store that.
https://brm.us/dark-mode-override

2024-03-27 21:46:46

🎉 RESOLVED: View Transitions level 2 to public working draft
Level 2 of this specification defines hows the View Transition API works with cross-document navigations.
Soon, you’ll no longer need to refactor your MPA to an SPA in order to use View Transitions!
https://cdn.masto.host/frontendsocial/media_attachments/files/112/169/844/467/086/227/original/ac79ef51dababf8f.png

2024-03-27 20:58:02

New article got published: CSS `color-scheme`-dependent colors with `light-dark()`
🔗 https://web.dev/articles/light-dark
https://cdn.masto.host/frontendsocial/media_attachments/files/112/169/650/676/743/857/original/8c942013015a714f.png