Firefox CSSHacks项目：优化标签页仅显示图标时的拖动效果

在Firefox浏览器自定义美化中，使用CSS实现仅显示标签页图标是一个常见的需求。本文将介绍如何通过修改CSS代码，优化标签页在拖动时的显示效果，使其保持简洁的图标状态。

基础实现原理

要实现标签页仅显示图标的基本效果，主要依靠隐藏标签文本和关闭按钮的CSS规则：

.tabbrowser-tab .tab-label,
.tabbrowser-tab .tab-close-button {
  display: none !important;
}

同时，为了在鼠标悬停或选中时显示完整标签页信息，需要添加以下规则：

.tabbrowser-tab[selected="true"] .tab-label,
.tabbrowser-tab[selected="true"] .tab-close-button,
#TabsToolbar .tabbrowser-tab:hover:not([selected]) .tab-label,
#TabsToolbar .tabbrowser-tab:hover:not([selected]) .tab-close-button {
  display: block !important;
}

拖动标签页时的显示问题

在基础实现中，当用户拖动标签页时，默认会显示完整的标签页信息（包括图标、标题和关闭按钮），这与仅显示图标的初衷相违背。这主要是因为拖动状态下标签页会被视为"选中"状态，触发了显示完整信息的CSS规则。

解决方案

通过添加针对拖动状态的特殊CSS规则，可以确保在拖动标签页时仍然只显示图标：

#tabbrowser-tabs[movingtab] .tabbrowser-tab {
  min-width: calc(16px + 2 * 10px + 4px) !important;
}

这条规则利用了Firefox在拖动标签页时会为标签栏添加movingtab属性的特性，强制将拖动中的标签页宽度设置为仅容纳图标的大小。

进阶美化技巧

除了基本的显示/隐藏逻辑，还可以为标签页添加一些视觉效果：

1. 非活动标签页淡化处理：

.tabbrowser-tab {
  filter: grayscale(70%);
  transition: filter 0.2s ease-in;
  opacity: 0.5;
}

2. 特殊状态标签页高亮：

.tabbrowser-tab[selected="true"], 
.tabbrowser-tab[pinned], 
.tabbrowser-tab[soundplaying] {
  opacity: 1;
}

3. 响应式宽度调整：

.tabbrowser-tab:not([selected="true"])[fadein] {
  min-width: calc(16px + 2 * 10px + 4px) !important;
}

兼容性考虑

为了确保在不同界面密度设置下都能正常显示，建议添加针对紧凑模式的特殊规则：

:root[uidensity="compact"] .tabbrowser-tab:not([selected="true"])[fadein] {
  min-width: calc(16px + 2 * var(--inline-tab-padding,0px) + 4px) !important;
}

通过这些CSS规则的组合，可以实现在保持简洁图标视图的同时，提供完整的交互体验，包括标签页拖动操作时的视觉一致性。这种实现方式既美观又实用，是Firefox界面自定义的优秀实践。