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
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    175
    Answers
    23
    Vote Rating
    13
    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
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  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
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi