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...
For further actions, you may consider blocking this person and/or reporting abuse
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!
Thank you so much for your kind words! 😄
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
isolationreally 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-gapthing, 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-0L4Again, thanks for your contribution, I appreciate it!
This will solve a lot of my problems. Thanks!
Glad it helped! ☺️
Nice, thanks for sharing Francesco!
Thank you! Glad you liked it ☺️
Absolutely fantastic! Your tip is greatly appreciated. Thank you so much!
Thanks! Happy you liked it 😉
Can this be utilized for GPU acceleration?
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 aboutisolation, 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...
Awesome post
Thank you so much! ☺️
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...
Amazing tip, I never heard about this property.
I learned something new in my Frontend study journey.
Thanks for sharing with us ✌️
Easy yet so powerful. Thanks for this great tip !
I agree! Pretty easy concept, but also really handy once you know it exists! Thanks for stepping by 😉
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!
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!
Doesn't
position: relativealready do that?Nope,
position: relativealone 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: relativeAND az-indexvalue other thanauto, butposition: relativealone doesn't work.isolation: isolateis still a better solution in my opinion, because it is very explicit in what it's doing, and causes no other side-effects ☺️oops, I missed the
z-index value other than autopart. Thank you for your explanation!You're welcome! Thanks for stepping by 😊