1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Singapore
    Posts
    21
    Vote Rating
    1
    zhenrong is on a distinguished road

      1  

    Default IE 4096 CSS selectors limit per css file

    IE 4096 CSS selectors limit per css file


    Hi,

    I search the forum but couldn't find this issue discussed anywhere.

    Has anyone wrote your sass such that it compiles beyond 4096 selectors in the output css file? What will happen is that in IE some of the styles will not be rendered. Its an IE implementation that only the first 4095 or 4096 css selectors (per css file) are recognized and any lines beyond are ignored. Reference: http://blogs.telerik.com/aspnet-ajax/posts/10-05-03/internet_explorer_css_limits.aspx

    I read up on compass compile but couldnt find a solution to split the output css files. I would like to know if anyone has encountered this before and what are your solution?


    Thanks!

  2. #2
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    I don't think I've seen this manifest itself anywhere so far...
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Singapore
    Posts
    21
    Vote Rating
    1
    zhenrong is on a distinguished road

      0  

    Default


    Hi,


    This occurs on my end as i am setting $include-default: true in my .scss. This is still in development so i didnt actually cherry pick the ones i need.


    I then went ahead to add my custom UI styles. I discovered this bug only after trying to create 24 coloured buttons (8 colours x 3 different sizes: S, M, L) by creating a @mixin inheriting the framework's @mixin extjs-button-ui. Here's my codes


    Code:
    @mixin my-small-button(
        $ui,
            
        $border-color: $button-default-border-color,
        $border-color-over: $button-default-border-color-over,
        $border-color-focus: $button-default-border-color-focus,
        $border-color-pressed: $button-default-border-color-pressed,
        $border-color-disabled: $button-default-border-color-disabled,
    
    
    
    
        $background-color: $button-default-background-color,
        $background-color-over: $button-default-background-color-over,
        $background-color-focus: $button-default-background-color-focus,
        $background-color-pressed: $button-default-background-color-pressed,
        $background-color-disabled: $button-default-background-color-disabled,
    
    
    
    
        $background-gradient: $my-button-background-gradient,
        $background-gradient-over: $my-button-background-gradient-over,
        $background-gradient-focus: $my-button-background-gradient-focus,
        $background-gradient-pressed: $my-button-background-gradient-pressed,
        $background-gradient-disabled: $my-button-background-gradient-disabled,
    
    
    
    
        $color: $button-default-color,
        $color-over: $button-default-color-over,
        $color-focus: $button-default-color-focus,
        $color-pressed: $button-default-color-pressed,
        $color-disabled: $button-default-color-disabled
    
    
    
    
    ) {
        @include extjs-button-ui(
            $ui,  
        
            $button-small-border-radius,
            $button-small-border-width, 
                
            $border-color,
            $border-color-over,
            $border-color-focus,
            $border-color-pressed,
            $border-color-disabled,
        
            $button-small-padding,
            $button-small-text-padding,
        
            $background-color,
            $background-color-over,
            $background-color-focus,
            $background-color-pressed,
            $background-color-disabled,
        
            $background-gradient,
            $background-gradient-over,
            $background-gradient-focus,
            $background-gradient-pressed,
            $background-gradient-disabled,
        
            $color,
            $color-over,
            $color-focus,
            $color-pressed,
            $color-disabled,
        
            $button-small-font-size,
            $button-small-font-size-over,
            $button-small-font-size-focus,
            $button-small-font-size-pressed,
            $button-small-font-size-disabled,
    
    
    
    
            $button-small-font-weight,
            $button-small-font-weight-over,
            $button-small-font-weight-focus,
            $button-small-font-weight-pressed,
            $button-small-font-weight-disabled,
    
    
    
    
            $button-small-font-family,
            $button-small-font-family-over,
            $button-small-font-family-focus,
            $button-small-font-family-pressed,
            $button-small-font-family-disabled,
    
    
    
    
            $button-small-icon-size
        );
    }



    And generating the buttons using:
    Code:
    @include my-small-button(
        'red-small',
        ...
    );
    @include my-small-button(
        'blue-small',
        ...
    );
    @include my-small-button(
        'green-small',
        ...
    );

    Not sure if that's the most optimized way to create custom coloured Ext buttons, but what happen is that the number of selectors hit the limit and triggered the bug. I may not need all the coloured buttons nor all the components styling but i am seeing this as a potential problem in the future as i am still early in the development phase for a hugely customized theme.


    Currently, I am manually splitting the files in twos. But was wondering if there are other solutions.


    Cheers!

  4. #4
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Hmm nothing we've developed, perhaps it's something we could add. I'd rather see if we can cut down the CSS of course...
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  5. #5
    Sencha User
    Join Date
    Dec 2009
    Location
    Paris, France
    Posts
    16
    Vote Rating
    3
    revolunet is on a distinguished road

      1  

    Default


    Hi

    The standard ext-all.css has 2539 rules builtin.

    If you extend your theme with some UIs, yo can grow very fast and reach the infamous 4095 CSSrules limit. and spend hours trying to understand whats going on.

    a single custom "extjs-button-ui" is 100 CSS rules, a single "extjs-window-ui" is about 130 CSS rules so it growths very very fast. Just 15 customs buttons and you're done.

    Would be very useful to have a WARNING a the end of compilation to warn the user.

    One workaround is:
    - include the standard ext-all.css in your html
    - create a custom css with only your stuff

    Example .scss:

    // prevent base CSS
    $include-default: false;
    $include-default-uis: false;
    // standard mixins
    @import 'compass';
    @import 'ext4/default/all';
    // your rules and ui
    @import 'custom/default/all';
    NB: looks like this limit is fixed on IE10

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    3
    Vote Rating
    0
    icheasty is on a distinguished road

      0  

    Default


    Hitting this limit with Ext JS 4.2 is very easy.
    EXT Gray theme has

    Rules: 2404 Selectors: 3521

    Add one mixin for a tab panel and the limit is reached.

    The bloat from EXT 3.4 to 4.2 is a bit crazy.

    Does anyone know which scss file should I modify to cut components from the final css file?
    Is there a way to stop EXT4 from generating all of the IE specific markup?


  7. #7
    Sencha User
    Join Date
    Dec 2009
    Location
    Paris, France
    Posts
    16
    Vote Rating
    3
    revolunet is on a distinguished road

      1  

    Default


    You can modify resources/sass/ext-all.scss and modify some variables here.

    you can set at the start of the file one of these

    Code:
    $include-ie: false;
    $include-ff: false;
    $include-chrome: true;
    $include-safari: false;
    $include-opera: false;
    This should save tons of code

    Also in the theme folder, you can tweak the _widgets.scss file to not include some widgets

    Hope this helps (comments based on 4.1.1)

  8. #8
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    3
    Vote Rating
    0
    icheasty is on a distinguished road

      0  

    Default


    Thanks for that, i'll have a look for the 4.2 equivalent tomorrow.

    I also need to find what these are for and can I remove it
    Code:
    /*<if slicer>*/
    /* line 78, ../../../ext-theme-base/sass/etc/mixins/slicer.scss */
    .x-tab-default-top:after {
      display: none;
      content: "x-slicer:stretch:bottom, frame-bg:url(images/tab/tab-default-top-fbg.gif), bg:url(images/tab/tab-default-top-bg.gif), corners:url(images/tab/tab-default-top-corners.gif), sides:url(images/tab/tab-default-top-sides.gif)";
    }
    I don't think these values should be in the compressed CSS

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Location
    Aiken, SC
    Posts
    7
    Vote Rating
    0
    Superflippy is on a distinguished road

      0  

    Default CSS Splitters

    CSS Splitters


    I'm glad to find this discussion! We're using ExtJS 4.2 in a web application and have just run into the 4095-line limit in IE.

    I have found a couple of CSS splitter scripts on GitHub. This one purports to work with Compass: https://github.com/zweilove/css_splitter

    However, I'm concerned about whether or not the application will still be able to find the stylesheets once they've been split. If anyone who understands this stuff better than I do could take a look at this and let me know whether this script would work with ExtJS 4.2, I'd appreciate it.

  10. #10
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,353
    Vote Rating
    136
    LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all

      0  

    Default


    If you use Sencha Cmd to build your application, the production optimized CSS file will not contain rules for components that you don't use in your application. This reduces the number of rules in your CSS file.

    For example, if you don't use the Slider component, you will not see any slider specific CSS rules.