Firefox-CSSHacks项目：基于titlepreface动态隐藏标签栏的CSS实现方案

在Firefox浏览器定制领域，通过CSS实现界面元素的动态显示与隐藏是一个常见需求。本文将详细介绍如何利用Firefox-CSSHacks项目中的样式表，结合Sidebery扩展的titlepreface特性，实现智能化的标签栏隐藏功能。

技术背景

Firefox浏览器允许用户通过userChrome.css文件深度定制界面样式。当用户使用Sidebery这类垂直标签页扩展时，原生水平标签栏往往显得冗余。Firefox-CSSHacks项目提供了多种隐藏标签栏的CSS方案，但原生方案无法根据扩展状态动态切换。

核心实现原理

通过检测Sidebery扩展设置的titlepreface属性值，我们可以创建条件式CSS规则。当titlepreface包含特定前缀(如"XXX")时，表示Sidebery处于活动状态，此时应隐藏原生标签栏；反之则保持显示。

完整CSS解决方案

@media (-moz-bool-pref: "sidebar.verticalTabs"){
  #main-window[titlepreface*="XXX"] #sidebar-main{
    visibility: collapse;
  }
}

@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  #nav-bar > .titlebar-buttonbox-container{
    order: -1 !important;
    > .titlebar-buttonbox{
      flex-direction: row-reverse;
    }
  }
}

@media not (-moz-bool-pref: "sidebar.verticalTabs"){
  #main-window[titlepreface*="XXX"] #TabsToolbar{
    visibility: collapse;
  }
  
  :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
    display: flex !important;
  }
  
  :root[tabsintitlebar][titlepreface*="XXX"] #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
    > .titlebar-buttonbox-container{
      display: flex !important;
    }
    :root[sizemode="normal"] & {
      > .titlebar-spacer{
        display: flex !important;
      }
    }
    :root[sizemode="maximized"] & {
      > .titlebar-spacer[type="post-tabs"]{
        display: flex !important;
      }
      @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
        (-moz-gtk-csd-reversed-placement),
        (-moz-platform: macos){
        > .titlebar-spacer[type="post-tabs"]{
          display: none !important;
        }
        > .titlebar-spacer[type="pre-tabs"]{
          display: flex !important;
        }
      }
    }
  }
}

关键代码解析

1. 条件检测部分：使用[titlepreface*="XXX"]属性选择器检测Sidebery活动状态
2. 标签栏隐藏：通过visibility: collapse隐藏TabsToolbar元素
3. 窗口控制按钮处理：确保在全屏/最大化等不同窗口状态下，窗口控制按钮保持正确布局
4. 响应式设计：使用@media查询适配不同系统环境和用户偏好设置

实际应用建议

1. 将上述代码保存为userChrome.css文件
2. 确保在Firefox的about:config中启用了toolkit.legacyUserProfileCustomizations.stylesheets
3. 根据实际使用的Sidebery前缀修改"XXX"为你的实际设置值
4. 对于垂直标签页用户，建议同时启用sidebar.verticalTabs偏好设置

这种动态隐藏方案不仅提升了界面整洁度，还能根据扩展使用状态智能切换，避免了手动切换的麻烦，是Firefox深度用户的理想选择。