Tips | Fractaled Mind

Have a small scroll container where you want to de-emphasize the scrollbar, like in a popover? Say hello to scrollbar-color and scrollbar-width.

::picker(select) {
  scrollbar-color: lightgray transparent;
  scrollbar-width: thin;
}
::picker(select) {
  scrollbar-color: lightgray transparent;
  scrollbar-width: thin;
}

The scrollbar-color property sets the thumb and track colors (here, light gray on transparent), while scrollbar-width can be set to thin for a more subtle appearance.

Demo:

Double-dashed IDs and the enhanced attr() CSS function allow us to bind popovertargets with their popovers without having to create distinct anchor-names.

<button popovertarget="--dropdown-example"></button>
<div id="--dropdown-example" popover></div>
<button popovertarget="--dropdown-example"></button>
<div id="--dropdown-example" popover></div>

[popovertarget] {
  /* Dynamically generate anchor-name from the popovertarget attribute value */
  anchor-name: attr(popovertarget type(<custom-ident>));
}
 
[popover] {
  /* Dynamically bind to anchor using the menu's id attribute */
  position-anchor: attr(id type(<custom-ident>));
 
  /* Position at bottom of anchor, aligned to left edge */
  top: anchor(bottom);
  left: anchor(left);
}
[popovertarget] {
  /* Dynamically generate anchor-name from the popovertarget attribute value */
  anchor-name: attr(popovertarget type(<custom-ident>));
}

[popover] {
  /* Dynamically bind to anchor using the menu's id attribute */
  position-anchor: attr(id type(<custom-ident>));

  /* Position at bottom of anchor, aligned to left edge */
  top: anchor(bottom);
  left: anchor(left);
}

The key insight is using attr() with type(<custom-ident>) to dynamically read attribute values as CSS identifiers. This lets you use the same ID value for both the popovertarget attribute and the anchor-name/position-anchor properties.

Demo:

Want to prevent scrolling when a modal dialog is open? Use the :modal pseudo-class with body:has() to disable scrolling purely in CSS—no JavaScript needed.

body:has(dialog:modal) {
  overflow: hidden;
}
body:has(dialog:modal) {
  overflow: hidden;
}

Demo:

The :modal pseudo-class matches elements that are in a state where they exclude all interaction with elements outside of it until the interaction has been dismissed. This includes dialogs opened with showModal().

Want to avoid layout shift when you remove scrolling on popover or dialog opening? Use the scrollbar-gutter: stable CSS rule on your scroll container (likely <body>).

body {
  scrollbar-gutter: stable;
 
  &:has(:popover-open) {
    overflow: hidden;
  }
}
body {
  scrollbar-gutter: stable;

  &:has(:popover-open) {
    overflow: hidden;
  }
}

The problem: when a popover opens and you hide the scrollbar with overflow: hidden, the content shifts horizontally to fill the space where the scrollbar was.

The solution: scrollbar-gutter: stable reserves space for the scrollbar even when it’s not visible, preventing the jarring horizontal shift.