Custom CSS overrides per page

[rodarima]

The dillo-plus fork has implemented a reader mode allows pages to optionally load custom CSS styles without any remote or embeded CSS rules.

Currently we only allow loading a single style.css file that is always loaded.

I've been playing a bit with the current implementation of user CSS in ~/.dillo/style.css and I observe that a single CSS file (or two with the reader mode) won't be able to solve some of the problems I see.

For example, in Hacker News, as they use tables to layout the content, and the tables have an implicit rule that restores the font size, we need special rules to make the text more legible for tables. However, those rules don't work well with tables in Wikipedia pages.

Another example is the long list of navigation links that some pages put in the top, that can be hidden or make smaller by clever CSS rules, but those need to be made per page to prevent them from hiding content where they shouldn't.

Ideally, we should be able to define per-page CSS rule. I was thinking if we could invent a @media syntax that could match a regex against the current page (and it only works in local override CSS files):

@media (host: "*.reddit.com|*.wikipedia.com") {
  /* Rules for reddit and wikipedia */
}

@import url("./reddit.css") only (host: "*.reddit.com");

Ideally, those rules should live in a repository on their own, so they can be maintaned by a community.

[rodarima]

Here is an example from Greasemonkey extension to make Wikipedia automatically switch to dark mode:

https://openuserjs.org/scripts/navchandar/Wikipedia_Auto_Dark_Mode/source

We probably can reuse most of those.

[rodarima]

Another example by the Stylish extension that uses @-moz-document:

https://github.com/UserStyles/hacker-news-solarized-dark/blob/master/user-style.css

@-moz-document domain("news.ycombinator.com") {
  /* ... */
}

See also: https://developer.mozilla.org/en-US/docs/Web/CSS/@document