I wonder how many of these use cases can be done with a CSS function/mixin on top of the lower level shape() function.
It would be much easier to experiment with such shapes in the community rather than the tideous work of standardizing and implementing cross-browser etc.
Need more context from @ericportis.com so for now joining the maybe :)
cap/join like in canvas/svg stroking?
yea you can achieve some shape-inside-ish things using inverse shape-outside. I think it gives a more honest result because it's clear where the overflow ends up.
Overview of the border-shape property
💡 CSS Tip!
We've just had the release of @developer.chrome.com 147, which means border-shape was enabled by default! 👀
css-tip.com/border-shape/
Another property to create CSS shapes, but not only that! We can do a lot of fancy stuff with it. Many cool demos/articles are on the way 🤩
There is a half-spec for it but it's really problematic in terms of overflow (what's the right way to overflow from a heart shaped text?), and in general for readability you mostly want to pad your text rather than shape it like the decoration around it.
Often the distinction between speed and logical correctness is useful I guess
"Fixed Safari gesture support to prevent pages that should not be able to scroll, such as with explicit overflow: hidden, from unexpectedly scrolling. (163660111)"
Sounds like a bug I've spent ages working around, 10 years ago when at Wix... I wonder if it fixes it!
webkit.org/blog/17862/w...
I've created a little AI skill called "web archeologist". It helps trace back existing standards to their original discussions & rationale, rummaging through github, browser bug trackers, old W3C mailing lists, IRC logs etc.
github.com/noamr/web-ar...
Happy for feedback/bugs/improvements!
Let's wobble the web
You still shipped it before we (chromium) did! Nice one!
I'm planning to be there!
Out of context reminder:
The "CORS errors" we get when we develop a page that accesses localhost are what prevents random untrusted webpages from making calls to open HTTP ports on our computer.
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.
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 😁
