Mozilla Firefox userChrome.css？答案

【问题标题】：Mozilla Firefox userChrome.css?Mozilla Firefox userChrome.css？
【发布时间】：2016-08-09 12:23:23
【问题描述】：

在研究如何为 Mozilla Firefox 创建userChrome.css 时，我发现您可以通过不同的方式进行操作：

示例 1：

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url(chrome://browser/content/browser.xul) {
  #PanelUI-button {
    display: none !important;
  }
}

示例 2：

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#PanelUI-button {
  display: none !important;
}

第一个示例包含行@-moz-document url(chrome://browser/content/browser.xul)，第二个不包含。我不确定它的作用，两个示例的输出完全相同。

在userChrome.css 中包含@-moz-document url(chrome://browser/content/browser.xul) 有什么好处吗？

【问题讨论】：

标签： css firefox browser userchrome.css

【解决方案1】：

@-moz-document 范围将样式规则限制为该 chrome 文档。在这种情况下，它是您大部分时间想要的主浏览器 UI。如果没有该范围，则规则将应用于所有 chrome 页面。如果您正在创建主题并想要一致的颜色和字体，这可能就是您想要的。

如果您的样式规则像您的示例中那样操作特定元素，那么您应该将其限制在特定文档中，但通常不会导致任何问题。但是，在这种情况下，如果该文档碰巧使用了相同的元素名称，您最终可能会在某个不相关的对话框上丢失按钮。

我正在回答一个非常古老的问题，最新版本的 Firefox 已将所有 .xul 文件重命名为 .xhtml。您应该改用@-moz-document url(chrome://browser/content/browser.xhtml) { ... }。

为了确认 Jeremy 的回答，“userChrome.css”仅适用于 Firefox UI 的一部分，而不适用于 Web 内容。但是有一个“userContent.css”文件可用于将自定义样式应用于 Web 内容。您肯定希望将 userContent.css 中的规则范围限定为特定的 URL 或域。

【讨论】：

【解决方案2】：

@-moz-document 是 @document 的前缀形式，这是一个 CSS“@-rule”，它将包含的规则限制在某些 URL 中。所以在这种情况下，

@-moz-document url(chrome://browser/content/browser.xul)

将其包含的规则限制为browser.xul。

在不深入研究userchrome.css 的情况下，我预计这意味着这些规则将仅适用于“Firefox 的一部分”，而不适用于实际的网页。

您可以通过创建一个 ID 为 #PanelUI-button 元素的页面来测试它，并查看 display:none 是否适用于它。

【讨论】：