Reply with interesting CSS properties, selectors, e.t.c

[MediocreMetastasis]

There's so much css out there I don't know about, there's some css I find that I wish I knew about eariler.
So, that's why I made this topic.

I'll start

mix-blend-mode: ... ;
let's you use different blend modes like color dodge, color burn, screen, multiply e.t.c.
If you're a graphic designer and want more flexibility in your site design, this is a must.

@media only screen and ... {}
If you want to support mobile. You pretty much need to use this selector with either the max-width or aspect-ratio modifier

calc() function is also a lifesaver sometimes

[Dan Q]

Okay, so here's a few bits of CSS I'm excited about this week (ask me in any given week, though, and it'll be different!):

scrollbar-gutter:

This lets you stop your content "shifting" when a scrollbar appears or disappears. I found it while I was trying to improve a "lightbox" effect (click an image, have a big version appear as a popover), because I had some CSS like this to stop you accidentally scrolling while a popup image was shown:

Code

body:has(.lightbox-full-image:popover-open) {
  overflow: hidden;
}

But the problem with this was: if your scrollbars were visible (i.e. in "inline" rather than "overlay" mode) before, this makes them disappear, and all the background content jumps 8 pixels to the right or something. So I added this code to fix it:

Code

/* Keep the same horizontal space regardless of non-overlay scrollbar
 * presence/absence, in case they appear/disappear: */
:root {
  scrollbar-gutter: stable both-edges;
}

I had to do a little extra black magic to make my "faded blurry background" effect "behind" where the scrollbars used to be, but that was just more of the same.

anchor-name: and position-anchor:

You know how you can make something position: relative; and then you can position: absolute; one of it's children, but relative to the parent? Isn't it annoying when you want to do that, but you want to position something relative to... something that isn't its parent?

That's what these are for! So you might have something like...

Code

<!-- this is genuine vanilla HTML by the way: did you know you could do this? -->
<p>
  You can
  <button class="contact-link" popovertarget="contact-info">
    contact me
  </button>
  in a variety of ways.
</p>

<div popover id="contact-info">
  <h2>Contact</h2>
  <dl>
    <dt>Email</dt>
    <dd>dan@example.com</dd>
    <dt>Post</dt>
    <dd>1 Some Street, Exampleville</dd>
  </dl>
</div>

<!-- the functionality's all above: the CSS just positions the popover better... --->
<style>
/* Make the button look more like a link */
.contact-link {
  all: reset;
  padding: 0;
  background: none;
  border: none;
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

/* Make the popover appear close to where you click */
.contact-link {
  anchor-name: --contact-link;
}

#contact-info {
  position: absolute;
  position-anchor: --contact-link;
  position-area: bottom center;
  margin-top: 0.5rem;
}
</style>

That HTML code gives you a (no-JS!) popup that appears when somebody clicks the "contact" button.

That CSS makes the button look more like a link, and moves the popup so it appears right below the button. It can do that, even though it's not a child of the button, thanks to position-anchor and anchor-name.

There's also this really cool thing I've not played with yet called position-try-fallbacks: that lets you say where to put it if it won't fit. So that if e.g. there wasn't space beneath, you could have it try to flip to above instead. It's cool!

[Seechain]

Code

image-rendering: pixelated;

This forum uses it for its images. It prevents the browser from blurring them, so the hard edges of pixel art icons and things like that look nice and sharp.