Question

我在昨天之后想知道和玩::并且有一个问题来找我：

最好将伪元素用于冗余内容，例如lorem-ipsum，还是应该直接将其输入到我的html中。

以下是示例：

显示多种尺寸和字体系列的字体表，使用:: after输入lorem-ipsum。虽然这样的文件大小肯定会更小，但我想知道CSS和信息的处理是否会以这种方式或纯HTML内容更好。

以下是代码：

HTML

<h1>::after fonts showcase</h1>
<h2>Verdana</h2>
<p></p>
<p class="smaller"></p>

<h2 class="times">Times New Roman</h2>
<p class="times"></p>
<p class="times smaller"></p>

<h2 class="helvetica">Helvetica</h2>
<p class="helvetica"></p>
<p class="helvetica smaller"></p>

<h2 class="georgia">Georgia</h2>
<p class="georgia"></p>
<p class="georgia smaller"></p>

这是CSS：

::selection {
  color: tomato;
  background-color: white;
}

body {
  background-color: tomato;
  font-family: verdana, sans-serif;
  text-shadow: 1px 1px 1px #ad1a00, 2px 2px 1px #ad1a00;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 60px;
  color: white;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 35px;
}
h2::after {
  display: block;
  border-bottom: 1px dotted white;
  height: 1px;
  width: 100%;
  content: "";
}

p {
  padding-bottom: 40px;
}
p::after {
  content: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium     doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?";
}

.times {
  font-family: "Times New Roman", serif;
}

.helvetica {
  font-family: Helvetica, sans-serif;
}

.georgia {
  font-family: georgia, serif;
}

.smaller {
  font-size: 12px;
}

所以是的，它允许我只输入一次lorem-ipsum，并根据我的需要尽可能多地显示它，大大减少了最终的文件大小。但我想知道渲染的真实大小。

我不知道我的问题是否清楚，但你们怎么想？

据我所知，并非每个浏览器都可以使用这样的伪元素，并且它可能对可访问性有害，但鉴于这是一个字体样式的展示，盲人并不关心。

以下是示例的视觉效果：http://codepen.io/rlacorne/pen/BdcvK

感谢您对此事的想法！

Answer 1

这是一个有趣的问题，你已经考虑过明显的反对意见 - 它在样式层中放了很多内容。正如你的建议，这是一个特殊的情况，可访问性可能不那么重要 - 虽然盲人可能仍然想知道页面正在做什么，即使他们无法区分不同的字体。

HTML之外的大量内容可能会使页面在将来稍微难以维护 - 任何新的开发人员都需要花一点时间来发现您的内容声明，而使用HTML内容时，它就在他们的鼻子前面。另一方面，它只是你一遍又一遍使用的一大块内容，正如你所说的那样，它会生成一个较小的HTML文件。

我不是百分之百确定这一点，但我的直觉是浏览器会更快地解析直接的HTML内容 - 使用CSS规则他们必须修改他们的DOM模型并将规则应用于每个受影响的元素之前渲染。但我确信这是效率的一个非常小的差异。

总而言之，我会说这是对内容声明的可接受使用。

由伪元素创建的内容

1 个答案: