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

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

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

Viewport issue in a PWA on iOS 26:

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

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 👇

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

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 👇

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 👇

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 👇

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

Anchor positioning now works in Safari 18.4 on iOS, but unfortunately no fallback positions yet.

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 👇

Not sure if you should use this in production, but I couldn't help myself ;-)

Animated radiobuttons with view transitions.

Codepen link 👇

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 👇

Another demo inspired by @ln_dev7 (X), implemented with CSS view transitions.

Codepen 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