html - 顔文字 - CSS 背景またはインライン画像?

Question

:)コメントの,のようなユーザー テキスト:Pをスマイリー (絵文字) に置き換えることを考えていました。正規表現の使用。置換をクラスを持つスパン要素にするのは良い考えだと思いますか? 次に、スマイリー画像をそのクラスに適用しますか?

それとも、そのテキストを<img>タグに置き換えるだけですか?

通常、CSS はコンテンツの一部ではないと見なされますが、これらの画像のスマイリーは... (CSS を無効にすると、絵文字がないため、テキストの意味が変わる可能性があります)

Answer 1

顔文字は文字で表される視覚的な情報なので、「:-)」を何かに置き換えると、自然な候補は「☺」(U+263A WHITE SMILING FACE) などの特殊文字と のimgようなタグになり<img alt=":-)" src="smiley.png">ます。

背景画像を持つ要素を使用することには、alt属性に対応するものがないことや、印刷時に背景画像を抑制するという一般的なブラウザーの動作など、いくつかの欠点があります。

絵文字のように見えるものをプログラムで画像などに変更するのは、やや危険です。すべての「:-)」が絵文字であるとは断言できません。特殊なフィールドでは、あらゆる種類の奇妙な文字の組み合わせが発生する可能性があります。さらに、ユーザーが例えば顔文字について書いていた場合、置換でコンテンツの一部が失われたり歪んだりする可能性があります。

Answer 2

スマイリーがたくさんある場合は、css スプライト トリックを使用することをお勧めします。これは、ブラウザーが 1 ダースの小さな画像ファイルをダウンロードする代わりに、1 つの画像ファイルのみをダウンロードする必要があることを意味するためです。

これにより、オーバーヘッドが少なくなり、キャッシュが改善されます

Answer 3

スマイリーを平文で表示し、代わりに CSS で画像を表示します。

<span>または別の要素を使用してそれを実現できます。

たとえば、コードに:)ある必要が<span class="normalsmiley">:)</span>あります。

そうすれば、画像が表示されない人や CSS が無効になっている人 (テキストのスマイリーが表示される) にとっても、テキストは意味のあるものになります。

Answer 4

CSS を使用して画像を表示します。ベスト プラクティスは、不要な文字、非表示の文字、および HTML タグをユーザー入力から削除して、HTML コード インジェクションとクロスサイト スクリプティングを回避することです。