Use :has for better image document selector

[Kyuuhachi]

trafficstars

Instead of matching on a regex with specific file extensions, match anything that loads resource://content-accessible/TopLevelImageDocument.css:

:root:has(head > link[rel=stylesheet][href="resource://content-accessible/TopLevelImageDocument.css"]) img.transparent {
  background: none;
}

[Kyuuhachi]

This does require enabling layout.css.has-selector.enabled in about:config though.

[MrOtherGuy]

I won't do that before is :has() is enabled by default.

But I'm wondering what :has would actually improve here. With @-moz-document we can restrict the whole block to only apply that matching documents. But with :has() that rule would still apply to all websites even though they can't link to href="resource://content-accessible/TopLevelImageDocument.css" and the :root:has(...) would need to be duplicated for each selector that's used. Of course, regexp isn't ideal either, but it seems to me that neither one is objectively better than the other - if we ignore :has() not being supported yet.

[Kyuuhachi]

I don't know how it fares regarding performance and such, but I believe :has has significantly lower false positive and false negative rate — the only false positives would be sites that are intentionally linking against a stylesheet they have no business with, and if they are explicitly asking to display like an image, I don't think playing along is a bad thing anyway. False negatives are, to my knowledge, zero.

But yeah, having to repeat it for every selector is indeed a pain.

[MrOtherGuy]

Valid points. Still, :has() isn't supported yet so it's a no-go at this time. In the mean time, do you have example sites where false positives do occur, like where something is styled with this style even if it shouldn't? I'm fairly confident there's few things that can be done to improve the current version a bit.

[Kyuuhachi]

It does for example match on Giphy, though none of the styles happens to affect anything.

[MrOtherGuy]

I found out there's actually another way to do matching for this purpose with @-moz-document media-document(image)

So I made the style use that in 2c6bca9. Tell me you if you see experience bad behavior with it.