Danny Moerkerke
@dannymoerkerke.bsky.social
Independent PWA and Web Components specialist, creator of https://whatpwacando.today. I write about what the modern web can do, Web Components and PWAs.
Email list: https://modernwebweekly.com
Email list: https://modernwebweekly.com
With the CSS if() function and range syntax in style queries, I created a simplified version of a slider that changes its background color based on its progress.
The initial version used a custom CSS @function.
Details in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇 1/3
The initial version used a custom CSS @function.
Details in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇 1/3
November 3, 2025 at 6:33 PM
With the CSS if() function and range syntax in style queries, I created a simplified version of a slider that changes its background color based on its progress.
The initial version used a custom CSS @function.
Details in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇 1/3
The initial version used a custom CSS @function.
Details in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇 1/3
I do notice an issue in Firefox 144 where document.startViewTransition() works only once. Some full-screen pseudo-element stays on the page, blocking interaction with all other elements. When I navigate to another tab and back, it works again once.
It's fixed in 146:
codepen.io/dannymoerker...
It's fixed in 146:
codepen.io/dannymoerker...
October 19, 2025 at 11:30 AM
I do notice an issue in Firefox 144 where document.startViewTransition() works only once. Some full-screen pseudo-element stays on the page, blocking interaction with all other elements. When I navigate to another tab and back, it works again once.
It's fixed in 146:
codepen.io/dannymoerker...
It's fixed in 146:
codepen.io/dannymoerker...
TIL when an iOS device is connected to a macBook, click the inspect tool icon in Safari Web Inspector, then tap an element on the screen, the Elements panel reveals that element.
I always thought it was a useless tool since the screen doesn't show the iPhone screen, but now I know how it works!
I always thought it was a useless tool since the screen doesn't show the iPhone screen, but now I know how it works!
October 3, 2025 at 3:16 PM
TIL when an iOS device is connected to a macBook, click the inspect tool icon in Safari Web Inspector, then tap an element on the screen, the Elements panel reveals that element.
I always thought it was a useless tool since the screen doesn't show the iPhone screen, but now I know how it works!
I always thought it was a useless tool since the screen doesn't show the iPhone screen, but now I know how it works!
I added a demo to What PWA Can Do Today to demonstrate how the viewport meta tag configures how the on-screen keyboard resizes the viewport.
Supported in Chrome on Android and coming soon to Safari.
I explain this in the upcoming edition of Modern Web Weekly.
Subscription link and demo 👇
🧵1/3
Supported in Chrome on Android and coming soon to Safari.
I explain this in the upcoming edition of Modern Web Weekly.
Subscription link and demo 👇
🧵1/3
September 18, 2025 at 3:21 PM
I added a demo to What PWA Can Do Today to demonstrate how the viewport meta tag configures how the on-screen keyboard resizes the viewport.
Supported in Chrome on Android and coming soon to Safari.
I explain this in the upcoming edition of Modern Web Weekly.
Subscription link and demo 👇
🧵1/3
Supported in Chrome on Android and coming soon to Safari.
I explain this in the upcoming edition of Modern Web Weekly.
Subscription link and demo 👇
🧵1/3
Viewport issue in a PWA on iOS 26:
2/2
2/2
September 16, 2025 at 11:55 AM
Viewport issue in a PWA on iOS 26:
2/2
2/2
Like @bram.us already mentioned, viewport behaviour in Safari 26 is broken.
It seems safe-area-inset-* no longer works and the on-screen keyboard makes matters worse.
Here's a screen recording of Safari and a PWA.
First Safari:
🧵1/2
It seems safe-area-inset-* no longer works and the on-screen keyboard makes matters worse.
Here's a screen recording of Safari and a PWA.
First Safari:
🧵1/2
September 16, 2025 at 11:55 AM
Like @bram.us already mentioned, viewport behaviour in Safari 26 is broken.
It seems safe-area-inset-* no longer works and the on-screen keyboard makes matters worse.
Here's a screen recording of Safari and a PWA.
First Safari:
🧵1/2
It seems safe-area-inset-* no longer works and the on-screen keyboard makes matters worse.
Here's a screen recording of Safari and a PWA.
First Safari:
🧵1/2
Hallelujah!
In Safari 26 on macOS Tahoe, you can now finally inspect the service worker of a remotely connected iOS device 🎉🎉🎉
In Safari 26 on macOS Tahoe, you can now finally inspect the service worker of a remotely connected iOS device 🎉🎉🎉
September 16, 2025 at 11:36 AM
Hallelujah!
In Safari 26 on macOS Tahoe, you can now finally inspect the service worker of a remotely connected iOS device 🎉🎉🎉
In Safari 26 on macOS Tahoe, you can now finally inspect the service worker of a remotely connected iOS device 🎉🎉🎉
Anchor queries are a new API available in Chrome 139+ that enables web apps to style anchor-positioned elements based on the active fallback position.
I explain this in detail in the new edition of Modern Web Weekly that will be published tomorrow.
Demo and subscribe link 👇
I explain this in detail in the new edition of Modern Web Weekly that will be published tomorrow.
Demo and subscribe link 👇
July 17, 2025 at 7:16 PM
Anchor queries are a new API available in Chrome 139+ that enables web apps to style anchor-positioned elements based on the active fallback position.
I explain this in detail in the new edition of Modern Web Weekly that will be published tomorrow.
Demo and subscribe link 👇
I explain this in detail in the new edition of Modern Web Weekly that will be published tomorrow.
Demo and subscribe link 👇
Safari Tech Preview 223 now supports implicit anchors through the showPopover() and togglePopover() methods.
Both methods take a "source" option that programmatically defines the invoker of the popover.
Details in this week's upcoming edition of Modern Web Weekly
Demo and subscription link👇
1/3
Both methods take a "source" option that programmatically defines the invoker of the popover.
Details in this week's upcoming edition of Modern Web Weekly
Demo and subscription link👇
1/3
July 15, 2025 at 7:11 PM
Safari Tech Preview 223 now supports implicit anchors through the showPopover() and togglePopover() methods.
Both methods take a "source" option that programmatically defines the invoker of the popover.
Details in this week's upcoming edition of Modern Web Weekly
Demo and subscription link👇
1/3
Both methods take a "source" option that programmatically defines the invoker of the popover.
Details in this week's upcoming edition of Modern Web Weekly
Demo and subscription link👇
1/3
Safari Tech Preview 223 now supports using a pseudo-element as a position anchor.
This enables you to anchor a tooltip to the thumb of a slider, for example.
Demo 👇
This enables you to anchor a tooltip to the thumb of a slider, for example.
Demo 👇
July 14, 2025 at 2:22 PM
Safari Tech Preview 223 now supports using a pseudo-element as a position anchor.
This enables you to anchor a tooltip to the thumb of a slider, for example.
Demo 👇
This enables you to anchor a tooltip to the thumb of a slider, for example.
Demo 👇
The Web Install API dev trial is now live, a proposal from Microsoft to enable the installation of web apps from another origin than the app itself.
This opens up the possibility of installing PWAs directly from app stores.
More about this in next week's edition of Modern Web Weekly.
Docs 👇
This opens up the possibility of installing PWAs directly from app stores.
More about this in next week's edition of Modern Web Weekly.
Docs 👇
July 10, 2025 at 2:28 PM
The Web Install API dev trial is now live, a proposal from Microsoft to enable the installation of web apps from another origin than the app itself.
This opens up the possibility of installing PWAs directly from app stores.
More about this in next week's edition of Modern Web Weekly.
Docs 👇
This opens up the possibility of installing PWAs directly from app stores.
More about this in next week's edition of Modern Web Weekly.
Docs 👇
Chrome 138 now supports sibling-index() to get the position of a DOM element among its siblings and sibling-count() to get the total number of siblings.
You can use this to create a radial menu with dynamic number of items for example.
Demo link 👇
You can use this to create a radial menu with dynamic number of items for example.
Demo link 👇
June 27, 2025 at 3:07 PM
Chrome 138 now supports sibling-index() to get the position of a DOM element among its siblings and sibling-count() to get the total number of siblings.
You can use this to create a radial menu with dynamic number of items for example.
Demo link 👇
You can use this to create a radial menu with dynamic number of items for example.
Demo link 👇
Here's a demo of list and detail page with cross-document view transitions and the Speculation Rules API.
I explain this in detail in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇
🧵1/3
I explain this in detail in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇
🧵1/3
April 15, 2025 at 12:39 PM
Here's a demo of list and detail page with cross-document view transitions and the Speculation Rules API.
I explain this in detail in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇
🧵1/3
I explain this in detail in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇
🧵1/3
Anchor positioning now works in Safari 18.4 on iOS, but unfortunately no fallback positions yet.
Demo: codepen.io/dannymoerker...
Demo: codepen.io/dannymoerker...
April 1, 2025 at 10:10 PM
Anchor positioning now works in Safari 18.4 on iOS, but unfortunately no fallback positions yet.
Demo: codepen.io/dannymoerker...
Demo: codepen.io/dannymoerker...
Anchor positioning now works in Safari Tech Preview 215 🎉
position-area and flip keywords have not (yet) been implemented and it doesn't work correctly yet when resizing the screen.
Codepen link 👇
position-area and flip keywords have not (yet) been implemented and it doesn't work correctly yet when resizing the screen.
Codepen link 👇
March 19, 2025 at 12:12 PM
Anchor positioning now works in Safari Tech Preview 215 🎉
position-area and flip keywords have not (yet) been implemented and it doesn't work correctly yet when resizing the screen.
Codepen link 👇
position-area and flip keywords have not (yet) been implemented and it doesn't work correctly yet when resizing the screen.
Codepen link 👇
In Safari Tech Preview and Firefox, CSS masonry layout is now supported behind a feature flag.
Check the codepen: 👇
Check the codepen: 👇
February 25, 2025 at 2:05 PM
In Safari Tech Preview and Firefox, CSS masonry layout is now supported behind a feature flag.
Check the codepen: 👇
Check the codepen: 👇
Here's a thing PWAs cannot do: blur the screen when the app switcher is opened to hide sensitive information.
On Android, the "visibilitychange" event is fired when the app switcher is opened so I added a blur to the body element, but it seems a screen capture is made before this event fires
On Android, the "visibilitychange" event is fired when the app switcher is opened so I added a blur to the body element, but it seems a screen capture is made before this event fires
February 24, 2025 at 2:01 PM
Here's a thing PWAs cannot do: blur the screen when the app switcher is opened to hide sensitive information.
On Android, the "visibilitychange" event is fired when the app switcher is opened so I added a blur to the body element, but it seems a screen capture is made before this event fires
On Android, the "visibilitychange" event is fired when the app switcher is opened so I added a blur to the body element, but it seems a screen capture is made before this event fires
In Chrome 135 Canary, you can now run speech recognition on a MediaStreamTrack other than your microphone.
I updated the demo so you can record audio from your microphone and run speech recognition on it.
I will explain this in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇
I updated the demo so you can record audio from your microphone and run speech recognition on it.
I will explain this in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇
February 21, 2025 at 3:44 PM
In Chrome 135 Canary, you can now run speech recognition on a MediaStreamTrack other than your microphone.
I updated the demo so you can record audio from your microphone and run speech recognition on it.
I will explain this in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇
I updated the demo so you can record audio from your microphone and run speech recognition on it.
I will explain this in the upcoming edition of Modern Web Weekly.
Demo and subscribe link 👇
Chrome 135 (Canary) now has a different "Open in app" indicator in the address bar when an installed PWA is opened in Chrome.
On macOS, when the PWA is installed through Chrome and the web app has also been added to the Dock through Safari, Chrome lets you select which app to open.
On macOS, when the PWA is installed through Chrome and the web app has also been added to the Dock through Safari, Chrome lets you select which app to open.
February 21, 2025 at 3:34 PM
Chrome 135 (Canary) now has a different "Open in app" indicator in the address bar when an installed PWA is opened in Chrome.
On macOS, when the PWA is installed through Chrome and the web app has also been added to the Dock through Safari, Chrome lets you select which app to open.
On macOS, when the PWA is installed through Chrome and the web app has also been added to the Dock through Safari, Chrome lets you select which app to open.
Not sure if you should use this in production, but I couldn't help myself ;-)
Animated radiobuttons with view transitions.
Codepen link 👇
Animated radiobuttons with view transitions.
Codepen link 👇
February 13, 2025 at 1:54 PM
Not sure if you should use this in production, but I couldn't help myself ;-)
Animated radiobuttons with view transitions.
Codepen link 👇
Animated radiobuttons with view transitions.
Codepen link 👇
Not sure if when this was changed, but the Spotify PWA now forces me to open the native app when I try to open my library.
This is really sad.
It makes the web player totally useless so I don’t see the point for Spotify to even have one.
This is really sad.
It makes the web player totally useless so I don’t see the point for Spotify to even have one.
February 10, 2025 at 2:46 PM
Not sure if when this was changed, but the Spotify PWA now forces me to open the native app when I try to open my library.
This is really sad.
It makes the web player totally useless so I don’t see the point for Spotify to even have one.
This is really sad.
It makes the web player totally useless so I don’t see the point for Spotify to even have one.
I created a CSS only dropdown menu using anchor positioning.
The animation works by making each list item an anchor and then each item aligns itself to the bottom of the preceding item when it's opened.
I'll explain this in the next edition of Modern Web Weekly.
Codepen and subscribe link 👇
The animation works by making each list item an anchor and then each item aligns itself to the bottom of the preceding item when it's opened.
I'll explain this in the next edition of Modern Web Weekly.
Codepen and subscribe link 👇
February 6, 2025 at 1:20 PM
I created a CSS only dropdown menu using anchor positioning.
The animation works by making each list item an anchor and then each item aligns itself to the bottom of the preceding item when it's opened.
I'll explain this in the next edition of Modern Web Weekly.
Codepen and subscribe link 👇
The animation works by making each list item an anchor and then each item aligns itself to the bottom of the preceding item when it's opened.
I'll explain this in the next edition of Modern Web Weekly.
Codepen and subscribe link 👇
Another demo inspired by @ln_dev7 (X), implemented with CSS view transitions.
Codepen link 👇
Codepen link 👇
February 4, 2025 at 11:21 AM
Another demo inspired by @ln_dev7 (X), implemented with CSS view transitions.
Codepen link 👇
Codepen link 👇
I implemented "Tailwind" with only a single stylesheet.
Well, sort of...
It enables you to use attributes to set CSS properties with the attr() function.
In Chrome Canary only for now. I'll explain this in the upcoming edition of Modern Web Weekly.
Codepen and subscription link 👇
Well, sort of...
It enables you to use attributes to set CSS properties with the attr() function.
In Chrome Canary only for now. I'll explain this in the upcoming edition of Modern Web Weekly.
Codepen and subscription link 👇
February 3, 2025 at 3:38 PM
I implemented "Tailwind" with only a single stylesheet.
Well, sort of...
It enables you to use attributes to set CSS properties with the attr() function.
In Chrome Canary only for now. I'll explain this in the upcoming edition of Modern Web Weekly.
Codepen and subscription link 👇
Well, sort of...
It enables you to use attributes to set CSS properties with the attr() function.
In Chrome Canary only for now. I'll explain this in the upcoming edition of Modern Web Weekly.
Codepen and subscription link 👇
This one took me quite a while to get right but I did it! 💪
A great React Motion demo by
@ln_dev7
recreated with CSS view transitions to demonstrate how this can be achieved with CSS only.
There is JS for changing the HTML and starting the transitions but the animations are pure CSS.
🧵1/5
A great React Motion demo by
@ln_dev7
recreated with CSS view transitions to demonstrate how this can be achieved with CSS only.
There is JS for changing the HTML and starting the transitions but the animations are pure CSS.
🧵1/5
January 30, 2025 at 1:25 PM
This one took me quite a while to get right but I did it! 💪
A great React Motion demo by
@ln_dev7
recreated with CSS view transitions to demonstrate how this can be achieved with CSS only.
There is JS for changing the HTML and starting the transitions but the animations are pure CSS.
🧵1/5
A great React Motion demo by
@ln_dev7
recreated with CSS view transitions to demonstrate how this can be achieved with CSS only.
There is JS for changing the HTML and starting the transitions but the animations are pure CSS.
🧵1/5