Custom CSS Distributed With Dictionaries

[MarvNC]

LGTM. (Though why does this work like this at all...? Wouldn't it make more sense for a dictionary to distribute some CSS (maybe with basic filtering to avoid remote resources) and then just refer to class names in the structured content...?)

Originally posted by @djahandarie in #527 (review)

I always thought the same, it seemed quite limiting. Maybe the reason is compatibility with light and dark themes and ensuring a consistent experience by limiting what can be styled:

Correct, this is the rationale for not originally adding them. That and they can't be themed easily by custom CSS, which leads to an inconsistent UI/UX. There is probably a better way to support this, such as by having the extension expose custom CSS vars for dictionaries to use for colors, but ultimately that would still just involve using custom string values for color/background-color.

Originally posted by @toasted-nutbread in #450 (comment)

[toasted-nutbread]

CSS scoping is an issue, if dictionaries are basically just injecting a <style> node with rules. If the CSS classes are defined in a way that is more similar to structured content, but having common type definitions for common classes, the issue is a bit different, in that there suddenly needs to be a way to store and retrieve that in the database.

Again the reason why it is currently set up that way is because when I designed it, I did not foresee it growing into such a broadly used feature as it is today.

[djahandarie]

I think we have three options for scoping:

• Do some preprocessing or verification on the CSS to modify the selectors with some relevant scope, and/or verify that the appropriate scope is already in the selector (i.e., have a parent selector that matches on the dictionary name / revision id, etc etc.)
• Use a shadow DOM (not sure if it's possible)
• Use @scope, but no Firefox support yet

[toasted-nutbread]

Shadow dom is possible but probably very ugly. Problems with Anki export though.