{
  "id": 14936586,
  "title": "userChrome.css: Customizing Firefox's UI with CSS (Compact Mode, Hide Tabs, and More)",
  "url": "https://urgent.news/2026/10/16/userchrome-css-customizing-firefoxs-ui-with-css-compact-mode-hide",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-16T11:00:05.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/weatherclockdash/userchromecss-customizing-firefoxs-ui-with-css-compact-mode-hide-tabs-and-more-52f4"
  },
  "original_language": "en",
  "account": "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.\n\nThe 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.\n\nTo 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.\n\nSome common useful customizations include:\n- Hiding the horizontal tab bar for vertical tabs\n- Auto-hiding the sidebar when not hovered\n- Compact mode to reduce toolbar height\n- Removing extra whitespace around tabs\n- Moving the URL bar to the toolbar\n- Color-coding containers for Multi-Account Containers users\n\nTo 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.\n\nKeep 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.",
  "summary": "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…",
  "key_points": [
    "userChrome.css enables Firefox UI customization via CSS",
    "Enable about:config flag to use userChrome.css",
    "Common customizations: hide tabs, compact mode, URL bar positioning"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}