DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

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

#firefox #css #productivity #linux

Firefox's CSS can be customized using userChrome.css — a CSS file that modifies the browser's own UI. This is advanced customization that most users don't need, but it enables some genuinely useful changes.

What userChrome.css Is

Firefox's UI is built with web technologies (HTML, CSS, JavaScript). The userChrome.css file lets you add CSS rules that target Firefox's own interface elements — the toolbar, tabs, menus, sidebars, etc.

Note: Mozilla has been gradually moving toward more structured customization. Some things that worked in older Firefox versions no longer work. The about:config flag toolkit.legacyUserProfileCustomizations.stylesheets must be enabled.

Enabling userChrome.css

  1. Navigate to about:support
  2. Find "Profile Directory" → Click "Open Directory"
  3. Create a chrome folder if it doesn't exist
  4. Create chrome/userChrome.css
  5. Enable: about:config → toolkit.legacyUserProfileCustomizations.stylesheets = true
  6. Restart Firefox

Common Useful Customizations

Hide the Horizontal Tab Bar (for Vertical Tabs)

If you use Tree Style Tab or Firefox's native vertical tabs, you can hide the default horizontal tab bar:

/* userChrome.css */
#TabsToolbar {
  display: none !important;
}
Enter fullscreen mode Exit fullscreen mode

Note: This hides the tab bar completely. Only do this if you have the vertical sidebar configured as your primary tab navigation.

Auto-hide the Sidebar 

/* Auto-hide the sidebar when not hovered */
#sidebar-box {
  min-width: 0px !important;
  transition: min-width 0.2s ease !important;
}

#sidebar-box:hover {
  min-width: 250px !important;
}
Enter fullscreen mode Exit fullscreen mode

This collapses the sidebar to a narrow strip and expands on hover.

Compact Mode (Reduce Toolbar Height)

Firefox removed the "Compact" density option from standard settings. You can restore it:

:root {
  --tab-min-height: 29px !important;
}

#TabsToolbar .tabbrowser-tab,
#nav-bar {
  --toolbar-start-end-padding: 2px !important;
}
Enter fullscreen mode Exit fullscreen mode

Or a more aggressive compact:

#nav-bar {
  --toolbarbutton-inner-padding: 4px !important;
}
Enter fullscreen mode Exit fullscreen mode

Remove Extra Whitespace 

/* Remove rounded corners from tabs (personal preference) */
.tabbrowser-tab[visuallyselected="true"] .tab-background {
  border-radius: 0 !important;
}
Enter fullscreen mode Exit fullscreen mode

Move the URL Bar

Swap the URL bar and toolbar:

#navigator-toolbox {
  flex-direction: column-reverse !important;
}
Enter fullscreen mode Exit fullscreen mode

Color-Code Containers

If you use Multi-Account Containers, color the toolbar by container:

/* Personal container — blue tint */
:root:has(#main-window[defaulttabcontainer="personal"]) #nav-bar {
  background: #e8f0fe !important;
}
Enter fullscreen mode Exit fullscreen mode

This isn't reliable across all configurations but shows the concept.

Finding Element Selectors

To find what CSS selectors target Firefox UI elements:

  1. Open Browser Toolbox: about:config → devtools.chrome.enabled = true and devtools.debugger.remote-enabled = true
  2. Restart Firefox
  3. Tools → Browser Tools → Browser Toolbox (or Ctrl+Alt+Shift+I)
  4. Use the Inspector in the Browser Toolbox to inspect Firefox's own UI elements

The Browser Toolbox is a DevTools instance that targets the Firefox UI itself — the full browser chrome is inspectable.

userContent.css

Similar to userChrome.css but for web content:

chrome/userContent.css applies CSS to all web pages you visit.

/* Make all websites dark (crude approach) */
@-moz-document url-prefix() {
  html, body {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
}

/* Remove scrollbars on all pages */
@-moz-document url-prefix() {
  ::-webkit-scrollbar {
    display: none !important;
  }
  * {
    scrollbar-width: none !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

Or target specific sites:

@-moz-document domain("github.com") {
  .blob-code {
    font-size: 13px !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

Cautions

Breakage risk: CSS changes can break with any Firefox update. Mozilla changes internal UI selectors without warning. Test after each Firefox update.

Performance: Complex CSS rules on the browser UI can cause minor rendering overhead.

Maintenance: You're maintaining these styles yourself. Community resources (r/FirefoxCSS, the Firefox CSS subreddit) share and maintain popular customizations.

Inspector vs Reality: The Browser Toolbox shows current structure but Firefox updates can change it without notice.

The FirefoxCSS Community

r/FirefoxCSS (Reddit) and the Firefox CSS Discord maintain collections of tested userChrome.css snippets for popular customizations. This is the practical source for working CSS that's been tested on current Firefox versions.

When to Use userChrome.css vs Extensions

Use userChrome.css for:

  • UI appearance changes that are purely cosmetic
  • Layout adjustments (hide elements, move elements)
  • Firefox-specific customizations that don't need JavaScript

Use extensions for:

  • Behavior changes (not just appearance)
  • Cross-session persistence of dynamic state
  • Changes that need to interact with web content
  • Things the extension API handles better

Most users should use Firefox's built-in customization (Customize Toolbar, themes) before resorting to userChrome.css — the built-in tools are more stable.

Top comments (0)