6

長い間、私は Web 開発に関する次の真実を読み、理解してきました。

  1. HTMLはコンテンツ用です
  2. CSSはプレゼンテーション用です
  3. JavaScript は振る舞いのためのものです。

.cssこれは通常、すべて問題なく良好であり、これらのガイドラインに厳密に従い、外部ファイルと.jsファイルを使用すると、サイト全体がはるかに管理しやすくなることがわかりました. しかし、私はこの考えを破る状況を見つけたと思います。

自分のサイトの 1 つ用に構築したカスタム フォーラム システムがあります。このようなシステムの通常の書式設定 (リンク、画像、太字の斜体、下線など) に加えて、ユーザーがテキストの書式設定 (色、フォント ファミリー、サイズなど) を設定できるようにしました。これらはすべて、フォーラム メッセージのデータベースによってフォーマット コードとして保存され、ページが表示されるときに対応する HTML に変換されます。（少し非効率的です。技術的には、保存する前に翻訳する必要がありますが、この方法でシステムをライブで作業できます。）

このシステムや他の同様のシステムの性質上、結果の HTML コードの周りにたくさんのタグが浮かんでしまいます。これは、フォーマットに CSS を使用することになっているため、非公式に非推奨になっていると思います。これは、HTML にフォーマット情報を含めるべきではなく、代わりにその情報を CSS ドキュメントに配置することを優先するというルール 1 と 2 に違反しています。

マークアップにその情報を含めずに、CSS で動的フォーマットを実現する方法はありますか? 苦労する価値はありますか？または、適切なコードの暗黙の制限を考慮して、コードをフォーマットする「正しい」方法に従うためにユーザーができることを制限する必要がありますか?

4

9 に答える 9

5

style要素に属性を使用しても問題ありません:

This is <span style="color: red;">red text</span>.

ユーザーが一部のオプションのみに制限されている場合は、classesを使用できます。

This is <span class="red">red text</span>.

必ずセマンティック HTML 要素を使用してください。

This is <strong>strong and <em class="blue">emphasized</em></strong>
text with a <a href="http://www.google.com" rel="external">link</a>.

一般的なセマンティック要素とそのユーザー空間用語:

  • <p>(段落)
  • <strong>（大胆な）
  • <em>（イタリック）
  • <blockquote>（引用）
  • <ul>と<ol>（<li>リスト）
  • もっと...？

フォーラムの投稿ではあまり一般的ではありませんが、使用可能なセマンティック要素は次のとおりです。

  • <h1>、<h2>など (見出し。ページが意味を成すように、必ず値から始めてください)
  • <del>、および程度は低いが<ins>(三振)
  • <sup>および<sub>(それぞれ上付き文字と下付き文字)
  • <dl><dt>and <dd>(ペアのリスト)
  • <address>（連絡先）
  • もっと...
于 2009-04-05T23:14:31.423 に答える
4

これは少しトリッキーです。訪問者に本当に許可したいことを考えます。任意の色とフォント? それはかなり役に立たないようです。強調、見出し、リンク、画像？これらのタグに制限するか、これらの機能のみを提供する wikitext/forumtext マークアップを使用することで、十分に簡単に処理できます。

于 2009-04-05T23:13:25.107 に答える
1

ユーザーの好みや個人的なスタイルに応じて、無数の異なるスタイルを持つことができるため、これは興味深い状況です。

この状況を効率的に管理するためにできることがいくつかあります。おそらく最も簡単なのは、スタイルのオーバーライドを使用することです。

<p style="color: blue; font-size: 10pt;">Lorem Ipsum</p>

これは素早く簡単です。そして、これがスタイルオーバーライドの目的であることを忘れないでください。しかし、あなたが言ったように、これはこのコンテンツとプレゼンテーションの分離パラダイムにはうまく適合しません。それらをもう少し分離するには、ページの読み込み時にいくつかの CSS 情報を作成し、それを<head>HTML のタグに挿入します。これにより、技術的に分離していなくても、HTML と CSS をある程度区別できます。

もう 1 つのオプションは、CSS を作成してから、それをファイルに出力することです。ただし、これは効率的ではありません（私の意見では）。ページが読み込まれるたびに、ユーザー固有の設定を考慮した新しい CSS ファイルを作成すると、目的が達成できなくなります。これは 2 番目のオプションと同じで、<head>タグを使用して、分離したように見せるだけです。CSS ファイルを作成する頻度を制限するためにキャッシングなどの手法を使用したとしても、目的は手段を正当化するものでしょうか?

これは完全に主観的なトピックであり、最終的には、最も快適なものを選択する必要があります。

于 2009-04-05T23:32:53.767 に答える
1

ユーザーに提供される html ページのヘッドにインライン スタイル シートを動的に作成できます。ページの先頭に配置し、ユーザーが構成可能な要素をターゲットにできるようにします。

別の方法として、最も一般的な調整を備えた外部スタイルシートを使用するという考え方もありますが、考えられるすべての代替手段を考慮すると、何百ものスタイルシートが存在します。これを使用する場合、特定のフォント サイズ、色などの外部スタイル シートが必要になり、ヘッダー内のそれらに動的にリンクする必要があります。外部スタイルシートと同様。ただし、これを有効にするのはほとんど耐え難いほど複雑です。

ただし、オプション1は問題なく機能します。

例として：

<STYLE>
    h1,h2,h3,h4 {font-family: Helvetica, Calibri;}
    p    {font-size: 1.2em;    // Populate all this with values from the Db.
         font-weight: bold;
         }
    a    {text-decoration: underline;
         color: #f00;
         }
</STYLE>

また、おそらくユーザーごとのスタイルシートを作成して、構成可能な側面を適用できると思いました。使用する

<link href="/css/defaultstylesheet.css" type="text/css" rel="stylesheet" media="all" />
<link href="/css/user1245configured.css" type="text/css" rel="stylesheet" media="all" />
<!-- clearly the second is a stylesheet created for 'user 1245'. -->

このアプローチの利点は、ブラウザーによるスタイルシートのキャッシュが可能になることです。ユーザーシートへの特定のユーザーパスがない限り、cssフォルダーが乱雑になる可能性がありますか? うわー、これは複雑になる可能性があります... :)

于 2009-04-05T23:07:49.147 に答える
0

これを管理する最も簡単な方法は、おそらく、ユーザーの設定に基づいて、ページが生成されるときに動的 CSS を発行することです。次に、すべてが本来の処理を実行し、サーバーはユーザーの設定を適切な CSS に変換する作業を実行します。

この作業を行う CSS を使用すると、HTML で適切な属性 (idなど)nameを使用して、必要なclass方法ですべてをきれいにフォーマットする CSS を発行できます。

于 2009-04-05T23:19:18.887 に答える
0

何かを行う前に、メリットとコストを比較検討してください。現在、コードの何が実際に間違っているのでしょうか? タグ スープと組み合わせたコンテンツ/プレゼンテーションは、悪い Web サイトになるからではなく、維持するのが難しいため、避ける必要があります。HTML/CSS が生成されている場合、出力がどうなるか誰が気にしますか? 今持っているものが機能する場合は、それに固執してください。

于 2009-04-05T23:22:30.407 に答える
0

安全なオプションの限られたホワイトリストのみを許可しているため、ユーザーの HTML を既に解析していると思います。

HTML をレンダリングするときに、各スタイル宣言をクラスに変換できます。

<span style="font-family: SansSerif; font-size: 18px;">Hello</span>

に：

<span class="SansSerif"><span class="size_18px">Hello</span></span>

リストを生成 (および維持) するのは面倒です。ただし、もちろん、主な問題である各組み合わせのクラスについて心配する必要はありません。

また、ユーザーの CSS がすべて置き換えられるため、フィルターをすり抜ける可能性が低くなるため、セキュリティが強化されるという利点もあります。これにより、すべての CSS が有効であることも保証されます。

于 2009-04-06T00:03:56.000 に答える
0

どのフレームワークや言語を使用しているかはわかりませんが、たとえば、Django は特定のテンプレート言語を使用して、出力される HTML を表現しています。ユーザーが選択したものに応じて、単に別の「テンプレート」を使用するのが良い解決策だと思います。このようにすれば、「ルール」を破ったり、基本的に使用されていないタグが DOM に大量に存在することを気にする必要がなくなります。

完全に誤解していなければ…！

于 2009-04-05T23:08:52.297 に答える
-2

ユーザーが色、フォント ファミリー、サイズなどのテキストの書式を設定できるようにしました。これらはすべて、フォーラム メッセージのデータベースによってフォーマット コードとして保存され、ページが表示されるときに対応する HTML に変換されます。

つまり、HTML で書式設定を行い、CSS で書式設定を行う必要があることを知っていて、これが問題であることに気付き、それについて 300 語の SO の質問をするところまで来ました ... ?

質問を定式化できても、解決策が表示されない... ?

ここで、次のヒントをお伝えします。

これらはすべてフォーラム メッセージのデータベースによってフォーマット コードとして保存され 、ページが表示されるときに対応するHTML CSSに変換されます。

それは役に立ちますか？

この質問は冗談ですか？

于 2009-04-06T00:06:11.393 に答える