类名中的 Unicode 字符

读者 Kartlos 通过电子邮件向我推荐了伟大的 Snook 先生 几年前写的一篇有趣文章。 我之前好像没见过，而且它确实是一篇“CSS 技巧”，所以我决定分享一下。

想法是您可以在 HTML 中使用 unicode 字符（读作：花哨符号）作为类名，甚至可以使用这些相同的字符编写 CSS 选择器。

<div class="♫">
    A.A. Bondy
    <em>I Can See The Pines Are Dancing</em>
</div>

.♫ { 
   display: block;
   background: #eee;
   padding: 5px;
 }

很酷吧？ 我认为我上面的例子也非常语义化，因为带有音符类名的 div 标记了音乐家和歌曲。 也许更语义化，因为音符比任何英语单词更能代表音乐。

我创建了一个 超级简单的演示页面 来展示它的工作原理。 哦，是的 - 它在 IE6™ 中有效 - 并且通过了验证™

但是…

一件有趣的事情？ 查看该页面的源代码。 我使用 PHP 包含了所有演示的页眉和页脚，由于该页面的字符编码（？），PHP 无法运行它，它只是作为文本存在。

奇怪吧？ 如果你知道如何双向工作，请告诉我。

其他用途

Jonathan 在他最初的文章中提出了一种针对盒子角的方案。

<div class="□">
  <div class="┌">
    <div class="┐">
      <div class="└">
        <div class="┘">
          content
        </div>
      </div>
    </div>
</div>

还记得几年前我们大多数人都在使用嵌套的 div 和图像来实现圆角吗？ 角符号很巧妙，但我可以看到<div class="□">今天被用作“容器”或“盒子”类型的类，或者也许最重要的是，用于 清除浮动。

我在 Forrst 上发布了一个关于这个的小代码片段（抱歉，我知道大多数人还没有在那里创建帐户），一位名叫 Aaron 的用户提出了一个有趣的想法：使用颠倒的文字来制造麻烦！id='ɹǝpɐǝɥ', id='ɹǝddɐɹʍ', id='ɹǝʇooɟ'