johannes - Network

:navigation-trigger could help here in some cases, when navigating from an overview page with many items to a single item page. (By only...

:navigation-trigger could help here in some cases, when navigating from an overview page with many items to a single item page.

(By only setting view-transition-name on the element navigated from)

But, it would not work the other way, when one starts on an item-page and then navigate to an overview page.

https://github.com/w3c/csswg-drafts/issues/11801

Does anyone know if it's possible to select a `::view-transition-group` based on whether it has a `::view-transition-old/new` that is...

Does anyone know if it's possible to select a `::view-transition-group` based on whether it has a `::view-transition-old/new` that is `:only-child`?

I don't think the view transition pseudo elements are defined as :has-allowed.

The goal is to set a different z-index on groups with matching old/new image pairs.

@bramus

Seems like implementation of scroll-driven animations in WebKit is complete 🎉Time to test in Safari TP...

Seems like implementation of scroll-driven animations in WebKit is complete 🎉

Time to test in Safari TP 🚀

https://bugs.webkit.org/show_bug.cgi?id=222295

The Layout Viewport and Viewport-Relative Length are included in Interop 2025 🥳🎉Thanks to @bramus for filing 🙏

The Layout Viewport and Viewport-Relative Length are included in Interop 2025 🥳🎉

Thanks to @bramus for filing 🙏

Found this gem while doomscrolling on reddit, and can’t help sharing. TIL«In 1984, Canadian soldiers visited the island and planted a...

Found this gem while doomscrolling on reddit, and can’t help sharing.

TIL

«In 1984, Canadian soldiers visited the island and planted a Canadian flag, also leaving a bottle of Canadian whisky. The Danish Minister of Greenland Affairs came to the island himself … with the Danish flag, a bottle of Snaps, and a letter stating "Welcome to the Danish Island". The two countries proceeded to take turns planting their flags on the island and exchanging alcoholic beverages.»

https://en.m.wikipedia.org/wiki/Whisky_War

Me too, man… me too 😅https://github.com/mozilla-mobile/firefox-ios/issues/11574#issuecomment-2643336179

Me too, man… me too 😅

https://github.com/mozilla-mobile/firefox-ios/issues/11574#issuecomment-2643336179

Anyone got a tip for running the WebKit layout tests on Apple silicon without crashing macOS? 💻 💥

Anyone got a tip for running the WebKit layout tests on Apple silicon without crashing macOS?

💻 💥

Just a reminder that you can help out getting css mixins and functions specified by contributing to OddBird Open...

Just a reminder that you can help out getting css mixins and functions specified by contributing to OddBird Open Source:

https://opencollective.com/oddbird-open-source

The build is building… and tests are passing… most of them, anyway…I’m shocked 😲

The build is building… and tests are passing… most of them, anyway…

I’m shocked 😲

So much progress being made at the CSSWG F2F. Glad to see that we get to use quotation dashes with `::first-letter`...

So much progress being made at the CSSWG F2F.

Glad to see that we get to use quotation dashes with `::first-letter` 🥳

https://github.com/w3c/csswg-drafts/issues/9413#issuecomment-2622699686

Building WebKit again. Might regret this 😅

Building WebKit again. Might regret this 😅

I so wish we could use `::first-letter` in Norwegian.By our conventions, quotes can start with an n-dash and a space. These dash quotes...

I so wish we could use `::first-letter` in Norwegian.

By our conventions, quotes can start with an n-dash and a space. These dash quotes should be included in the `::first-letter`.

Unfortunately, regular and no-break spaces are excluded from the `::first-letter`, and I don't know any other space that can substitute for them.

So, for Christmas this year, I hope for a way to make `::first-letter` work with Norwegian typography.

https://johannesodland.github.io/2024/12/24/web-wish-24-first-letter.html

Handling children in web components can be a hassle. I wish we could have a `childChangedCallback()` and `childDefinedCallback()`....

Handling children in web components can be a hassle.

I wish we could have a `childChangedCallback()` and `childDefinedCallback()`.

https://johannesodland.github.io/2024/12/23/web-wish-23-children-changed-callback.html

My 22nd web wish is out. Today I wish for a way to balance flex-wrap, similar to `text-wrap:...

My 22nd web wish is out.

Today I wish for a way to balance flex-wrap, similar to `text-wrap: balance`.

https://johannesodland.github.io/2024/12/22/web-wish-22-flex-wrap-balance.html

It's currently not possible to style a slot based on whether or not it has a slotted element without using javascript. Todays wish is...

It's currently not possible to style a slot based on whether or not it has a slotted element without using javascript.

Todays wish is for a `:has-slotted` pseudo-class, so that we can conditionally apply styles based on whether the slot has slotted content or not.

https://johannesodland.github.io/2024/12/21/web-wish-21-has-slotted.html

`background-clip: text` is neat, but it's not a real text fill, and doesn't work with `text-shadow`. Today I wish for support for...

`background-clip: text` is neat, but it's not a real text fill, and doesn't work with `text-shadow`.

Today I wish for support for the `fill-*` properties for inline text.

https://johannesodland.github.io/2024/12/20/web-wish-20-text-fill.html

Editing “invisible” characters on the web is notoriously difficult. A no-break space looks like a regular space, and a soft-hyphen is...

Editing “invisible” characters on the web is notoriously difficult. A no-break space looks like a regular space, and a soft-hyphen is only detectable by stepping through each letter, checking that there's one extra character where you expect it to be.

That is, unless the editor you use explicitly handle this.

Today, I'm wishing for a way display “invisible” characters when editing text on the web.

https://johannesodland.github.io/2024/12/19/web-wish-19-display-invisible-characters.html

Sticky positioning is great, but it could do so much more.Today I wish for the next level of sticky positioning, with the power to select...

Sticky positioning is great, but it could do so much more.

Today I wish for the next level of sticky positioning, with the power to select another containing block and configure the inset from that containing block.

https://johannesodland.github.io/2024/12/18/web-wish-18-sticky-next.html

Have you started using the large, small and dynamic viewport units? `lvh` and friends are Baseline Newly available, and have been available...

Have you started using the large, small and dynamic viewport units? `lvh` and friends are Baseline Newly available, and have been available in major browsers for just over two years.

Have you been surprised with the result when you open the webpage in Slack?

It turns out viewport relative lengths don't work as expected in some In App Browsers. So today I'm wishing for the industry to figure out a way to improve support across web views and IABs.

https://johannesodland.github.io/2024/12/17/web-wish-17-viewport-relative-lengths.html

Do you miss `role=text` and need a way to tell assistive technology how to interpret a sequence of inline elements?So do I. Now that...

Do you miss `role=text` and need a way to tell assistive technology how to interpret a sequence of inline elements?

So do I.

Now that `role=text` is practically dead, I wish for another solution to configure how blocks of text are separated.

https://johannesodland.github.io/2024/12/16/web-wish-16-role-text-alternative.html