DEV Community

Cover image for The CSS property you didn't know you needed πŸ‘ˆ

The CSS property you didn't know you needed πŸ‘ˆ

Francesco Vetere on November 18, 2023

Hi folks! πŸ‘‹ Today I wanna talk about a CSS feature that, in my opinion, doesn't get too much attention... but it should! I'm talking about the isol...
Collapse
 
jeremyfarrance profile image
Jeremy Farrance

I agree, I didn't know I needed that and I do! That was almost better than rediscovering Drivers Seat (by Sniff n the Tears) yesterday. This was very well written and I really appreciate the explanation and details!

Collapse
 
francescovetere profile image
Francesco Vetere

Thank you so much for your kind words! πŸ˜„

Collapse
 
artxe2 profile image
Yeom suyun

Can this be utilized for GPU acceleration?

Collapse
 
francescovetere profile image
Francesco Vetere • Edited

From my understanding, whether or not a property will determine some kind of GPU acceleration, depends on a variety of factors, including the browser, the OS, the available hardware, etc...

However, there are some properties that can "encourage" this acceleration: some of them are transform, will-change, filter, ... I'm not sure about isolation, as I don't find anything about it on the web. However, if you want to dig more into it, I found these articles which explains these concepts really well:

smashingmagazine.com/2016/12/gpu-a...

stackoverflow.com/questions/263567...

Collapse
 
farzaadweb profile image
Farzad Farzanehnya

Absolutely fantastic! Your tip is greatly appreciated. Thank you so much!

Collapse
 
francescovetere profile image
Francesco Vetere

Thanks! Happy you liked it πŸ˜‰

Collapse
 
best_codes profile image
Best Codes

This will solve a lot of my problems. Thanks!

Collapse
 
francescovetere profile image
Francesco Vetere

Glad it helped! ☺️

Collapse
 
sreno77 profile image
Scott Reno

Awesome post

Collapse
 
francescovetere profile image
Francesco Vetere

Thank you so much! ☺️

Collapse
 
chriscoyier profile image
Chris Coyier

If anyone like learning via video I remember a Kevin Powell video that uses the "large quote" example as well:

twitter.com/kevinjpowell/status/15...

Collapse
 
nwarwick profile image
Nicholas Warwick

Nice, thanks for sharing Francesco!

Collapse
 
francescovetere profile image
Francesco Vetere

Thank you! Glad you liked it ☺️

Collapse
 
dedodev profile image
Daniele

Amazing tip, I never heard about this property.
I learned something new in my Frontend study journey.
Thanks for sharing with us ✌️

Collapse
 
merkrynis profile image
Julien Bouvet • Edited

Easy yet so powerful. Thanks for this great tip !

Collapse
 
francescovetere profile image
Francesco Vetere

I agree! Pretty easy concept, but also really handy once you know it exists! Thanks for stepping by πŸ˜‰

Collapse
 
livepurposefully profile image
Luli Hashimoto

This was a helpful read, I am sure it will be of use soon! It was fun to learn about a solution that’s so simple and doesn’t create undesired side-effects.
Thank you for sharing!

Collapse
 
francescovetere profile image
Francesco Vetere

So glad it helped! Yeah, it's really powerful and I really wanted to share this with the community to help as many people as possible 😊 Thanks for stepping by!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
francescovetere profile image
Francesco Vetere • Edited

First of all, thanks for your contribution!

This card that you see here was part of a bigger challenge on frontendmentor.io, a platform where you can find ready-made challenges and just build them starting from pre-existing designs.

I actually solved this challenge some time ago: frontendmentor.io/solutions/testim...

And here's the codepen for it: codepen.io/francescovetere/pen/Bax...

So, a few considerations:

1) About accessibility/colors/fonts... well, that was the design, and I just recreated it πŸ˜…

2) About the CSS reset, it was there because I always include it every and each of my projects, no matter what. I especially love Andy Bell's reset these days. Of course I don't do it for small demos, but as I said, this wasn't originally a demo, it was something more complex. I just thought that I could create a new codepen, extract one card from that grid and use it without worrying too much about the details (as I said in the article, there is some "other" styling applied, but it can be ignored for the purpose of this article).

3) Of course you could use a background for the quotation mark instead of a pseudo-element, and guess what? Originally, I did so! πŸ˜‚ If you check the codepen I just linked you, you'll see that the quotation mark is in fact a background-image, not a pseudo-element. As you know, there is more than a way to obtain the same result, especially in CSS... I just figured this was a good example to show, in a very simple manner, what isolation really is. There are some better use cases for it? Of course! But this was just a simple example by which I think it is very easy to grasp the idea of it, and that was my goal.

4) For the row-gap thing, yes, I understand, that's reasonable! Anyway, I link you to a video that really made me realize that sometimes using grid or flexbox just to "create" space, may not be always the best idea: youtube.com/watch?v=Gx0iZrN-0L4

Again, thanks for your contribution, I appreciate it!

Collapse
 
potcode profile image
Potpot

Doesn't position: relative already do that?

Collapse
 
francescovetere profile image
Francesco Vetere • Edited

Nope, position: relative alone doesn't create a new stacking context, and you can easily verify that by looking at the first code snippet I showed.

You could obtain a stacking context with the conjuction of position: relative AND a z-index value other than auto, but position: relative alone doesn't work.

isolation: isolate is still a better solution in my opinion, because it is very explicit in what it's doing, and causes no other side-effects ☺️

Collapse
 
potcode profile image
Potpot • Edited

oops, I missed the z-index value other than auto part. Thank you for your explanation!

Thread Thread
 
francescovetere profile image
Francesco Vetere

You're welcome! Thanks for stepping by 😊