4

ページに適切な量の HTML を動的にレンダリングする jQuery プラグインがあります。プラグインの消費者がプラグインをそのまま使用できるようにし、どの CSS スタイルを使用していても同じように見えるようにしたいと考えています。

したがって、「スコープ付き」の CSS リセットが必要です。つまり、プラグイン div 内で何かを言う機能は、所有者の CSS の影響を受けてはなりません。

これで明らかに、このスコープ内で使用するすべての HTML 要素をリセットできますが、あまり洗練されていないように見えます。他の誰かがこれを処理する方法はありますか?

4

4 に答える 4

4

かなりのグーグル検索の後、以前に偶然見つけたこのプロジェクトを見つけました。これは、!important ルールに完全に依存する範囲指定された CSS リセットです。https://github.com/premasagar/cleanslate

于 2011-08-05T23:49:53.843 に答える
0

実際のCSSリセットとしては何もありません。CSSスタイルのルールは、それが適用されるすべての要素にカスケードされます。それを停止する唯一の方法は、別のルールでオーバーライドすることです。

リセットスタイルシートは、ブラウザにデフォルトで適用される重要なルールを上書きすることで機能します。スコープ内で同様のことを行う場合は、ブラウザがデフォルトで設定するものに限定されず、ページのスタイルシートで設定される可能性のあるすべての可能なスタイルをオーバーライドする必要があります。それでも、考えられるすべてのセレクターを無効にするほど具体的なルールを作成することはできません。

だから、あなたが求めていることは不可能です。ただし、スコープの最も一般的で最も重要なスタイルをオーバーライドすることで、妥当な妥協をすることができます。

于 2011-03-16T19:11:50.980 に答える
0

いくつかの組み合わせをお勧めします。

  1. 多くの名前空間/接頭辞付きクラスを使用します。つまり、plugin-checked plugin-active
  2. ページに他のスタイルが適用されていない場合に、正しいクラスに正しいスタイルを与えるデフォルトのスタイルシートを作成します。
  3. 常に同じ ui-animations に inline-styles を使用します (アニメーション化する場合、inline-styles は変化します)。
  4. どのクラスがどの要素にいつ適用されるかについて、適切なドキュメントを提供してください。

これにより、より高度な開発者が独自のスタイルシートを使用したり、スタイルシートを拡張して目的の形式を作成したりできるようになります。開発者がdiv a {float:left;}.

すべての要素にすべてのルールを指定して、デフォルトのスタイルシートで非常に具体的にすることができますが、それは価値があるよりも面倒なので、まったく不要になる傾向があります。

開発を制限するプラグインを作成するのではなく、開発を簡素化するプラグインを作成するようにしてください。

サポートされる場合とされない場合がある HTML5 ソリューションとして (どのブラウザがこれをサポートしているかはまだわかりません)、属性(go figure、scoped styles)を持つstyle要素を介して一連のスタイルをコンテナに追加できます。scoped単純化された HTML リセットが含まれている可能性がありますが、このシステム全体は、後で何かをオーバーライドして特定性の戦いに参加する必要がある場合に制限される可能性が高くなります。

于 2011-03-16T19:21:24.523 に答える
0

プラグインを介して DOM に挿入する HTML にすべてのスタイルをインラインで配置できます。ユーザーが必要に応じて独自の JS でオーバーライドできるため、これはまだ保証されていません。

より便利な場合は、すべての HTML を ID でラップしてから、次の内部ですべてをリセットできます。

#myPluginHTML p, #myPluginHTML li, #myPluginHTML div, etc {
   margin: 0px;
   etc: 0;
}

繰り返しますが、何の保証もありません。しかし、デフォルトで動作するはずです。

于 2011-03-16T19:03:24.327 に答える