userChrome.css: Customizing Firefox's UI with CSS (Compact Mode, Hide Tabs, and More)

Firefox allows users to customize its user interface (UI) using a CSS file called userChrome.css. This advanced customization method is typically not needed by most users but enables genuinely useful changes to Firefox's UI.

The userChrome.css file targets Firefox's interface elements such as the toolbar, tabs, menus, sidebars, etc., by adding CSS rules. However, be aware that Mozilla has been moving towards more structured customization, and some older methods may not work anymore.

To enable userChrome.css, first enable the about:config flag toolkit.legacyUserProfileCustomizations.stylesheets. Then, create a chrome folder in your Firefox profile directory and create a chrome/userChrome.css file. Restart Firefox for the changes to take effect.

Some common useful customizations include:

- Hiding the horizontal tab bar for vertical tabs

- Auto-hiding the sidebar when not hovered

- Compact mode to reduce toolbar height

- Removing extra whitespace around tabs

- Moving the URL bar to the toolbar

- Color-coding containers for Multi-Account Containers users

To find the CSS selectors targeting Firefox's UI elements, open the Browser Toolbox (devtools.chrome.enabled and devtools.debugger.remote-enabled enabled in about:config) and inspect Firefox's UI elements using the Inspector.

Keep in mind that CSS changes can break with Firefox updates, and Mozilla may change internal UI selectors without warning. It's essential to test after each update. While userChrome.css is suitable for cosmetic UI changes, use extensions for behavior changes, cross-session persistence, or interactions with web content.