Question

在研究如何为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)，第二个示例不包含。我不确定它的作用，两个例子的输出完全相同。

在@-moz-document url(chrome://browser/content/browser.xul)中加入userChrome.css是否有任何好处？

Answer 1

@-moz-document是@document的前缀形式，CSS＆＃34; @ - 规则＆＃34;它将包含的规则限制为某些URL。所以在这种情况下，

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

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

我没有深入研究userchrome.css研究，我认为这意味着规则只适用于Firefox＆＃34;并且不适用于实际的网页。

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

Answer 2

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

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

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

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

Mozilla Firefox userChrome.css？

2 个答案: