HTML5 属性值归一化

Question

在XML whitespace中属性值为normalized to spaces。因此 test="foo#xD#xAbar"（在 foo 和 bar 之间有 CRLF）在解析时被归一化为 test="foo bar"。

但是 HTML 也会发生属性规范化吗——特别是 HTML5？ HTML 5.2 spec on attributes 没有提到它。在网上搜索 if html5 normalization of attribute values 令人惊讶的是，没有立即显示任何关于此事的讨论。

我在几乎没有或根本没有讨论后找到了 email on a W3C mailing list seeming to state that HTML4 normalized attribute values, but that HTML5 does not. It pointed to W3C HTML5 Bug 13709 from 2011, which provided no additional information. I also found W3C ISSUE-87; this seems to have been closed with prejudice。

我举个应用的例子。我有几个以 prefix- 开头的 HTML5 CSS class，包括（除其他外）prefix-foo 和 prefix-bar。我想要 select 元素 example 但前提是它 而不是 包含以 prefix- 开头的 class — 某种组合|= 和 ~= 属性 selectors.

<example class="select">this will be blue</example>
<example class="do-not-select prefix-foo">this should not be blue</example>
<example class="prefix-bar do-not-select">this should not be blue</example>
<example class="select-prefix-is-not-a-prefix">but this <em>should</em> be blue</example>

请注意，最后一个示例有一个 prefix- 子字符串，但不是 CSS class 标记前缀。

我想出了以下 selector，它适用于上述示例：

example:not([class^="prefix-"]):not([class*=" prefix-"]):
  background-color: blue;
;

我担心的是，如果源代码使用白色 space 而不是 space，那么 selector 是否仍然有效。例如：

<example class="do-not-select


prefix-foo">this should not be blue either</example>

令人惊讶的是，这在 Firefox 和 Chrome 上都有效。看起来属性源中的换行符正在规范化为 DOM 中的 space。或者可能没有规范化发生，但是一些 CSS 规范表明属性 selector 中的 space 应该匹配任何白色 space （即规范化是在匹配期间不解析期间）。

现在我已经解释了我的用例，让我简化测试用例。采用这种 CSS 风格：

div[class*=" prefix-"] {
  background-color: green;
;

然后拿这个 HTML:

<div class="select prefix-foo">this should be green</div>

<div class="select

prefix-foo">this should be green only if whitespace is normalized</div>

我在 Firefox 和 Chrome 中都显示为绿色。

HTML5 specification for class says that the value is space-separated, which includes any space characters 包括制表符和换行符。不过，它没有提及规范化。

请问有没有人引用相关权威规范解释一下，HTML5是否规范化了属性值；以及 CSS 属性 select 中的 space 或字面匹配还是匹配任何 whitespace?

Answer 1

我认为问题在于我的测试文件是一个 XHTML5 文件并且浏览器遵循 XML 属性规范化规则。当作为 HTML5 时，似乎没有发生属性规范化。

我原来的测试用例实际上是一个 XHTML5 文件存储在例如text.xhtml 看起来像这样：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

…

<div class="select prefix-foo">this should be green</div>

<div class="select

prefix-foo">this should be green only if whitespace is normalized</div>

这是完全有效的 XHTML5。我正在使用生成 HTML5 的静态站点生成器，但我忘记了我的来源是 XHTML5。当我从文件系统本地测试文件时，Firefox 和 Chrome 都正确地将文件识别为 XML-based，从而应用 XML 属性规范化规则。

当我运行我的静态站点生成器并提供这些文件时，没有 XML 声明，作为 text/html 文件（HTML5），Firefox 和 Chrome 没有没有 select 第二个 <div>.

因此 HTML5 似乎没有规范化属性 中的空格。我错误地认为发生这种情况是因为 我无意中按照 XML 规范化规则 .

对 XHTML5 文件进行了测试

HTML5 属性值归一化

HTML5 attribute value normalization

html

css

normalization

css-selectors