2

私はExtJS4アプリケーション（カスタムレポートアプリケーション）に取り組んでいます。

ExtJS4は、すべてのcss3をイメージとテーブル（変更されたマークアップ）で自動的にフォールバックすることにより、ひどい優雅な劣化の原則を使用します。このため、すでに肥大化したマークアップをひどく肥大化し、すべてのグラデーション/境界線をデフォルトの画像に変更します。

css3要素以外に何が変わるかはわかりませんが、アプリのスクリーンショットは次のとおりです。

これはIE8です： 悪い-IE8

これはGoogleChromeです： 良い-Chrome

..。

  1. すべてのマークアップを検査し、これらのひどい設計上の決定を元に戻す必要があることに加えて
  2. 既存のデザインと一致するようにすべての画像を再作成する必要があることに加えて
  3. x-nlg、x-nbrなどをサポートしていないブラウザでは、正常な劣化が発生しないようにコアファイルを変更する必要があることに加えて。

更新2012-11-23

煎茶スライス： 悪い-IE8

ExtJSコアオーバーライド： 良い-IE8

これらの互換性の問題をすべてより簡単に処理するための他の方法や設定、javascriptまたはsassはありますか？

4

1 に答える 1

5

ですから、答えが得られないので、私が取った実装を提供します。

上記のように、この複雑なExtJS4.1アプリケーションは複雑な設計になっています。煎茶スライスツールはまったく機能しませんでした（ただし、すべての煎茶のデフォルトを維持し、アプリケーションの基本色、場合によっては基本SASS変数を変更したい場合は機能しますか？）。

一方、Extオーバーライドがどれほど美しいかがわかります。かなり堅実な移行であり、95％同じように見えます（またはChris Coyierが「まあ、十分に良い」と言うように）。

以下は私の実装です：

Ext.application({
    ...
    init: function () {
        // Override CSS3BorderRadius value which caused render problems in <IE9 when false.
        Ext.supports['CSS3BorderRadius'] = true;

        // Hack-ish remove class sniffers from Ext.EventManager (which attaches modrnizer type classes onto the body)
        Ext.getBody().removeCls('x-nbr x-nlg');
    }
    ...
});

この実装は、次の点で洗練されています。

  1. 「私」は動作するクロスブラウザCSSを記述します。CSSを「よりスマートな」よりひどいCSSでオーバーライドするために煎茶は必要ありません。
  2. 従来のブラウザは丸みを帯びた角を処理できないことを理解しています—私はそれらを望んでいません。
  3. IEは線形グラデーションを処理できないことを理解しています—デフォルトでは画像は必要ありません。filter：progidを使いたい。
  4. 煎茶が自分のマークアップをカスタム画像のドーゼン、ネストされたコンテナのドーゼン、テーブルガロアで膨らませたくありません

ggこれが誰かを助けることを願っています

于 2012-11-20T03:40:35.993 に答える