過去数年間、私はEric Meyer の CSS resetsを使用してサイトを開発してきました。私はそれが大好きで、決して振り返ることはありません。振り返ろうと思ったこともありません。しかし、今日、Telerik Rad Editorコントロールを実装しました。残念ながら、CSS をリセットすると、Rad Editor の内部レイアウトも壊れてしまいます。リセットが Rad Editor にカスケードするのを防ぐ方法はありますか?
前もって感謝します。
過去数年間、私はEric Meyer の CSS resetsを使用してサイトを開発してきました。私はそれが大好きで、決して振り返ることはありません。振り返ろうと思ったこともありません。しかし、今日、Telerik Rad Editorコントロールを実装しました。残念ながら、CSS をリセットすると、Rad Editor の内部レイアウトも壊れてしまいます。リセットが Rad Editor にカスケードするのを防ぐ方法はありますか?
前もって感謝します。
私たちのアプリケーションでは RadEditor を広範囲に使用していますが、同様の問題が見つかりました。私はほぼ 2 年間エディターの CSS コードを使用してきましたが、これらの問題をかなり簡単に克服できることがわかりました。
まず、エディターにカスタム スキンを使用していますか? これは、これらの問題を克服するための最良の方法です。そうでない場合は、既存のテーマをコピーして名前を変更するだけで追加できます。これにより、Telerik アセンブリに埋め込まれているスタイルシートをオーバーライドするのではなく、外部ファイルで CSS を変更できます。
その後、どのスタイルが問題を引き起こしているかを特定するのは簡単なことです。あなたのコメントから、ボタンが正しくレンダリングされていないと推測しています。おそらく、リセットされたスタイルシートがデフォルトのリスト スタイルを上書きしているためです。リセット ファイルがスタイルシートで定義されたスタイルをオーバーライドしている場所を確認するには、firebug を使用します。
ほとんどの場合、リセットされているもののスタイル定義がまったくないためです。Telerik スタイルシートで定義されているものは、先行するクラス名が含まれているため、リセットされたスタイルよりも具体的であり、CSS の特異性が10.
詳細をお知らせいただければ、さらにお役に立てれば幸いです。
CSSには「除外」ステートメントがないため、ほとんどありません。スタイルシートのリセットによって削除されるものを再導入する必要があります。
しかし、経験上、失敗の原因は 1 つまたは 2 つの問題にあると確信しています。合理的な時間内にそれらを調べて修正できる場合があります。
要素のデフォルト値を確認し(要素のみを使用してスタイルなしのページを作成し、FirefoxのDOM Inspectorで確認します)、スタイルシートの最後にルールを!important
追加し、すべてのルールに追加します。
要素で開始されたスタイルを理解しようとしている場合は、人気のあるブラウザのデフォルトのスタイルシートの1つを参照できます。たとえば、HTML用のWebKitのスタイルシートです。マークアップから、いくつかの要素に絞り込むことができると思いますか?
編集:これがGeckoのものです。
iframeを使用して、CSS コンテキストを表すことができます。しかし、それはいくつかのことを難しくします。
いいえ。これは、CSS リセットに固有の問題の 1 つです。
それは1000ドルのコントロールですか?おそらく、CSS リセットと互換性があるように電話して要求する必要があります。
リセットにより、Transitional HTML の廃止された属性の一部が使用できなくなりますが、「業界最高の」エディターはこれらに依存すべきではありません。それ以外はすべて、適切なスタイルシートで修正できます。
実際には、RAD エディタが読み込まれるときに参照する特定の CSS ファイルを指定できます。リセットによって削除されるものを追加する CSS ファイルを作成するだけで、RAD エディターだけがその CSS ファイルを参照します。
たとえば、このエディターは、ページに読み込まれるときに「radEditor.css」という特定のファイルを参照します。
<telerik:RadEditor ID="RadEditor1" runat="server" AllowScripts="True">
<Content>
</Content>
<CssFiles>
<telerik:EditorCssFile Value="~/css/radEditor.css" />
</CssFiles>
</telerik:RadEditor>
頑張ってください。これが役立つことを願っています。
参考までにここに追加しておきます。Twitter Bootstrap は、ほとんどのボタンを非表示にします。これが修正です。EditorCssFile は、エディターの背景色を白に戻すために使用されます。
<style type="text/css">
.telerik img {
max-width:none;
}
</style>
<div class="telerik">
<telerik:RadEditor ID="RadEditor1" BackColor="White" ToolbarMode="RibbonBar" runat="server">
<CssFiles>
<telerik:EditorCssFile Value="/assets/css/editorContentArea.css" />
</CssFiles>
</telerik:RadEditor>
</div>