Status of `@document` rule & proposal

CSS
1

What is the status of the @document rule? The MDN page states that it has been postponed/deferred to Level 4 of CSS Spec, but now I can not find the spec anywhere except in the old css3 working draft:

Is it dead now? Why does Mozilla still support it then?

If it isn’t dead, I would like to propose adding an additional matching function (along side of url, url-prefix, domain and regexp). This function would match the document contents using the named selector, something like this:

@document matches("head[prefix~='medium-com:']") { /* */ }

In this case, the style would be applied to all Medium styled blogs no matter what domain it may be on.

2 Likes
2 
@document matches("head[prefix='medium-com']") { /* */ }

It’s unclear why the @document rule would be needed here in the first place and why not just use an attribute selector like this instead:

head[prefix ~= "medium-com:"] { /* */ }
3

Because the userstyle will be applied according to the @document match function, I would currently need to include every medium styled blog domain, and keep the selector updated for any newly added blogs if I want a style applied. For example, this “Medium Dark Grey” userstyle has this selector:

@-moz-document domain("medium.com"), domain("uxdesign.cc"),
 domain("prototypr.io"), domain("framer.com"), domain("uxplanet.org"),
 domain("medium.freecodecamp.com"), domain("medium.muz.li") { /* ... */ }

And misses many of the other Medium styled blogs that I have encountered. I could manually add a new domain rule for each site I encounter, but that is a pain.

Alternatively, I could set a @document regexp to match all urls, then I would have to prefix every entry in the style with the specific selector:

head[prefix ~= "medium-com:"] h1 { /* ... */ },
head[prefix ~= "medium-com:"] h2 { /* ... */ },
head[prefix ~= "medium-com:"] h3 { /* ... */ },
head[prefix ~= "medium-com:"] h4 { /* ... */ }, ... etc

And to me that’s even more difficult to maintain.

With a @document matches(".selector"), the userstyle could be much more easily maintained for all medium specific styled sites and have less maintenance of the internal style.

4

Looks like you want to use @document as a surrogate for nesting CSS rules.

Given that nesting is not implemented yet, for now you could use the :any() CSS function (currently available with -moz- and -webkit- prefixes) to decrease repetition:

head[prefix ~= "medium-com:"] :any(h1, h2, h3, h4) { /* ... */ }
5

That was a simple example… the userstyle I shared has over 500 lines with over 300 selectors.