刚刚注意到 Twitter 上的“”标签,这是他们编造的吗?

发布于 2024-08-09 01:15:58 字数 113 浏览 6 评论 0原文

Twitter 似乎使用 标签来显示 CSS 精灵中的图标。他们只是编造了这个标签,还是我从未听说过 HTML?

无论如何,这是个好主意:)

Twitter seems to be using an <i/> tag to display their icons from a css sprite. Did they just make up that tag, or is HTML I've never heard of?

Brilliant idea at any rate :)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

咿呀咿呀哟 2024-08-16 01:15:58

使用 i 代替 span 可以节省一些字节

using i instead of span can save some bytes

む无字情书 2024-08-16 01:15:58

他们可能使用它来减少 HTTP 负载,即带宽成本。

They're probably using that to reduce HTTP payload, i.e. bandwidth cost.

风启觞 2024-08-16 01:15:58

这是常规的斜体标签,但没有任何内容;即它在语义上等同于 .

XML,空元素在末尾带有额外的斜杠。 XHTML 是有效的 XML。所以 就可以了。对于更常见的示例,请考虑例如

要亲自查看 是否是有效的 XHTML 标记,请检查 XML EmptyElemTag 定义 或将以下内容传递给 W3C 验证器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title></title>
  </head>
  <body>
    <p><i/></p> <!-- look here -->
  </body>
</html>

   正如 Toji 正确指出的那样, 语法差异在某些情况下是相关的。尽管浏览器可能不会将 视为与 有任何不同,但其他 XML 解析器可以!

That's the regular italics tag, but without any contents; i.e. it's semantically equivalent to <i></i>.

In XML, empty elements are written with an extra slash at the end. XHTML is valid XML. So <i/> is fine. For a more common example, think of e.g. <br />.

To see for yourself that <i/> is a valid XHTML tag, check the XML EmptyElemTag definition or pass the following to the W3C validator:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title></title>
  </head>
  <body>
    <p><i/></p> <!-- look here -->
  </body>
</html>

   As Toji correctly points out, the syntactic difference is relevant under certain circumstances. Though browsers may not treat <i/> any different from <i></i>, other XML parsers could!

渡你暖光 2024-08-16 01:15:58

这就是斜体标签。

That's the italics tag.

瑾兮 2024-08-16 01:15:58

我见过人们使用空的面向样式的元素(例如 )作为 UI 小部件的额外样式的钩子在整个站点中重复使用。 OOCSS 就是这样做的。例如,基本模块的结构定义为

<div class="mod"> 
  <b class="top"><b class="tl"></b><b class="tr"></b></b>
  <div class="inner">
    <div class="bd">
      <p>Lorem ipsum.</p>
    </div>
  </div>
  <b class="bottom"><b class="bl"></b><b class="br"></b></b> 
</div>

然后,根据您的 CSS(以及您使用该模块的上下文),那些空的 元素可能会接收样式以添加边框图像等,或者它们可能根本没有任何样式并且对页面没有影响。

我找不到你所指的标签,所以我不知道这是否是 Twitter 正在做的事情,但无论如何,这些标签的使用都很有趣。

I have seen people use empty style-oriented elements (e.g. <i/>, <b/>) as hooks for extra styling for UI widgets that are reused throughout a site. OOCSS does this. For example, the basic module's structure is defined as

<div class="mod"> 
  <b class="top"><b class="tl"></b><b class="tr"></b></b>
  <div class="inner">
    <div class="bd">
      <p>Lorem ipsum.</p>
    </div>
  </div>
  <b class="bottom"><b class="bl"></b><b class="br"></b></b> 
</div>

Then depending on your CSS (and the context where you use the module), those empty <b /> elements may receive styling to add e.g. border images, or they might receive no styling at all and have no impact on the page.

I couldn't find the tags you are referring to so I don't know if this is what Twitter is doing, but it is an interesting use of these tags regardless.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文