HTML5属性值规范化

如何解决HTML5属性值规范化

在XML空格中，属性值是normalized to spaces。因此，test="foo#xD#xAbar"（CRLF在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却没有。它指向2011年以来的W3C HTML5 Bug 13709，但未提供其他信息。我还发现了W3C ISSUE-87;经过很少甚至没有讨论，这似乎是closed with prejudice。

让我给您一个应用示例。我有几个以prefix-开头的HTML5 CSS类，其中包括prefix-foo和prefix-bar。我想选择元素example，但前提是它不包含以prefix-开头的类-|=和{{1 }}属性选择器。

~=

请注意，最后一个示例具有一个<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类令牌前缀。

我想出了以下选择器，该选择器适用于以上示例：

prefix-

我担心的是，如果源使用空格而不是空格，选择器是否仍将起作用。例如：

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

令人惊讶的是，此功能在Firefox和Chrome上均有效。看来属性源中的换行符已被规范化为DOM中的空格。也许没有进行规范化，但是一些CSS规范指出属性选择器中的空格应与任何空格匹配（即规范化是在匹配期间而不是解析期间）。

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

<example class="do-not-select


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

并采用以下HTML：

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

在Firefox和Chrome中，这两个对我来说都是绿色的。

HTML5 specification for class表示该值为space-separated，其中包括任何space characters，包括制表符和换行符。不过，它并没有说明标准化。

有人可以引用相关的权威规范来解释HTML5是否规范化了属性值；以及CSS属性选择器中的空格是字面上匹配还是空白？

解决方法

我认为问题是我的测试文件是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的文件，从而应用了XML属性规范化规则。

当我运行我的静态网站生成器并提供这些文件时，没有XML声明，它们作为text/html文件（HTML5），Firefox和Chrome都不选择了第二个{{1 }}。

因此，看来 HTML5无法规范属性中的空格。我错误地认为这是由于我无意中遵循了XML规范化规则对XHTML5文件进行了测试。

HTML5属性值规范化

如何解决HTML5属性值规范化

解决方法

相关推荐