私は自分のWebサイトにEricMeyerのreset.cssを実装しており、うまく機能していますが、少し問題がありました。これにより、CMSユーザーは記事のコンテンツを自由にフォーマットでき、CSSをリセットするとテキストのフォーマットがリセットされます。
reset.cssの継承が動的コンテンツに伝播するのを防ぐ方法はありますか?
入力するだけで大歓迎です。
私は自分のWebサイトにEricMeyerのreset.cssを実装しており、うまく機能していますが、少し問題がありました。これにより、CMSユーザーは記事のコンテンツを自由にフォーマットでき、CSSをリセットするとテキストのフォーマットがリセットされます。
reset.cssの継承が動的コンテンツに伝播するのを防ぐ方法はありますか?
入力するだけで大歓迎です。
それは常に伝播します (これが reset.css のポイントのようなものです :)) が、まだそうしていない場合は、もちろん、reset.css がページにリンクされた最初のスタイルシートであることを確認する必要があります-任意のカスタム スタイルその後、リセットされたスタイルをオーバーライドします。
問題がスタイルが「リセットされすぎている」ことであり、動的コンテンツに対してより賢明なデフォルト セット (重み付けされたフォント サイズ、マージン、行の高さなど) が必要な場合は、独自のベースライン CSS スタイルを作成して、たとえば、ID セレクターを使用して動的コンテンツ領域にのみ適用します。
Eric Meyer 自身がCSS リセットページで次のように述べています。
ここで示すリセット スタイルは、意図的に非常に汎用的です。たとえば、 body 要素にはデフォルトの色や背景が設定されていません。自分のプロジェクトでこれをそのままの状態で使用することは特にお勧めしません。特定のリセットベースラインに一致するように、微調整、編集、拡張、または調整する必要があります。ページやリンクなどに好みの色を入力します。
言い換えれば、これは出発点であり、非接触性の自己完結型のブラック ボックスではありません。
見てみると、CSS リセットが少しやりすぎていることがわかります。したがって、問題が発生しているアイテムに合わせて微調整します。たとえば、テーブルで問題が発生している場合は、テーブルを対象とする CSS リセットの一部を削除してブラウザーのデフォルトのままにするか、リセット後に独自の CSS を追加して、独自のテーブルを具体的にスタイル設定します。仕方。
私はそのような問題を抱えていました。そのための私の解決策は、WYSIWYG エディターによって生成された動的コンテンツを、独自のクラスを持つ div にラップすることでした。そのクラスに対して、標準属性を持つリセット スタイル シートを作成しました!
元。:
div.wrap_to_prevent {スタイル、スタイル、スタイル}
div.wrap_to_prevent 入力、
div.wrap_to_prevent テキストエリア、
div.wrap_to_prevent h1 {スタイル、スタイル、スタイル}
.
.
等
基本的に、私はリセット スタイル シートを使用しましたが、すべての css スタイルの前に div のクラスを配置しました。これにより、その div 内のコードに影響を与えるだけで、そのコンテンツに新しい一連のルールが作成されます。
私のプロジェクトの 90% は WYSIWYG エディターを使用しているため、このソリューションで同じ問題を回避できました...
これでうまくいくかどうかはわかりませんが、試してみてください!!
CMSはインラインスタイルを作成しますか?その場合、これらはreset.cssファイルのスタイルを上書きする必要があります。
CMSに独自の.cssファイルが含まれている場合は、生成されたhtml出力のreset.cssファイルの後に表示されることを確認してください。
CSS リセットを使用する必要がある場合、これを回避する唯一の確実な方法はiframe
、動的コンテンツに要素を使用することです。sの主な問題iframe
は、ドキュメントのサイズに応じて高さを自動的に調整できないことです。それを回避できれば、これが最も手間のかからないアプローチだと思います。