css - Mozilla Firefox userChrome.css？

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) 而第二个不包含。我不确定它做了什么，两个示例的输出完全相同。

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

Answer 1

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

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

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

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

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