Adding custom CSS to pages using Firefox

Although there are plenty of third party add-ons available to change the CSS of a specific web page or pages so that they fit your needs more I only needed to change one (so far) and installing an add-on seemed a bit over the top when there is a userContent.css file I could use instead.

The userContent.css file is stored in your profile folder. Where this is depends on your OS so it's best to follow the instructions provided by Mozilla to find it.

I had to create the chrome folder and userContent.css files in order to work on them. The only issue with this method of editing the css is that you have to restart Firefox in order to make the changes take effect.

@-moz-document domain("en.wikipedia.org") {
    .mw-body-content {
        line-height: 2 !important;
        max-width: 50rem;
    }

    .mw-body-content p {
        padding-bottom: 0.5rem;
    }
}

The most important thing here is the outer container: @-moz-document domain("en.wikipedia.org") this tells the file which domain to apply the new css to. There are other functions available within the @document rule which can be found on MDN web docs: @document. At the moment this is only used in its prefixed form (@-moz-document) in this kind of internal stylesheet. Regardless this is really useful thing to be able to do.

The rest of the CSS is just my amendments to the standard Wikipedia CSS. Making the line-height much larger, shortening the line length and adding a bit of extra space between paragraphs. This bit just makes it easier for me to read long pages when I'm tired.

I'm glad I didn't need to do anything very complicated to the CSS to make the page more readable, I can't remember the last time I wrote vanilla CSS.