Firefox 中完整的 userChrome.css 规范

Question

已经有很多关于 Firefox 的 userChrome.css 文件的问题。其中大部分源于这样一个事实，即 Mozilla 显然没有针对此文件的完整规范，即对浏览器有影响的 css 标签的完整列表以及这些影响是什么。相反，人们依赖于反复试验，并且一些适用于一个版本的技巧很快就会被更新的版本过时。

我想知道这样的规范是否确实不可用，以及 Mozilla 不发布它（如果没有这样的规范）并且不更新它是否合理。

找到可以通过 userChrome.css 调整的完整 css 标签列表的方法是什么？

Answer 1

您通常尝试更改的userChrome.css内容称为浏览器 chrome，即网页内容之外的浏览器部分。这包括标签栏、地址栏等。您要做的是在 DOM 检查器中打开它，这样您就可以确定哪些CSS 选择器将针对您想要更改的元素。

没有任何保证，您更改的任何内容都可能被下一个版本破坏。与仅指定几个有限的 API 相比，优势在于您可以获得更多的粒度和灵活性。

有两种方法可以确定可以在当前版本中重新设计哪些元素。

在页面上打开检查器的最简单方法是导航到chrome://browser/content/browser.xhtml，这将在选项卡的内容区域内打开浏览器镶边，并为您提供一个看起来很有趣的双窗口：

从这里，您要打开页面检查器工具。有几种方法可以打开它，但我个人喜欢F12键盘快捷键。完成后，您将在“检查”选项卡下看到 DOM 树，其中包含整个浏览器镶边；例如，浏览器按钮位于 下方#navigator-toolbox #nav-bar，菜单位于 下方#mainPopupSet，侧边栏位于 下方#browser #sidebar-box等。还有一个重要元素及其选择器的轮廓，您可以将其用作起点。

然后您可以使用 Page Inspector 来选择元素，并查看现有的 CSS 规则。您可以右键单击树中的一个元素并使用上下文菜单项“复制 -> CSS 选择器”来获得一个快速简便的选择器，以便在您userChrome.css的.选择器，以便您可以找出最好的选择器。

请记住，页面检查器检查页面内容，而不是浏览器镶边。它仅在这种情况下有效，因为我们在页面内启动了 chrome 的副本作为内容。

检查浏览器镶边的另一种方法是使用Browser Toolbox，它可以让您检查正常的实时窗口。与将 chrome 作为内容打开相比，它没有那么 hacky，但它的入门也有点复杂，并且不会为简单的重新设计提供太多好处。