4

デザインチームからファンシーボックスポップアップ用のcssを含む新しいWebページを入手しました。

そして、彼らは既存のクラスとIDを知らないか、探す気になりません。

何もなしで実用的なソリューションが必要ですIFRAME

問題は、メインのcssファイルにすでに20.000を超えるcss行があり、ある時点で何かが上書きされ、Webサイト全体がビッグバンを実行することです。

この新しいWebページには非常に一般的なclass名前idがあり、cssプロパティを持つほぼ100個のタグについて話しています。

encapsulateこの新しいcssプロパティと将来のプロパティへの方法があるかどうか知りたいです。

そして、これを行う方法がある場合、どのようにそれを行うことができますか？

このウェブページで運が良かったので、タグにコンテンツを貼り付け、その直前にstyle type"text/css'タグを使用しました。しかし、私はいつも幸運であるとは限りません。

さまざまな人が作成したcssコードを含むWebページを取得したからといって、プロパティ、名前、またはIDの一部が互いに交差している場合、新しいcssクラスを作成することは公平ではありません。

現在、約10のクラスがありa tag、ほとんどの場合、プロパティは同じです。

4

1 に答える 1

3

ターゲットを絞ったルールを使用して、カスケードに任せてください。ポップアップを、好きなだけ詳細な名前のラッパーに入れます。

<div id="myPopupDivWithCommonIds">
    <!-- rest of popup -->
</div>

そして、cssルールをそのdivにターゲティングします。

#myPopupDivWithCommonIds .error { color: bright-pink; }
#myPopupDivWithCommonIds #main { width: 93.21%; }

などなど。これはcssルールを処理し、新しいものがオーバーフローするのを防ぎます。他のルールがだまされないように注意する必要があります。そのための最善の方法は、定義されているすべてのプロパティを慎重に上書きすることです（Pekkaが言ったこと）。また、それに核を持ち、カスタムの「reboot」または「bootstrap」スタイルシートを含めて、そのすべてのルールを新しいポップアップdivに再ターゲットすることもできます（あなたが言ったように、cssの20k行では難しいですが、別のファイルを含める上記のように#idセレクターを追加することで、divを対象としたリセットルールを使用すると、少し役立ちます）。

ああ、それでも、繰り返されるIDが技術的に無効なマークアップであり、そのページで実行しようとしているJavaScriptに干渉する可能性が非常に高いという問題には対処していません。

これが混乱のように聞こえるなら、まあ、そうです。開発者と設計者はその時点に到達しており、深刻なリファクタリングがなければ、クリーンなソリューションに戻ることはできません。iFrameは、ユースケースではハックまたは不可能に見えるかもしれませんが、正しく予測された問題の多くを実際にクリーンアップします。

于 2013-02-12T20:40:24.357 に答える