1

私は疑問に思っていて、昨日の後に::で遊んでいて、質問が私に来ました:

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 を 1 回入力するだけで、必要な数のスタイルで必要なだけ表示できるため、最終的なファイル サイズが大幅に縮小されます。しかし、レンダリングの実際のサイズについて疑問に思っていました。

私の質問が明確かどうかわかりませんが、皆さんはどう思いますか?

すべてのブラウザーがこのような疑似要素を使用できるわけではなく、おそらくアクセシビリティーが悪いことは理解していますが、これはフォント スタイルのショーケースであるため、目の不自由な人は気にしません。

そして、ここに例のビジュアルがあります: http://codepen.io/rlacorne/pen/BdcvK

ご意見ありがとうございます。

4

1 に答える 1

1

それは興味深い質問です。スタイリング レイヤーに多くのコンテンツを配置しているという明白な反論について考えたことがあるでしょう。あなたが示唆するように、これはアクセシビリティがそれほど重要ではないかもしれない特別なケースです - 目の不自由な人は、たとえ異なるフォントの違いを見分けることができなくても、ページが何をしているのか知りたいと思うかもしれません.

HTML の外部に多くのコンテンツがあると、将来的にページを維持するのが少し難しくなる可能性があります。新しい開発者はコンテンツ宣言を見つけるのに少し時間がかかるでしょうが、HTML コンテンツの場合は目の前にあります。一方、それはあなたが何度も何度も使用しているコンテンツの 1 つのチャンクにすぎないため、あなたが言うように、HTML ファイルが小さくなります。

これについて 100% 確信があるわけではありませんが、私の直感では、ブラウザは HTML コンテンツをより速く解析するでしょう。CSS ルールを使用すると、DOM のモデルを変更し、レンダリング前に影響を受ける各要素にルールを適用する必要があります。しかし、それは効率の非常に小さな違いだと確信しています。

全体として、これはコンテンツ宣言の許容可能な使用法であると言えます。

于 2013-11-08T13:28:54.913 に答える