Why does HTML think “chucknorris” is a color?

技术背景

在早期的网页开发中，Netscape 浏览器制定了一些关于颜色值解析的规则。这些规则在后续的浏览器发展中部分被保留下来，导致了一些有趣的现象，例如 HTML 会将 “chucknorris” 这样的字符串解析为颜色。这种解析规则主要应用于 HTML 标签的颜色属性，如 bgcolor 和 color，但在 CSS 颜色解析中并不适用，CSS 遵循 CSS 标准。

实现步骤

颜色解析规则

替换非十六进制字符：将字符串中所有非有效的十六进制字符替换为 0。例如，“chucknorris” 会变成 “c00c0000000”。
补齐字符长度：将字符串的长度补齐为能被 3 整除的最小长度。对于 “c00c0000000”，长度为 11，补齐后变为 “c00c 0000 0000”。
分割为 RGB 分量：将补齐后的字符串平均分割为三组，每组对应 RGB 颜色的一个分量。即 “RGB (c00c, 0000, 0000)”。
截断每个分量：将每个分量从右向左截断为两个字符。最终得到 “RGB (c0, 00, 00)”，对应的十六进制颜色值为 “#C00000”，即 RGB(192, 0, 0)。

不同字符串的解析示例

“chucknorr”：“chucknorr” 经过上述规则处理后，“c00c00000” => “c00 c00 000” => “c0 c0 00” [RGB(192, 192, 0)]，呈现出浅黄色。
“Rajnikanth”：转换为十六进制格式为 “0a00 00a0 0000”，最终结果为 “#0a0000”，是一种黑色调。

核心代码

以下是一个部分实现颜色解析算法的 JavaScript 代码：

function parseColor(input) {
    // todo: return error if input is ""
    input = input.trim();
    // todo: return error if input is "transparent"
    // todo: return corresponding #rrggbb if input is a named color
    // todo: return #rrggbb if input matches #rgb
    // todo: replace unicode code points greater than U+FFFF with 00
    if (input.length > 128) {
        input = input.slice(0, 128);
    }
    if (input.charAt(0) === "#") {
        input = input.slice(1);
    }
    input = input.replace(/[^0-9A-Fa-f]/g, "0");
    while (input.length === 0 || input.length % 3 > 0) {
        input += "0";
    }
    var r = input.slice(0, input.length / 3);
    var g = input.slice(input.length / 3, input.length * 2 / 3);
    var b = input.slice(input.length * 2 / 3);
    if (r.length > 8) {
        r = r.slice(-8);
        g = g.slice(-8);
        b = b.slice(-8);
    }
    while (r.length > 2 && r.charAt(0) === "0" && g.charAt(0) === "0" && b.charAt(0) === "0") {
        r = r.slice(1);
        g = g.slice(1);
        b = b.slice(1);
    }
    if (r.length > 2) {
        r = r.slice(0, 2);
        g = g.slice(0, 2);
        b = b.slice(0, 2);
    }
    return "#" + r.padStart(2, "0") + g.padStart(2, "0") + b.padStart(2, "0");
}

$(function() {
    $("#input").on("change", function() {
        var input = $(this).val();
        var color = parseColor(input);
        var $cells = $("#result tbody td");
        $cells.eq(0).attr("bgcolor", input);
        $cells.eq(1).attr("bgcolor", color);

        var color1 = $cells.eq(0).css("background-color");
        var color2 = $cells.eq(1).css("background-color");
        $cells.eq(2).empty().append("bgcolor: " + input, "<br>", "getComputedStyle: " + color1);
        $cells.eq(3).empty().append("bgcolor: " + color, "<br>", "getComputedStyle: " + color2);
    });
});