Firefox 的 userContent.css 中应该定义什么命名空间？

Question

在Firefox的userChrome.css中，需要定义XUL命名空间：

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

在 userContent.css 中，如果除了网站自定义之外还包含 about:addons 自定义，则应定义什么命名空间？

仅指定：

@命名空间网址(http://www.w3.org/1999/xhtml);

导致about:addons自定义未得到应用。

（鉴于命名空间为 XUL，请参阅 为什么 about:addons 的 CSS 声明放置在 userContent 而不是 userChrome 中？了解为什么 about:addons 自定义项放置在 userContent.css 中。）

Answer 1

userContent.css 文件用于可以属于任何命名空间的内容。最常见的是它用于 HTML 和 XUL。此外，Firefox 正在转变为在代码中使用更多 HTML 命名空间元素，这些元素用于定义其 chrome（即所有非内容）。因此，您需要在 userChrome.css 和 userContent.css 中处理 HTML 和 XUL。

考虑到 Firefox Chrome 中混合使用了 HTML 和 XUL，我发现我经常需要查看元素的源代码或使用 DOM Inspector 来查看我正在使用的元素使用了哪个命名空间有兴趣。

有多种方法可以使用

@namespace

指令来执行此操作。如果需要，可以在同一文件中使用以下两种方法。如果这样做，您将需要注意您定义的当前默认命名空间。

定义 HTML 元素的规则，将默认值更改为 XUL，然后执行 XUL

鉴于这些文件默认使用 HTML 命名空间，我个人所做的只是在使用之前制定 HTML 命名空间规则：

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

将默认命名空间设置为 XUL。我的所有 XUL 规则都会在命名空间更改后放置。因此，它看起来像：

/* Put all HTML namespace rules here. */    

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

/* Put all XUL namespace rules here. */    

如何组织它取决于您。我这样做是因为在将默认命名空间更改为 XUL 后尝试显式使用元素的 HTML 命名空间时遇到了问题。我发现显式指定每个元素的名称空间通常无法按我的预期发挥作用，并且是后面的痛苦。因此，我重新构建了我使用的所有规则，仅使用 HTML 或 XUL。

或者，定义命名空间前缀，然后在所有元素上使用它们

如果您想通过显式指定每个元素的名称空间来实现此目的，则需要定义名称空间前缀。您可以使用以下方法来做到这一点：

/* set html namespace to http://www.w3.org/1999/xhtml */
@namespace html url("http://www.w3.org/1999/xhtml");
/* set xul namespace to http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul */
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

然后，您可以使用

html|

、

xul|

或

*|

指定每个元素的 HTML、XUL 或所有命名空间。

注意：一旦更改默认命名空间，您可能需要显式处理其他命名空间中的元素（例如

<svg>

、

<math>

等），这通常会自动处理。

Answer 2

根据 Jefferson Scher 的说法，不再需要 XUL 命名空间，并且 可能会在较新版本的 Firefox 中导致意外故障。相反，现在建议使用

@-moz-document

：

@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {
  /* Your style rules for the user interface go here */
}