javascript - ページの一部の CSS を正規化する

Question

ユーザーのブックマークからアクセスできる js プラグインを開発しています。ユーザーがブックマークを押すと、プラグインがポップアップを表示し、メモを入力して保存できるフォームを表示します。

normalize.cssiframe を使用したり、ページの残りの部分に影響を与えたりせずに、プラグインにスタイルシートを適用したいと考えています (つまりnormalize.css、プラグインに stylehseet を直接埋め込むことはできません)。

任意のアイデア/提案?

Answer 1

最終的には html5スコープのスタイルでこれを実行できるようになるかもしれませんが、現在、ほとんどの最新のブラウザでは実行できません。

プラグイン要素にクラスまたは ID を指定し、プラグインの css ファイル内 (または JavaScript 経由) でこれらの要素を手動で「正規化」する必要があります。

編集：

私の答えを拡張すると、@Tibos コメント: プラグインの elmenets のスタイルが異なることを絶対に確信することはできませんが、プラグインを ID で名前空間化することにより、css に妥当な量の特異性を提供できます。

#myPlugin .container {
  background: #fff;
} 

#myPlugin input {
  border:0;
}

Tibosが言及しているように、核のオプションがありますが!important、極端な状況（レイアウトが完全に壊れるなど）のためにこれを保存するのが最善かもしれません。通常、必要に応じてスタイルを上書きする機会をユーザーに与えることは良いことです。