Question

I am working on an ExtJS4 application – custom reporting application.

ExtJS4 uses terrible graceful degradation principles by automatically falling back all css3 with images and tables (modified markup). Because of this it horribly bloats the already bloated markup and changes all of the gradients / borders with default images.

I am not sure what else it changes besides css3 elements, but here are the app screenshots.

This is IE8:

This is Google Chrome:

…

1. Besides having to inspect all of the markup and undoing these terrible design decisions
2. Besides having to recreate all of their images to match the existing design
3. Besides having to modify the core files to force graceful degradation NOT to happen for browsers that do not support x-nlg, x-nbr, etc.

Update 2012-11-23

Sencha slice:

ExtJS Core Override:

Are there any other ways or settings, javascript or sass, to handle all of these compatibility issues more easily?

Answer 1

So with no avail for an answer I will supply the implementation I took.

As you can see above, this complex ExtJS 4.1 application has a complex design. The sencha slice tool did not work whatsoever (It does work however if you want to keep the all sencha defaults and just change the application’s base color, possibly base SASS variables?).

On the other hand, you can see how beautiful the Ext overrides turned out. A pretty solid transition and looks 95% the same (or as Chris Coyier would say, “meh, good enough”).

Below is my implementation:

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');
    }
    ...
});

This implementation is elegant in that:

1. “I” will write cross browser CSS that will work. I do not need sencha to override my CSS with its “smarter”, more terrible, CSS.
2. I understand legacy browsers cannot handle rounded corners — I don’t want them.
3. I understand that IE cannot handle linear gradients — I do not want images by default. I want to use filter:progid.
4. I DO NOT WANT SENCHA TO BLOAT MY MARKUP WITH DOZENS OF CUSTOM IMAGES, DOZENS OF NESTED CONTAINERS, AND TABLES GALORE

gg hope this helps someone