Custom CSS styling no longer working after Firefox update

[5hwb]

First and foremost, thanks for this nifty add-on - it's a very handy tool for viewing Markdown notes in the browser. The ability to set custom CSS stylings is a very useful feature as I work with multiple writing systems on a regular basis (e.g. Chinese characters, Korean, Khmer) and the CSS styling allows me to easily set preferred fonts for a particular writing system.

In earlier versions of Firefox, the custom CSS functionality never had any problems. However, after the Firefox 92.0 update, the custom CSS styling has stopped working almost entirely. Custom fonts and styling (e.g. bold headings) are completely overridden for some reason, as though there was no custom styling to begin with. The issue affects both Windows 10 and Linux Mint 20 alike.

I had tried to identify the problem myself, and according to Firefox developer tools, it seems that there's a default CSS styling which is overriding my custom CSS styling. I'm not sure where this default styling is coming from.

Here are some links to the screenshots of the problem and the CSS and Markdown file used. Hope this helps to fix the problem.

System details

• Firefox 92.0
• Markdown Viewer 1.7.0

[Cimbali]

Is this the stylesheet 2 you’re having to remove? It’s one of the 2 styles shipped with the add-on:

• default
• github

Usually you would use that style then override parts with custom styling.

For example I have the following to have a centered document:

.markdownRoot {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
  border: 1px solid;
}

If you want your CSS to override the existing CSS it has to be more specific, e.g. when fonts are set on body you can either set them on .markdownRoot which applies to the document but not the menu, or on body with !important.

For example:

.markdownRoot { /* more specific selector */
  font-family: 'Open Khmer School', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold !important; /* use important to override */
}

I’m not sure what changed with the update, but it could be the way in which tie breaks on the CSS are handled maybe?

Another thing is to look at whether it’s maybe easier to override starting from the github style rather than the default. Also what we could do if overriding is too much trouble is to have an option with no styling by default, but I think the use for that would be pretty limited.

[5hwb]

Thank you for the response - I eventually fixed the issue by changing the body selector into .markdownRoot and appending the !important tag at the end of all the other attributes. This seems more of an issue with the custom CSS I've been using (updated version here), so I'm gonna close the issue.