@-moz-document media-document() support

[jathek]

Bug Report

Bug Description

I'm trying to use a @-moz-document media-document(image) rule in Stylus but it refuses to save the style. The style works fine if added via Style Editor in Developer Tools.

Screenshots

CSS Code

@-moz-document media-document(image) {
    BODY > IMG:first-child:only-of-type:not(.shrinkToFit),
    BODY[style="margin: 0px;"] > STYLE + IMG:only-of-type {
        max-width: calc(100% - 8px * 2);
    }
}

System Information

• OS: Windows 10 Pro 22H2 19045.2486
• Browser: Firefox Dev Edition 110.0b9 (64-bit)
• Stylus Version: 1.5.26

Additional Context

page from developer.mozilla.org listing media-document as an allowed function for @document

[tophf]

Looks like an internal thing in Firefox. It's not supported in userstyles and it's not a part of the initial specification, which is what we and other extensions have implemented.

While it may be argued that the feature could be useful, but I'm not sure we should implement it because there's no native implementation even in Firefox (it only handles @-moz-document in its internal userXXX.css files), so we would have to rely on webRequest header sniffing (it's doable though).

What we can certainly do is to allow saving styles with unknown document functions, and only show a linter warning.

[eight04]

I used to want a @contentType directive that can apply the style according to content type: https://github.com/openstyles/stylus/pull/134#issuecomment-321324391 Which would allow me to convert this script into usercss: https://github.com/eight04/better-standalone-image

[jathek]

What we can certainly do is to allow saving styles with unknown document functions, and only show a linter warning.

If these styles are allowed to be saved, then the style still wouldn't work, correct? That wouldn't be ideal; I would have to use media-document() in a userChrome.css file, which is what Stylus and userstyles are supposed to substitute.

I'm trying to setup a userstyle for standalone images and videos, similar to what @eight04 linked. I've used it for a couple years but I've had to use regex to analyze the url, which is a brute force way to do it. I would rather limit it with media-document() which seems to exactly fit the use case. eight's request for a @contentType directive seems to be another way to do the same thing.

[tophf]

Stylus cannot substitute userChrome.css, and we don't even try. At least I never did :-) Seems like it's possible to use the new :has selector:

html:has(head link[href="resource://content-accessible/ImageDocument.css"]) {
  background: red !important;
}

Note that Firefox requires changing layout.css.has-selector.enabled to true in about:config.

[jathek]

Stylus cannot substitute userChrome.css, and we don't even try. At least I never did :-)

Sorry, I meant userContent.css. But thanks, has selector probably works as a substitute for what I was trying to do.

I guess this issue can be closed if the decision is that media-document() will not be supported.

[tophf]

I'm supportive of media-document in general because it's much more performant than having a global userstyle on every site using a complicated :has selector. I'm just not sure it'll be used by more than a couple of authors due to the fact such css may break some other extensions which similarly to ours use a parser to validate the code. Maybe the original idea by @eight04 would be a better solution even though it's not applicable per section, AFAICT.

[jathek]

That's fair. A metadata directive would work for me as well. I might need to break up my userstyle into two separate styles to split the image vs video sections, but that's still better than running a :has on all sites.