css - css を使用して html 要素を複製する

Question

正しく実装しようとしている Web ページのデザインを処理しています。このデザインには、ページ全体で部分的または完全に複製されたナビゲーション要素が含まれています。特に、ナビゲーションの主要な 3 つのカテゴリへのリンクがページに 4 回以上存在します。

私は Web デザインの専門家ではありませんが、同じコンテンツを HTML に複製するという考えは好きではありません。CSS を使用して、HTML に適切な形式のナビゲーションリンクのリストを 1 つだけ含めることはできますか?ただし、標準のブラウザービューには複数の部分的な重複が含まれますか?

(また、これが可能であると仮定すると、それは良い考えですか? それとも、私の html に同じリンクが 4 回含まれるという考えに慣れたほうがよいでしょうか?)

編集: 実際にナビゲーションリンクを生成することは問題ではありません。出力htmlをクリーンアップしようとしていました

score 18 · Accepted Answer

短い答え：いいえ。

長い答え: そうではありません。

この種の目的で使用できる:beforeと:afterという 2 つの CSS セレクターが存在しますが、それらの内容は限定されており、それらの実装はまだクロスブラウザーセーフではありません。

スタイル（および実際にはコンテンツ）が今と同じように見える可能性があるため、これを行うのはおそらく賢明ではありませんが、後でそうなるという保証はありません。さらに、この種のコンテンツはコンテンツであり、スタイリングではなくマークアップに正しく属しています. サーバー側のインクルードモデル (これは良いことです) が気に入らない場合は、おそらくマークアップを複製するのに役立つ JS と、スタイルの一貫性を保つのに役立つ CSS を検討しますが、必ずしも実り多い道を進んでいるとは限りません。 .

score 3 · Accepted Answer

簡単な答えいいえ。css では、コンテンツを作成したり、複数回表示したりすることはできません。通常、この繰り返されるコンテンツは、サーバー側のテクノロジ (PHP、JSP、ASPX) などによって処理されます。サイトが静的なコンテンツ (サーバー側の処理がない) である場合、最善の策は単にコピーアンドペーストすることです。

JavaScript を使用してこれを行うことは可能ですが、多くの欠点があり、コピーして貼り付ける方が適切です。

score 1 · Accepted Answer

リンクのコードを 1 つのファイルで繰り返すだけであれば、大きな問題にはなりません {テンプレートとして使用し、コンテンツを動的にプッシュします}。

どのサーバーサイドテクノロジーを使用しているかについては推測しませんが、これは JavaScript を使用して簡単に管理できます。リンクの HTML を記述し、それを JavaScript 変数に割り当てて、必要な場所にエコーするだけです。

また、scriptalicious を使用している場合は、幸運です。Builderを使用して動的に DOM 要素を作成できます。

score 1 · Accepted Answer

他の人が言ったように、サーバー側のコードを使用できるかどうか。何らかの理由でサーバー側のコードを使用できない場合、最善の策は、独自の HTML ページを読み取り、繰り返される HTML を追加する小さなプログラムを作成することです。これは、特にページ数が多い場合に、手動でコピーして貼り付けるよりも速くて簡単です。処理中に特別な識別子文字列を含む html コメントタグをページに追加すると、後でこれらのタグを使用して、ページの構造を変更した場合に、すべての一般的な HTML をすばやく見つけて置き換えることもできます。

しかし、このような html ページの前処理は非常に面倒なので、サーバー側で実行できない場合を除き、実行しないでください。

score 1 · Accepted Answer

出力 HTML をクリーンアップしたいとします。しかし、どのような理由で？HTML のサイズと帯域幅のフットプリントを削減するか、ソースコードのように HTML をきれいに保ちたいと考えていると思います。

HTML のサイズと帯域幅の使用量を減らす

これを実現する最善の方法は、HTTP 圧縮を使用することです。ほとんどの HTTP サーバーは、この方法でコンテンツを提供するように構成できます。サーバーのドキュメントを確認してください。

HTML をきれいに保つ

HTML をテンプレートエンジンに変えたいと思うかもしれません。これには、 Mustache.jsやUnderscoreなど、いくつかのオプションがあります。ただし、JS 処理のための追加のステップがあるため、パフォーマンスが低下します。

いずれにせよ、あなたは間違った問題に近づいていると思います。HTML が [ある程度] 読みやすいからといって、ソースコードのように扱う必要があるわけではありません。私はこれを経験してきましたが、最近では HTML をブラウザーの「アセンブリコード」と見なしています。Slimなどの優れたテンプレート言語を使用すると、この POV を強化するのに役立ちます。

HTML をゴミのように扱うべきだという意味ではありません。出力の可読性はプログラマーとしての問題ではないということです。信頼できるテンプレートエンジンを使用して、適切で読みやすいビューテンプレートを作成することに注意する必要があります。結局のところ、ブラウザーがすばやく表示できるように、HTML を可能な限り最適なものにする必要があります。そして、それがコードの重複を意味し、空白がないことを意味する場合は、それで問題ありません。

score 1 · Accepted Answer

私見それは不可能です。私の解決策は、必要な場所にメニューを自動的にレンダリングする小さな PHP またはその他のエンジンを追加することです。このように、コードはDRYです。

score 1 · Accepted Answer

サーバー側の includesを調べることもできますが、Germstorm がすでに述べているように、これはおそらく小さな PHP スクリプトで行うのが最善でしょう。

score 0 · Accepted Answer

とを使用して可能::beforeです::after。ただし、表示できるのはテキストのみです (HTML 要素は表示できません)。HTML 要素を表示できる場合、重大なセキュリティリスクが発生します...

<script>たとえば、悪意のある JavaScript を使用して、ページ内に要素を挿入する可能性があります。

CSS でこれが可能である場合、Stylish などの CSS Userscript 拡張機能は危険である可能性があります。

score -3 · Accepted Answer

HTML インクルードと SSI またはサーバー側インクルードを使用して、同じページに同じメソッドを組み込むと思います。これは、使用する形式です。 、常に類似しているすべてのページにそのファイルを含めます..このリンクにアクセスしてください.. http://webdesign.about.com/od/ssi/a/aa052002a.htm

css - css を使用して html 要素を複製する

11 に答える 11

Related

Reference