Re: [csswg-drafts] Add an `::interest-button` pseudo element to interest invokers (#12437)

> As for adding this:

Actually @lilles gave me a much better idea here, to use `if(media())` rather than an explicit `@media`. That makes it a ton easier for developers to understand/override the media query. And @dbaron gave me a pointer (ha) that the [hover](https://drafts.csswg.org/mediaqueries-5/#hover) media query would actually be the most appropriate one to use here. So I landed on this:

```
display: if(media(hover): none; else: inline-block);
```

That's very straightforward to understand and doesn't beg the developer question "how do I override a UA stylesheet media query". With that and the above change to margin, the new complete proposal is:

```css
[interestfor]::interest-button {
  content: '\24D8' / '';
  display: if(media(hover): none; else: inline-block);
  color: inherit;
  background-color: transparent;
  box-sizing: border-box;
  min-inline-size: 24px;
  min-block-size: max(24px, 1lh);
  margin-inline-start: 0.25em;
  margin-block: -1lh;
  text-align: center;
  user-select: none;
  cursor: help;
}
[interestfor]::interest-button:hover {
  background-color: color-mix(in lab, currentColor 10%, transparent);
}
[interestfor]::interest-button:active {
  background-color: color-mix(in lab, currentColor 20%, transparent);
}
```

And for completeness, here are the new screenshots with the margin-block rule:

<img width="331" height="419" alt="Image" src="https://github.com/user-attachments/assets/c997fc83-9b16-4cb6-b258-6b162313db9c" />

-- 
GitHub Notification of comment by mfreed7
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12437#issuecomment-4462208949 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 15 May 2026 18:22:09 UTC