Friday, April 17, 2026

What’s !vital #9: clip-path Jigsaws, View Transitions Toolkit, Identify-only Containers, and Extra


This difficulty of What’s !vital brings you clip-path jigsaws, a view transitions toolkit, name-only containers, the standard roundup of latest, notable net platform options, and extra.

Making a jigsaw puzzle utilizing clip-path

Amit Sheen demonstrated the best way to create a full jigsaw puzzle utilizing clip-path. Whereas I doubt that you simply’ll have to create a jigsaw puzzle anytime quickly, Amit’s walkthrough affords a unbelievable option to acquaint your self with this evolving CSS property that’s changing into increasingly more well-liked day-after-day.

For instance, Chrome Canary shipped rounded clip-path polygons solely final week:

I and Jason are at present engaged on implementing the CSS `polygon() spherical` key phrase in Chrome.

That is one among my favourite CSS options! Due to @lea.verou.me for bringing it to CSS.

Allow the `enable-experimental-web-platform-features` flag in Chrome Canary
codepen.io/yisi/pen/NPR…

[image or embed]

— yisibl.bsky.social (@yisibl.bsky.social) Apr 9, 2026 at 7:25

And there’s additionally speak of implementing different corner-shape key phrases comparable to bevel, too.

Lastly, since we’re on the subject, and since I someway utterly missed it for What’s !vital #8, right here’s Karl Koch demonstrating some actually neat clip-path animations.

Get clippin’!

View transitions toolkit

The Chrome DevRel workforce created a view transitions toolkit, a set of utilities that make working with view transitions a bit simpler.

Right here’s my favourite demo from the positioning:

Chrome shipped element-scoped view transitions solely final month, so there’s no higher time to dive into this toolkit.

How name-only containers can be utilized for scoping

Chris Coyier mentioned the usage of name-only containers for scoping, and the way they examine to class names and @scope. Personally, I want @scope as a result of it tends to lead to cleaner HTML, and evidently Chris has up to date his stance to be extra @scope-aligned too, but it surely actually comes down to private desire. What’s your tackle it?

Hey, keep in mind subgrid?

At one level, subgrid was one of the crucial highly-anticipated CSS options, but it surely’s been two and half years because it grew to become Baseline Newly Accessible, and it’s barely made a dent within the CSS panorama. This can be a disgrace, as a result of subgrid will help us to interrupt out of grids correctly and keep away from the ‘ol Michael Scofield/nested wrappers/unfavorable margins extravaganza.

However don’t fear, David Bushell’s quite simple rationalization of subgrid has you lined.

Supply: David Bushell (though the crimson grid strains have been added by me).

You Would possibly Not Want…JavaScript?

Keep in mind You Would possibly Not Want jQuery? Pavel Laptev’s The Nice CSS Growth has an identical vibe, noting CSS alternate options to JavaScript libraries (and JavaScript generally) which can be smaller and extra performant.

A screenshot of a technical article featuring the Anchor Positioning heading, a comparison table of JavaScript libraries for anchor positioning, and a CSS code example.

Missed hits

It’s changing into more and more troublesome to maintain up with all of those new CSS options. I tried method too many rounds of Keith Cirkel’s new CSS or BS? quiz, and my finest rating was solely 18/20. Unhappy instances. Let me know your rating within the feedback (until it’s larger than mine…).

A screenshot from an online quiz titled CSS or BS? showing the CSS property font-synthesis in a speech bubble, with buttons to select whether the property is real or fake.

Related Articles

Latest Articles