[Fix e10s Issue] userChrome.css and userContent.css Codes No Longer Working in Mozilla Firefox

If you are a Mozilla Firefox web browser user, you might be aware of following 2 files: userChrome.css and userContent.css. These 2 files are used to customize Firefox user interface and functionality. You can change Firefox look-n-feel and can add/remove functionality in the browser by adding small piece of CSS code in these files.

You can check out following articles to learn more about these files:

All About Mozilla Firefox Profile Folder and Configuration Files

15 Tips-n-Tricks to Tweak and Customize Mozilla Firefox Web Browser

Many people use these two configuration files to customize Firefox UI and functionality according to their requirements.

But if suddenly these files stop working in your Firefox web browser, then this tutorial will help you. Sometimes the codes present in these two CSS files might not work as expected.

A few Firefox users have asked me about this issue and I have also faced this problem a few months back. Actually I was using the Nightly build of Firefox and one day after upgrading to the new Nightly version, I found that my personalized code put in these 2 CSS files was no longer working.

Actually I use following method to differentiate between different types of hyperlinks such as links that open in the same window or tab, links that open in a new window or tab and JavaScript links:

[Firefox Tip] Show Different Cursors for JavaScript Links and Other Hyperlinks

Its my favorite trick of userContent.css file and I always use it in Firefox web browser. I can’t remember exactly but I think it was version 35.0 of Firefox’s Nightly build when the codes present in userChrome.css and userContent.css files stopped working. Nothing was changing in the browser by these 2 files. Both the CSS files became absolutely useless.

After some research and troubleshooting, I found the culprit. It was a side effect of a newly introduced feature in Firefox which was “e10s” also known as “Electrolysis“, “Multi-Process” and “Out-of-Process“. This feature works like a sandbox and has been developed to provide better security and performance in Firefox.

Currently this feature is under development and testing phase and that’s why it contains this bug. If this e10s aka multi-process feature is enabled in Firefox, the userChrome.css and userContent.css files become useless. Any code present in these files will no longer work and will have no effect in Firefox web browser. This feature just ignores these 2 files.

So if you are using Mozilla Firefox web browser and the codes present in these 2 CSS files is not working in your browser, it might be happening due to this new e10s aka multi-process feature.

You can disable this new feature and make the 2 CSS files userChrome.css and userContent.css working again with the help of following simple steps:

1. Open Firefox Preferences by clicking on Hamburger-style (3 lines) Menu button -> Options.

2. Now in General tab, uncheck or deselect “Enable multi-process” option as shown in following screenshot:

That’s it. Restart your browser and now the code present in both CSS files will start working again without any problem.

I hope Mozilla will fix this bug or issue as soon as possible and the future Stable version of Firefox will not contain this problem when multi-process aka e10s feature is implemented in it.