UA stylesheet rules for ::interest-button

I'm splitting this issue out from #12437. (See also #13980 and #13981.)

Let's figure out what the right UA stylesheet rules should be for ::interest-button. From this comment (and tweaked according to that conversation), here's a proposal:

[interestfor]::interest-button {
  display: inline-block;
  color: inherit;
  background-color: transparent;
  box-sizing: border-box;
  min-inline-size: 24px;
  min-block-size: max(24px, 1lh);
  vertical-align: middle;
  align-content: center;
  text-align: center;
  user-select: none;
  cursor: help;
}
[interestfor]::interest-button:hover {
  background-color: color-mix(currentColor 10%, transparent);
}
[interestfor]::interest-button:active {
  background-color: color-mix(currentColor 20%, transparent);
}

When used with proposed layout sibling approach, and with a developer opt-in of:

::interest-button {
  content: '\24D8' / '';
}

those styles result in this:

(You can test yourself, with this test site, the latest Chrome Canary, and Experimental Web Platform Features enabled.)

Since the layout tree issue was resolved to make ::interest-button a trailing sibling layout box, I believe the UA stylesheet in the OP here makes sense. It roughly:

sets up the pseudo element to look "button-ish"
includes hover/active styling like a button (but we should follow whatever is resolved in [css-forms-1] Refine base appearance state change colors #14496)
it has min 24px sizes so that touch target size rules are met
it aligns the button with the originating element
is has cursor: help to help indicate what it does, and user-select:none to avoid selecting it

Suggestions appreciated for improvements. Otherwise, my proposed resolution is:

Proposed resolution: accept the proposed UA rules in the OP

I've added the proposed async resolution label, and I'd like to propose the resolution in the comment above.

If we're doing it an opt-in I still don't see the point of doing the trailing-sibling thing? Authors can very easily keep it in flow with margin-inline-end or so...

And a trailing pseudo is super confusing if you're using anything but inline/block layout

11. If we're doing it an opt-in I still don't see the point of doing the trailing-sibling thing? Authors can very easily keep it in flow with margin-inline-end or so...

How? I.e. how would you make a <button> where the ::interest-button is outside the button, and still in-flow? (And not overlapping other content?) Also, we already resolved this so I'd like to avoid re-opening that question if we can.

12. And a trailing pseudo is super confusing if you're using anything but inline/block layout

It's a bit different, but I would argue it's not super confusing. Or at least, after playing with it, and understanding roughly "it's a sibling", it's pretty clear how to deal with it. It just works in the common case, and for the other cases (e.g. flex) you just add <div>.

Something like this:

button {
  /* Your proposal for the UA sheet */
  &::after {
    display: inline-block;
    color: inherit;
    background-color: transparent;
    box-sizing: border-box;
    min-inline-size: 24px;
    min-block-size: max(24px, 1lh);
    vertical-align: middle;
    align-content: center;
    text-align: center;
    user-select: none;
    cursor: help;
  }

  /* What the author would write */
  margin-inline-end: 24px;
  &::after {
    content: '\24D8' / '';
    margin-inline-start: -24px;
    position: relative;
    left: 30px; /* 24 + padding end + border */
  }
}

Well, yeah something like that can work, and we discussed that on the other issue. See this discussion, and in particular the comments from @fantasai. The issue with it is that the actual code would need to be this, right?

 /* What the author would write */
  --width-of-the-thing: 43.72px; /* width of "HELLO" */
  --borderwidth: 5px;
  --padding: 5px;
  border-width: var(--borderwidth);
  padding: var(--padding);
  margin-inline-end: var(--width-of-the-thing);
  &::after {
    content: 'HELLO' / '';
    margin-inline-start: calc(-var(--width-of-the-thing));
    position: relative;
    left: calc(var(--width-of-the-thing) + var(--borderwidth) + var(--padding)); /* pseudo width + padding end + border */
  }

Your version hard-coded the width of "ⓘ" as 24px, and hard-coded the border and padding. Accounting for the width of the content is a pain for developers, right? The sibling approach means the author CSS can just be this:

 /* What the author would write */
  &::interest-button {
    content: 'HELLO' / '';
  }

and the result looks the same as the huge CSS chunk above.

Navigation Menu

Repository navigation

UA stylesheet rules for `::interest-button` #13982

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

UA stylesheet rules for ::interest-button #13982

Description

Activity

mfreed7 commented on Oct 1, 2026

sb3nder commented on Oct 8, 2026

mfreed7 commented on Oct 15, 2026

emilio commented on Oct 15, 2026

emilio commented on Oct 15, 2026

mfreed7 commented on Oct 15, 2026

emilio commented on Oct 16, 2026

mfreed7 commented on Oct 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

UA stylesheet rules for `::interest-button` #13982