☰

使用 -moz-box-ordinal-group 排列 Firefox 的 UI 栏

tag-icon • tag-icon firefox css user-interface toolbar
使用 -moz-box-ordinal-group 排列 Firefox 的 UI 栏

我今天在 Windows 7 上将我的 FF 更新到 65.0（64 位），现在我的以下设置userChrome.css不再被考虑：

/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
    -moz-box-ordinal-group: 1 !important;
    border-top-width: 0 !important;
    }
#PersonalToolbar { /* bookmarks toolbar */
    -moz-box-ordinal-group: 2 !important;
    border-top-width: 0 !important;
    }
#TabsToolbar { /* tab bar */
    -moz-box-ordinal-group: 3 !important;
    border-top-width: 0 !important;
    }

即而不是：

  • 菜单栏
  • 主工具栏
  • 书签工具栏
  • 标签栏

它是：

  • 菜单栏
  • 标签栏 ← 这并不符合预期
  • 主工具栏
  • 书签工具栏

如何将设置更改为预期（和之前）的行为？

答案1

所有-moz-*CSS 添加项都不是标准的，属于 CSS 刚开始且缺乏很多选项的时代。在等待标准发展的过程中，Mozilla 添加了这些 CSS 项作为权宜之计。

Mozilla -moz-box-ordinal-group 文档 包含这个：

警告：这是原始 CSS 灵活框布局模块草案的一个属性，在较新的草案中已被替换。

看 弹性盒子 有关应使用什么来代替该属性的更多信息。

一般 Mozilla CSS 扩展 还有这个：

Mozilla 应用程序（例如 Firefox）支持许多特殊的 Mozilla CSS 扩展，包括属性、值、伪元素和伪类、@ 规则和媒体查询。这些扩展以 -moz- 为前缀。

仅限 Mozilla 的属性和伪类（避免在网站上使用）

笔记：这些属性和伪类仅适用于 Mozilla 应用程序（例如 Firefox），并且不符合标准。其中一些仅适用于 XUL 元素。

总体来说，不要使用非标准-moz的 CSS 扩展。这些扩展将逐渐被淘汰，取而代之的是当前标准。

答案2

使用页面上的DOM 检查器（Ctrl++ ） Shift，我发现了包含所有工具栏的。Cchrome://browser/content/browser.xul#navigator-toolbox

因此，我调整了我的userChrome.css：

/* For: chrome://browser/content/browser.xul
   From: https://superuser.com/questions/1404144/arranging-firefoxs-ui-bars-with-moz-box-ordinal-group/1404367#1404367 */
#navigator-toolbox {
    display: flex; 
    flex-direction: column;
    }
#toolbar-menubar { order: 1; }
#TabsToolbar { order: 4; }
#nav-bar { order: 2; }
#PersonalToolbar { order: 3; }

相关内容