1. #1
    Ext JS Premium Member
    Join Date
    Jan 2011
    Posts
    6
    Vote Rating
    0
    by_lexus is on a distinguished road

      0  

    Default Unanswered: [ExtJS-4.2.0] Building inherited theme: CSS gets too many rules for IE

    Unanswered: [ExtJS-4.2.0] Building inherited theme: CSS gets too many rules for IE


    Hi,

    Can someone confirm the following:

    We're building an inherited theme using Sencha CMD (3.1) for the ExtJS 4.2.0-Neptune Theme. We therefore followed the instructions here: http://docs.sencha.com/extjs/4.2.0/#!/guide/theming
    This worked as expected, it also generated all the needed css files and sliced images.

    After adding some own UIs (using compass mixins from Sencha), our CSS was not working in Internet Explorer (8,9). After a lot of debugging we noticed that at some point, IE just stopped to parse the CSS definitions.

    We then just split our single-file CSS (generated with sencha package build) into 2 files, and voilà, everything was working again.

    After some browsing we found that IE has a CSS rule limitation per CSS file.

    Has anyone seen something similar? Is there a way around it (besides manually split the generated file into 2 parts)? Can the new Sencha Theme builder generate multiple files?

    Any hints would be much appreciated.
    alex

    By the way, there seem to be some rule limitations in IE:
    http://stackoverflow.com/questions/9...s-rules-limits

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,572
    Answers
    451
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    For now you'll need to split the CSS files manually. There are plans to integrate that option programmatically in Sencha Cmd in the future, though.

    If you're building your app with ExtJS 4.2 Cmd will include just the CSS required for the classes used by your app, so that may help with the CSS file size as well.

  3. #3
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    194
    Answers
    23
    Vote Rating
    15
    EPV will become famous soon enough

      0  

    Default


    I'm having the same problem ...

    Anyone with a solution or quick way to split the css?

    Tip (from http://stackoverflow.com/questions/5...r-count-in-css)
    Paste this code into the console to test your app.

    Code:
    var styleSheets = document.styleSheets,
       totalStyleSheets = styleSheets.length;
    
    
    for (var j = 0; j < totalStyleSheets; j++){
       var styleSheet = styleSheets[j],
          rules = styleSheet.cssRules,
          totalRulesInStylesheet = rules.length,
          totalSelectorsInStylesheet = 0;
    
    for (var i = 0; i < totalRulesInStylesheet; i++) {
       if (rules[i].selectorText){
          totalSelectorsInStylesheet += rules[i].selectorText.split(',').length;
        }
      }
      console.log("Stylesheet: "+styleSheet.href);
      console.log("Total rules: "+totalRulesInStylesheet);
      console.log("Total selectors: "+totalSelectorsInStylesheet);
    }

  4. #4
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Answers
    7
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    I built a little node script that splits our css file up into X parts (currently 3 as we were already nearing 8000 rules). It's running in less than a sec i think.

    Not sure if I can share the complete script,
    but roughly I'm building a buffer array for each part,
    from the original data array which I get like this:
    this.fs.readFileSync(this.inputFile).toString().split('}');

    the method for writing the new split up files is looking like this:

    Code:
        buildFiles: function () {
            var file,
                data;
    
            for (var i = 0; i < this.numberOfParts; i++) {
                file = this.outputFolder + '/app-' + (i + 1) + '.css';
                data = this.buffers[i].join('}');
    
                this.writeFile(file, data);
            }
        },
    It works for minified and non-minified CSS files.

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,572
    Answers
    451
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Also, Cmd 3.1.2 is out now and it will split the css files automatically as needed. It splits at every 4095 selectors by default so will split if needed and wont' if it's a smaller app. You can adjust that threshold by editing the build.css.selector.limit property in the .sencha/app/build.properties config file.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  6. #6
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Answers
    7
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Nice! Is it possible to run the splitting for any css file of choice for development?
    Actually would be nice if one could do that on the compass level.

    Thinking about it, I just found this little tool: http://blesscss.com/
    Maybe there are any compass plugins out there.

  7. #7
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,572
    Answers
    451
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I don't believe Cmd will let you pass in an arbitrary css file to split - it's baked into the build process for the app / package.

    But, blesscss is the util I've seen used in the past as well.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com