html - 由伪元素创建的内容

Question

我想知道并玩了::after 昨天，我遇到了一个问题:

是否最好为冗余内容使用伪元素，例如 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 文件。

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

总而言之，我认为这是可以接受的内容声明用法。