Forem: Francesco Vetere

↔️ Sideway selection in CSS with :has()

Francesco Vetere — Wed, 31 Jan 2024 11:40:14 +0000

Hi folks! 👋 Today I would like to share with you this codepen I created in order to showcase a simple but really cool use for the recently introduced :has() selector.

If you hover with your mouse over any of the emojis, you'll notice that not only the hovered emoji smoothly pops up, but its previous and next siblings also get affected a little bit, creating a very pleasant effect.

This cool effect is only possible thanks to the :has() selector, recently introduced in the CSS world and now available for all the major browsers.

➡️ :has() is a functional pseudo-class that allows us to style an element based on its descendants or any succeeding elements.

Basically, :has() allows to style the element it is attached to — otherwise known as the target element. This is similar to other pseudo-classes like :hover, where a:hover is intended to style the <a> element in an hovered state.
However, :has() is also similar to :is(), :where(), and :not(), in that it accepts a a list of relative selectors within its parentheses. This allows :has() to create complex criteria to test against, making it a very powerful selector.

For example, if I wanted to select all the <article> elements that contain an <img> as child, :has() would make this quite a simple task:

article:has(img) {
  /* ... */
}

This use of :has() is certainly one of the most common: it basically acts as a parent selector, something that really was missing in the web platform and was highly demanded for years by developers.

❗ BUT, because :has() actually accepts a relative selector list as its argument, you can select so much more than just the parent element! Using various CSS combinators, it is now possible to not only go up ⬆️ the DOM tree, but also do sideway selections! ↔️

For example, article:has(+ article) will select any <article> element that has another <article> as a direct sibling. This apparently simple selection would just not be possible without :has(), and it would have required some extra JavaScript.

💡 The codepen I realized takes advantage of this very idea. I basically want to apply some styling (a scaling and a translation) for the currently hovered emoji, but also for its previous and next sibling.

➡️ :has() makes this really easy:

.dock li:hover {
  /* scale and translate the hovered emoji */
}

.dock li:hover + li {
  /* scale and translate the next emoji */
}

.dock li:has(+ li:hover) {
  /* scale and translate the previous emoji */
}

Of course the full code is a little bit more complex than that (you can check out the codepen if you're curious), but the main idea really is based on this simple snippet. Having a way to select not only an element and its next sibling, but also its previous one, opens up a whole new world of possibilities.

And that's it! Feel free to leave a comment and let me know what other cool stuff you built using :has() 😉

Till next time! 👋

🧙‍♂️ CSS trick: transition from height 0 to auto!

Francesco Vetere — Sat, 25 Nov 2023 09:20:53 +0000

If you messed around with CSS for long enough, chances are you've tried at least once to make a transition from height: 0 to auto... only to find out that it doesn't work! 😢

➡️ Luckily, today there is actually a solution to this problem: it uses CSS Grid under the hood, and it is just so easy and it works flawlessly!

Let's start with a practical example. I have built this simple accordion:

The HTML for it is pretty straightforward:



<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
</div>

If you hover with your mouse over the accordion, you'll notice that a dropdown appears. That's cool, but what if we wanted to make it appear with a nice smooth transition?

I actually tried to do so in the previous codepen by adding a little transition on the height property:



.accordion-body {
  height: 0;
  transition: 500ms height ease;
}

.accordion:hover .accordion-body {
  height: auto;
}

❌ Unfortunately, this doesn't work: transitioning from height: 0 to height: auto, as I was saying earlier, is something not possible with CSS.

🤔 How to solve this?

Well, a first solution could be setting the height property to a fixed number, instead of auto.

This would work, but it's not such a great approach: in order to compute this fixed number we would have to resort to JavaScript, in order to calculate how much our .accordion-body is actually tall... not really what we aimed for!

😕 Can we still achieve this effect, but with a CSS-only solution?

💡 Actually, yes! Why don't we just use max-height instead?



.accordion-body {
  max-height: 0;
  transition: 500ms max-height ease;
}

.accordion:hover .accordion-body {
  max-height: 200px;
}

This would be the result:

Since we are defining a fixed value for max-height, the browser is now able to perform the transition correctly.

😕 The only problem is that, since we are defining a fixed value for max-height, now the content could potentially overflow:

If you're sure that your content will always be such that it never reaches a certain height... then it's perfectly fine to use this method! Just use an appropriate value for max-height, and you're good to go.

Be aware though, the higher the value for max-height, the weirder the transition gets (try putting a max-height: 1000px in the previous codepen, and see how things change!).

🤔 Can we do better? Can we avoid having any fixed height/max-height in the first place?

🎉 CSS Grid comes to the rescue!

✅ We can actually use a neat trick which basically consists in making a CSS grid with a single grid item.

All we really have to do then, is taking our grid-template-rows and make it transition from 0fr to 1fr: this way, our grid item will transition from 0 to its "natural" height. It's THAT simple:



.accordion-body {
  display: grid; 
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}

.accordion:hover .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-body > div {
  overflow: hidden;
}

This feels a lot cleaner. No fixed heights, no fancy stuff, just our accordion working as expected. Wonderful! 😄

The one caveat to this solution is that you actually need to set an overflow: hidden to the .accordion-body's internal div in order to make this work. In my opinion, this little extra CSS is totally worth it, but let me know in the comments what you think about it!

🎁 Bonus tip

This trick only works because of the animability of grid-template-rows (and, more generally speaking, of grid tracks).

This is quite a recent feature for some browsers: if you visit this page you'll notice that grid tracks animability is something that, for example, only landed in Chrome starting from version 107.

At the time I'm writing this article all major browsers supports this feature, but always check for compatibility first if you want to use this feature in production code!

And that's all! Feel free to leave a comment and let me know if you already knew about this awesome CSS feature! 😉

Till next time! 👋

The CSS property you didn't know you needed 👈

Francesco Vetere — Sat, 18 Nov 2023 07:29:04 +0000

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 isolation property! 🪄

➡️ It basically provides more control over how elements interact with the rest of the document, and it is often an elegant solution for z-index issues.

Let's start with a practical example. I've built this simple card:

The HTML for it is pretty straightforward, and it looks something like this:

<article class="card">
  <header class="card__header">
    <img class="card__avatar" src="..." alt="..." />
    <span class="card__name">Daniel Clifford</span>
    <span class="card__role">Verified Graduate</span>
  </header>

  <p class="card__summary">I received ...</p>

  <p class="card__description">I was an EMT ...</p>
</article>

Some styles have been applied too, in order to set up colors, typography and layout. However, we can completely ignore them as they will not play any role in what we are going to do now.

Now, let's say that we want to add a quotation mark image to the top-right corner of the card, as a little decorative element. Something like this:

🤔 How can we achieve that?

💡 We could treat the quotation mark image as a pseudo-element, and use position: absolute to place it over the card! Let's give it a try 💪

.card {
  /* We want the .card element to be the containing block for its children .card::before */
  position: relative;
}

.card::before {
  /* This is a pseudo-element, so we need to give it a content by definition */
  content: "";

  /* We position our image over the card, with a little offset from the right */
  position: absolute;
  right: 2em;

  /* We define a size for our image */
  width: 150px;
  aspect-ratio: 1; /* This makes sure that the image is a square */

  /* We bring in our image through a background-image */
  background-image: url(https://raw.githubusercontent.com/francescovetere/testimonial-grid-section/main/images/bg-pattern-quotation.svg);
  background-repeat: no-repeat;
  background-size: contain; /* This makes sure that the background actually fills all the available space (150px x 150px) */
}

This is the result we get:

It looks good, except for one little issue: we want to push this image behind the text!

Here's where our z-index comes into play. A little z-index: -1 should do the trick, right? Well... not exactly 😕

😱 It... disappeared?!

Well, if you think about it, that makes perfect sense: every element, by default, gets a z-index: 0. So, it's like saying that each element on the page lives on the very same layer, by default.

When we declare a z-index: -1 on our pseudo-element, we are actually pushing it under the defaut layer!

🤔 How can we solve this?

Ideally, we would like to have a local, scoped z-index: when I say that I want my pseudo-element to have a z-index: -1, what I really mean is: "go behind everything, but NOT behind the card itself!"

✅ This concept is actually built-in into CSS, and it's called stacking context!

A stacking context basically is defined by an element, that acts as the root for its children's z-index declarations. In particular, the children can never escape behind their stacking context, no matter how low their z-index are.

By default, a plain HTML document will have a single stacking context, and every element refers to it. That's why, when we assigned z-index: -1 to our pseudo-element, it was pushed all the way back: there was only one, global stacking context!

💡 BUT, of course, we can also create new stacking contexts on arbitrary elements!

There are a number of ways we can create a new stacking context on an element. Some of them are:

Assigning a transform to it;
Assigning a filter to it;
Assigning an opacity to it;
...

You can find the full list of properties here.

All these methods have one, big issue: they also come with side-effects! 😢

Yes, they create a stacking context, which is what we want, but they also do something else, which maybe we don't necessarily want!
I mean, why should I be forced to apply an opacity to an element in order to create a stacking context, even if I didn't want to apply any opacity at all in the first place?

🪄 Luckily, there's an easy solution, and it's called isolation!

isolation is a special property whose sole and unique purpose is to create a new stacking context on the element it is applied to, with no other side-effects. 😄

It accepts two values, auto and isolate. Of course, isolate is what we want.

✅ So, that's it! The final solution to this problem reveals to be extremely simple:

.card {
  position: relative;
  isolation: isolate;
}

Here's the result with all the code, if you want to mess around with it! ☺️

And that's all! Feel free to leave a comment and let me know if you already knew about this awesome property! 😉

Till next time! 👋

How I organize my CSS declarations 🗂️

Francesco Vetere — Sun, 12 Nov 2023 02:35:08 +0000

Hi folks! 👋 A while ago, I started adopting this little style convention in my CSS code, and I wanted to share it with you in this article.

➡️ It is about defining an order over the various declarations that may appear into a selector. Let me be more specific.

Instead of just throwing all of my declarations one after another, without any particular order, I try to divide them semantically, grouping them under a common area.

Approximately, this is the skeleton that I try to follow:

.my-selector {
  /* display stuff */
  display: ...;
  grid-template-columns: ...;

  /* positioning stuff */
  position: ...;
  left: ...;
  z-index: ...;

  /* box-model stuff */
  width: ...;
  padding: ...;
  border: ...;
  margin: ...;

  /* typography stuff */
  text-align: ...;
  font-family: ...;
  color: ...;

  /* manipulation stuff */
  transform: ...;
  filter: ...;
  opacity: ...;  

  /* misc stuff */
  box-shadow: ...;
  border-radius: ...;
}

Of course this is just an approximate blueprint, and I do not follow it strictly each and every time. If an exception should be made, so be it!

But the thing is, in the general picture, keeping this kind of style helps my code in at least 3 ways:

✅ It's more consistent
✅ It's less error-prone
✅ Overall it's more readable, and thus more maintainable

Just to give you a quick comparison example, this is what a simple button could look like without using any ordering for its various declarations:

button {
  text-transform: uppercase;
  border-radius: 8px;
  display: inline-flex;
  padding: 0.5em 1em;
  font-size: 1rem;
  align-items: center;
  transition: 250ms ease-out opacity;
  gap: 1em;
  text-align: center;
  font-weight: 700;
  background-color: #252b2e;
  color: white;
  border: none;
  justify-content: center;
  cursor: pointer;
}

😐 Pretty overwhelming, isn't it?
The very same button, with some tidy-up, could look a little bit nicer:

button {
  display: inline-flex; 
  justify-content: center; 
  align-items: center;
  gap: 1em;

  padding: 0.5em 1em;
  border: none;
  background-color: #252b2e;

  font-size: 1rem;
  font-weight: 700;
  color: white;
  text-align: center;
  text-transform: uppercase;

  transition: 250ms ease-out opacity;

  cursor: pointer;
  border-radius: 8px;
}

😁 Much better!
Now, at a glance, I can see more clearly where everything is placed in the code, and if I just need to modify the background-color for this button, I know where to look.

At this point, one could also enforce an ordering for the declarations inside each group: it could be alphabetical, it could be something else.

I really just focus on the big picture here: to me, it doesn't really matter much if a font-size comes before or after a font-weight.
What matters, is that typography-related declarations are well distinguishable and separated from, for example, display-related ones.

And that's all! Feel free to leave a comment and let me know what you think about this! 😉

Till next time! 👋

I made a CSS Frankenstein 👻

Francesco Vetere — Tue, 07 Nov 2023 17:14:18 +0000

Hi folks 👋 Today, I wanted to share with you this cool CSS art I made as part of a spooky CSS Battle 👻:

This was not only a lot of fun, but really educational too.

I found out that the head shape could be easily accomplished with a fancy border-radius, which I generated with this cool website. Basically, that shape is obtained with a:

border-radius: 15% 15% 100% 100% / 15% 15% 100% 100%;

Also, the hair fringe was perfectly suitable for a clip-path. I used this other cool website in order to better visualize what I was clipping. I basically want a triangle, so I can obtain it with:

clip-path: polygon(100% 0, 0 0, 50% 100%);

The mouth was also perfectly suitable for a clip-path, since it is essentially a semicircle:

clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);

📽️ If you enjoy these kind of things, here's a video of me speedrunning through the whole process 😉

Of course, as often happens in CSS, there are a lot of different ways we could accomplish the same results. Let me know if you would have done something differently in any way, I'm really curious! 😊

CSS-only direction-aware hover effects

Francesco Vetere — Fri, 03 Nov 2023 21:03:26 +0000

Hi everyone! 👋 I just discovered a really great way to build a simple direction-aware hover mechanism using nothing but CSS (big thanks to Kevin Powell 😁), and I wanted to share it with you with this simple codepen I created.

If you hover over any of these links with your mouse coming from the top or the bottom, you'll notice a simple decoration coming under the link itself: nothing too fancy, plain old CSS here.

The real magic comes if you do hover on a link coming from its left or its right: in these cases, you'll notice that this decoration doesn't just "appear" under the link, it slides into it!

This cool effect is only possible thanks to the :has() selector: in this particular example, it basically allows us to target an <li> element such that its next sibling is currently hovered.

The :has() selector is kinda new in the CSS world, so it is possible that your browser currently doesn't support it (you can check that here).
If that's the case, you just won't see this nice sliding effect, but the overall layout won't break. So, I consider this a really good progressive enhancement.

Without :has(), this operation would have required some JavaScript in order to manually target the <li> that meets the desired condition. Now instead, this is possible using nothing but CSS: kinda amazing in my opinion! 😁