javascript - 通过 javascript 解析 CSS。 Edge 和 Chrome 之间的不一致

Question

我正在用 JS 解析 CSS，我正在尝试获取“内容”CSS 规则的 Unicode 整数值，但它在 Edge 和 Chrome 中的处理方式不同。

在 Edge 中，'content' 是一个 7 个字符的字符串:

在 Chrome 中，它是一个包含 3 个字符的字符串:

csDef 是我的 JS 变量。

CSS 规则如下所示:

为什么不同网络浏览器对值的处理方式不同？在 JS 中，如何在这些网络浏览器中正确获取 Unicode 整数值？

编辑:

这是我加载 CSS 规则的方式:

        var rulesForCssText = function (styleContent) {
            var doc = document.implementation.createHTMLDocument(""),
                styleElement = document.createElement("style");

            styleElement.textContent = styleContent;
            doc.body.appendChild(styleElement);

            return styleElement.sheet.cssRules;
        };

       var cssDefs =  Array.from(rulesForCssText(fileContent));

fileContent 是通过使用 File 对象获得的文件内容，我有一个 input type="file" 并且用户选择来自磁盘的文件。

Answer 1

免责声明:我没有确定的答案，但我从分析中学到了很多东西，我认为结果可能会引起人们的兴趣其他人。

---

首先分享两个测试用例。基于 CSS 的重现了您描述的问题:

var d = document.implementation.createHTMLDocument("");
var s = document.createElement("style");
s.textContent = '.foo{content: "\\20ac";}';
d.body.appendChild(s);
var c = s.sheet.cssRules[0].style.getPropertyValue("content");
console.log("String '%s' has length %d", c, c.length);

桌面版 Firefox 和 Chrome 呈现数字字符引用(String '"€"' 的长度为 3)而 Edge 不会(String '"\20ac"' 的长度为 7)。

有趣的是，第二个基于 HTML 的测试用例似乎没有出现任何问题:

var s = document.getElementsByTagName("span")[0].textContent;
console.log("String '%s' has length %d", s, s.length);

<span>&#x20ac;</span>

两种浏览器都呈现实体(字符串 '€' 的长度为 1)。

那么，谁在这里？ CSS Object Model (CSSOM) Editor’s Draft说:

If property is a case-sensitive match for a property name of a CSS declaration in the declarations, then return the result of invoking serialize a CSS value of that declaration.

……这就是我完全迷路的地方。

无论如何，我们谈论的是仍在积极开发中并且需要由不同 vendor 实现的复杂网络 API。无论是某个特定实现中的错误还是规范中的疏忽(不太可能)，这都是您的代码需要处理的问题。起点可以是:

function browserRendersCharacterReferences() {
  var d = document.implementation.createHTMLDocument("");
  var s = document.createElement("style");
  s.textContent = '.foo{content: "\\20ac";}';
  d.body.appendChild(s);
  return s.sheet.cssRules[0].style.getPropertyValue("content").length === 1;
}

function renderCharacterEntities(t) {
  // THIS FUNCTION IS WRONG, DON'T USE IT, IT'S JUST A QUICK EXAMPLE
  var r = /\\([\da-f]{4})\s?/gi;
  t = t.replace(r, function (match, codePoint) {
    return String.fromCharCode(parseInt(codePoint, 16));
  } );
  return t;
}

function rulesForCssText(css) {
  var d = document.implementation.createHTMLDocument("");
  var s = document.createElement("style");
  var c;
  s.textContent = css;
  d.body.appendChild(s);
  c = s.sheet.cssRules[0].style.getPropertyValue("content");
  if (!browserRendersCharacterReferences()) {
    c = renderCharacterEntities(c);
  }
  return c;
}

console.log(rulesForCssText('.foo{content: "\\20ac  and \\f102";}'));

---

附言我最初对 \f102 做了一些完全错误的评论。这是一个完全有效的 CSS character escape :

Escapes start with a backslash followed by the hexadecimal number that represents the character's hexadecimal Unicode code point value.

…映射到一个完全有效的 Unicode 字符，尽管是 Private Use Area 中的一个 block :

a range of code points that, by definition, will not be assigned characters by the Unicode Consortium. […] They are intentionally left undefined so that third parties may define their own characters without conflicting with Unicode Consortium assignments.

换句话说，它只供私有(private)使用。什么样的用法？例如，Ionicons Font Icon您似乎正在使用的(一种将符号映射到未使用的 Unicode 位置的常规字体，因此它不会干扰常规文本):

<link href="https://unpkg.com/ionicons@4.2.2/dist/css/ionicons.min.css" rel="stylesheet">
<i class="icon ion-ios-add"></i>