1

我想知道和玩 ::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

感谢您对此事的看法！

4

1 回答 1

1

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

在 HTML 之外拥有大量内容可能会使页面在将来稍微难以维护 - 任何新开发人员都必须花一些时间来发现您的内容声明，而对于 HTML 内容，它就在他们的眼前。另一方面，它只是您一遍又一遍地使用的一部分内容，正如您所说，这会产生更小的 HTML 文件。

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

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

于 2013-11-08T13:28:54.913 回答