css - 谷歌优雅化是如何工作的？

Question

所以我在浏览google的愚人节笑话时，发现了这个

它声称可以加载超快的 css，但实际上是这样做的

使用此代码

:before {
  content: '\41\50\52\49\4C\20\46\4F\4F\4C\20\F4\BF\F4';
}

这是什么格式，它是如何工作的？

score 4 · Accepted Answer

content 属性指定要插入到 html 中的内容。它必须与 :before 或 :after 选择器配对，以指定将插入该内容的位置。预期用途是将 before 或 after 选择器应用于元素。例如：

.copyright:before {content: "\00A9 ";}

将在每个具有“版权”类的元素的前面添加一个版权符号。CSS 有自己的方式来处理 HTML 中的字符实体。更多信息可以在@ css-tricks.com /css-content/ 找到。在这里我学到了我所知道的大部分内容。

但是，在这种情况下，他们没有指定将其应用于哪个元素，因此，它将应用于所有元素。

所以优雅器中使用的字符代码如下：

\41 = A
\50 = P
\52 = R
\49 = I
\4C = L
\20 = space
\46 = F
\4F = O
\4F = O
\4C = L
\20 = S
\F4 = ô
\BF = ¿
\F4 = ô

完整的 Unicode 字符列表可以在Unicode 字符列表 Wiki中找到。只需删除前导零并在它们前面加上反斜杠。

1 回答 1