Poppin’ In | CSS-Methods – CSS-Methods

Oh, hey there! It’s been a scorching minute, hasn’t it? Thought I’d pop in and say good day. 👋

Talking of “popping” in, I’ve been taking part in with the Popover API a bit. We really first famous it wayyyyy again in 2018 when Chris linked up some details about the <dialog> ingredient. However it’s solely been since April of this 12 months that we lastly have full Popover API assist in fashionable browsers.

There was as soon as upon a time that we had been going to get a brand-new <popover> ingredient in HTML for this. Chromium was engaged on improvement as just lately as September 2021 however reached some extent the place it was dropped in favor of a popover attribute as an alternative. That appears to take advantage of sense on condition that any ingredient could be a popover — we merely want to connect it to the attribute to allow it.

<div popover>
  <!-- Stuff -->
</div>

That is attention-grabbing as a result of let’s say now we have some easy little ingredient we’re utilizing as a popover:

<div>👋</div>

If that is all of the markup now we have and we do completely nothing within the CSS, then the waving emoji shows as you may anticipate.

Add that popover attribute to the combination, nonetheless, and it’s gone!

That’s maybe the very first thing that threw me off. Most occasions one thing disappears and I assume I did one thing incorrect. However cracking open DevTools exhibits that is precisely what’s speculated to occur.

There could also be a number of popovers on a web page and we are able to differentiate them with IDs.

<div popover id="tooltip">
  <!-- Stuff -->
</div>

<div popover id="notification">
  <!-- Stuff -->
</div>

That’s not sufficient, as we additionally want some type of “set off” to make the popover, effectively, pop! We get one other attribute that turns any button (or <enter>-flavored button) into that set off.

<button popovertarget="wave">Say Hey!</button>
<div popover id="wave">👋</div>

Now now we have a popover “focused ” to a <button>. When the button is clicked, the popover ingredient toggles visibility.

That is the place stuff will get actually enjoyable as a result of now that CSS is able to dealing with logic to toggle visibility, we are able to focus extra on what occurs when the press occurs.

Like, proper now, the emoji is framed by a very thick black border when it’s toggled on. That’s a default type.

A couple of different noteworthy issues are occurring in DevTools there apart from the utilized border. For instance, discover that the computed width and peak behave extra like an inline ingredient than a block ingredient, although we’re working with a straight-up <div> — and that’s true although the ingredient is clearly computing as show: block. As an alternative, what now we have is a component that’s sized based on its contents and it’s positioned within the useless heart of the web page. We haven’t even added a single line of CSS but!

Talking of CSS, let’s return to eradicating that default border. You may assume it’s attainable by declaring no border on the ingredient.

/* Nope 👎 */
#wave {
  border: 0;
}

There’s really a :popover-open pseudo-class that selects the ingredient particularly when it’s in an “open” state. I’d love this to be known as :popover-popped however I digress. The essential factor is that :popover-open solely matches the popover ingredient when it’s open, that means these kinds are utilized after these declared on the ingredient selector, thus overriding them.

One other approach to do that? Choose the [popover] attribute:

/* Choose all popovers on the web page */
[popover] {
  border: 0;
}

/* Choose a selected popover: */
#wave[popover] {
  border: 0;
}

/* Similar as: */
#wave:popover-open {
  border: 0;
}

With this in thoughts, we are able to, say, connect an animation to the #wave in its open state. I’m completely taking this concept from one among Jhey’s demos.

Wait, wait, there’s extra! Popovers could be a lot like a <dialog> with a ::backdrop if we want it. The ::backdrop pseudo-element may give the popover just a little extra consideration by setting it towards a particular background or obscuring the weather behind it.

I like this instance that Mojtaba put collectively for us within the Almanac, so let’s go together with that.

Are you able to think about all the probabilities?! Like, how a lot simpler will it’s to create tooltips now that CSS has abstracted the visibility logic? A lot, a lot simpler.

Michelle Barker notes that that is in all probability much less of a conventional “tooltip” that toggles visibility on hover than it’s a “toggletip” managed by click on. That makes plenty of sense. However the true purpose I point out Michelle’s submit is that she demonstrates how properly the Popover API should work with CSS Anchor Positioning because it good points wider browser assist. That may assist clear out the magic numbers for positioning which might be littering my demo.

Right here’s one other gem from Jhey: a popover doesn’t should be a popover. Why not repurpose the Popover API for different UI components that depend on toggled visibility, like a slide-out menu?

Oh gosh, have a look at that: it’s getting late. There’s much more to the Popover API that I’m nonetheless wrapping my head round, however even the little bit I’ve performed with appears like it can go a good distance. I’ll drop in a listing of issues I’ve bookmarked to come back again to. For now, although, thanks for letting me pop again in for a second to say hello.