Noam Rosenthal

Firefox is joining the shape() game 🤩

It's a good time for some blobs: css-generators.com/blob/

Or maybe a nice wavy divider: css-generators.com/wavy-divider/

And stay tuned for another generator and more shapes next week! 🤫

border-shape is coming.
Enough with the rectangular web!

Probably an SVG of sorts.

Yea, for various reasons we can't expand the background beyond the border-box. Using padding for that area is the way to go atm.

In the future we might allow separating the border-width from the stroke width of the border-shape, in which case the border width can account for this area.

Thanks @fserb.com for working on the hardest bits of this! Couldn't have done this without you.

The corner cases of implementing CSS corner-shape in Blink  |  Blog  |  Chrome for Developers Learn about the complexity of implementing the corner-shape feature.

developer.chrome.com/blog/impleme...

The corner cases of implementing CSS corner-shape in Blink  |  Blog  |  Chrome for Developers Learn about the complexity of implementing the corner-shape feature.

Blog post: some inner workings of implementing CSS corner-shape in Blink.

@developer.chrome.com

developer.chrome.com/blog/impleme...

Element-Scoped View Transitions are gonna be **SO GOOD**

There’s still some details to settle, but the main thing is there: run VTs on a subtree of the DOM, allowing parallel VTs.

And with `view-transition-scope` you can limit the scope of `view-transition-name` values, allowing VTs to be nested.

Needless to say, Lotsa feedback welcome!

I've created a lot of little example for JS/HTML streaming (aka declarative partial updates).

Check it out: wicg.github.io/declarative-...

or source: github.com/WICG/declara...

(Needs up to date chrome canary with experimental features enabled)

It's coming soon!

Yea, that technique only works with things that are popup-like or that have space reserved for them from the outside.

nice!
btw do these web components have external styles in their shadow DOM? Because that would be another FoUC... I would probably do something like "styling them into existence" in this case, where they are hidden by default external stylesheet shows them using opacity or whatnot.

Also the above reset means that if an unknown component is discovered after the body is already shown, the entire page would disappear until its JS is defined... I guess that would work in very particular circumstances of how the web components are defined/served.

Render blocking would only work for the first render... so if you've rendered once and you want to reduce FoUC for the following loaded components you'd need some other technique.

border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).

This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.

Demo: codepen.io/una/pen/ByzY...

Yea mine apparently needed one 😁

Haha thanks
Yea shopping is a good remedy for sure!

I can install them back
But it's a fun chore 😊

Yea he's a thorough kid for sure...

Mechanical keyboard meets 3yo

In other other words, 0x80 black on a white background *substracts* 0x80 from all the 0xff channels of white, so (0xff - 0x80 = 0x7f).

The formula is:

(foreground * alpha/0xff) + (background * (1 - alpha/0xff)
foreground = 0, white=0xff
So

(0 * 1) + (1 * (255 - 128) = 0 + 127

In other words, the max is 255 and not 256, and what's multiplied is the background with the inverse, so you get 127 and not 128.

Old has always been the new new

Working on some interesting stuff...

[css-borders-4]: `border-shape` order of shapes in the two-shape variant · Issue #13308 · w3c/csswg-drafts Currently the spec for border-shape: <<basic-shape>> <<basic-shape>> defines that the first shape is the outer one and the second shape is the inner one. I don't know if this was 100% thought out. ...

Also, let's continue this party at github.com/w3c/csswg-dr... ?

Note that those have meaning beyond adding and removing - the inner shape is the overflow area for the contents and the outer shape interacts with shape-outside.

Yea we could bikeshed something better for this for sure.

I wonder if we should use keywords instead of rely on the order, e.g. `circle() enclosing square()` or `circle() clipped-by square()` or some variation.

See related poll: bsky.app/profile/noms...