HTML5属性值规范化

在XML中,属性值中的空白是 normalized to spaces . 因此 test="foo#xD#xAbar" foo 和 bar )标准化为 test="foo bar" 解析时。

但是属性规范化是否也适用于HTML,特别是HTML5?这个 HTML 5.2 spec on attributes 没关系。搜索如果 html5 normalization of attribute values

我找到了一个 email on a W3C mailing list 看起来HTML4规范化了属性值,但HTML5确实如此 不 Bug 13709 ISSUE-87 ; 这似乎是一个错误 closed with prejudice 几乎没有讨论过。

让我给你举一个应用的例子。我有几个HTML5CSS类,以 prefix- ,包括(除其他外) prefix-foo prefix-bar . 我想选择元素 example 不 包含以开头的类 前缀- 有点像是 |= ~= 属性选择器。

<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>

请注意,最后一个示例有一个 子字符串,但不作为CSS类标记前缀。

我提出了以下选择器,它适用于上述示例:

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

<example class="do-not-select


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

令人惊讶的是,这在Firefox和Chrome上都有效。属性源中的换行符似乎正在被规范化为DOM中的一个空间。或者可能没有进行规范化,但是一些CSS规范指出属性选择器中的空格应该匹配任何空格(即,规范化是在匹配期间,而不是在解析期间)。

现在我已经解释了我的用例,让我简化测试用例。以CSS样式为例:

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

<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 表示值为 space-separated space characters 包括制表符和换行符。不过,它并没有提到正常化。