`isolation` up there with `contain` for ‘underused for historic reasons’ properties.
3 weeks ago | 0
Trying this today. Gives me an idea for how to surface and inline agent on :focus
3 weeks ago | 0
(no spoiler) ever since I learned about this on your channel it's been very useful to reduces the amount or extra markup or css needed to achieve the same/a similar result. almost became a no-brainer when it comes to layering stuff with ::before/::after. that + "contain" to avoid the side effects of "overflow"
3 weeks ago | 0
I had to use this once for a complex overlay. That was a learning experience I don't want to repeat haha. Built in browser devtools (at the time) for z-index debugging were quite poor.
3 weeks ago | 0
Wish devtools could show us stacking, containing, backdrop and 3d rendering context roots
3 weeks ago | 0
Weird i got the correct answer. Yet technically forgot how to use it again. I'm debating between two options.
3 weeks ago | 0
I don't think your answer (and actuaaly my too as I answered the same thing) is correct. Check following code: <p><span>1234567</span><span>1234567</span></p> <p><span style="isolation: isolate">1234567</span><span>1234567</span></p> <p><span style="position: relative">1234567</span><span>1234567</span></p> <p><span style="transform: translateZ(0)">1234567</span><span>1234567</span></p> <style> span:first-child { background: antiquewhite; } span + span { margin-left: -3ch; background: silver; } </style>
3 weeks ago | 0
Kevin Powell
QUIZ TIME! Sticking with our Layout theme for September: Which CSS property creates a new stacking context without any visual side effects? (yes, stacking/z-index is layout related! đŸ˜…)
3 weeks ago | [YT] | 99