css - 埋め込まれているページのスタイルに影響する Javascript ウィジェット

Question

現在、ページ内に埋め込むことができるウィジェットを開発しています。ただし、埋め込むと、埋め込まれたページのスタイル (フォント、テキスト、レイアウトなど) に影響します。

Clearspring やその他のウィジェット フレームワークは、埋め込みページに影響を与えないように、ウィジェットをどのようにカプセル化するのだろうか。

ありがとう。

Answer 1

ホストページで他のウィジェットと衝突する可能性が最も低い、一意の ID (または複数ある場合はクラス) を持つ 1 つの div の下など、ウィジェットを作成します。良い例かもしれません#company-widjet-name。jQuery UI がそれを行う方法を参照してください ( .ui-widget input)。

次に、親ページの CSS がデザインを詰め込むのを避けるために、一種のローカライズされたリセットを実行する必要がある場合があります。Eric Meyer のリセットのようなものをそれに合わせて変更します。#uniqueId * { padding: 0, margin: 0 }頭痛の原因となりますので避けてください。

あなたがする限り

#uniqueId a {
    property: value;
}

特定性は、ホスト ページの CSS によって意図せずに変更されることなく、要素のスタイルを正しく設定できるほど十分に強力である必要があります。