IE 4096 CSS selectors limit per css file

[zhenrong]

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!

[edspencer]

I don't think I've seen this manifest itself anywhere so far...

[zhenrong]

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

@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:

@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!

[edspencer]

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...

[revolunet]

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

[icheasty]

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?