Firefox CSSHacks项目：实现全屏模式下自动隐藏侧边栏

在Firefox浏览器中，通过自定义CSS可以实现许多界面优化功能。本文将详细介绍如何利用Firefox CSSHacks项目中的autohide_sidebar.css文件，实现仅在浏览器全屏模式下自动隐藏侧边栏的效果。

实现原理

该功能的核心原理是通过CSS选择器:root[sizemode="fullscreen"]来检测浏览器是否处于全屏状态，并在此基础上应用侧边栏自动隐藏的样式规则。当浏览器进入全屏模式时，侧边栏会自动收缩为窄条，仅当鼠标悬停时才会展开显示完整内容。

关键CSS修改点

要实现仅在全屏模式下激活自动隐藏功能，需要对原始autohide_sidebar.css文件进行以下关键修改：

1. 为所有选择器添加:root[sizemode="fullscreen"]前缀
2. 保留原有的侧边栏宽度、过渡效果等变量定义
3. 确保全屏状态检测选择器应用于所有相关元素

具体实现代码

以下是经过修改后的核心CSS代码片段：

:root[sizemode="fullscreen"] #sidebar-box{
  --uc-sidebar-width: 40px;
  --uc-sidebar-hover-width: 210px;
  --uc-autohide-sidebar-delay: 600ms;
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-transition-type: linear;
  --browser-area-z-index-sidebar: 3;
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index: var(--browser-area-z-index-sidebar,3);
}

:root[sizemode="fullscreen"] #sidebar-header,
:root[sizemode="fullscreen"] #sidebar{
  transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}

:root[sizemode="fullscreen"] #sidebar-box:hover > #sidebar-header,
:root[sizemode="fullscreen"] #sidebar-box:hover > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

样式细节说明

1. 宽度控制：通过--uc-sidebar-width和--uc-sidebar-hover-width变量分别定义侧边栏的默认宽度和悬停时的展开宽度。

2. 过渡效果：使用CSS过渡属性实现平滑的展开/收起动画，包括延迟时间(--uc-autohide-sidebar-delay)和过渡持续时间(--uc-autohide-transition-duration)的可配置性。

3. 视觉优化：添加了侧边栏边框和背景色设置，确保在全屏模式下与浏览器整体风格协调一致。

4. 状态面板处理：特别处理了状态面板的位置，防止侧边栏展开时将其遮挡。

实际应用建议

1. 对于只想隐藏特定扩展(如Sideberry)侧边栏的用户，可以将选择器中的#sidebar-box替换为特定扩展的sidebarcommand值。

2. 各变量值可根据个人喜好调整，例如缩短延迟时间或修改侧边栏宽度。

3. 此修改保持了原始CSS文件的所有功能，只是将其限制在全屏模式下生效，不影响正常窗口模式下的侧边栏显示。

通过这种实现方式，用户可以在享受全屏浏览体验的同时，保留便捷的侧边栏访问功能，兼顾了界面简洁性和操作便利性。