Hybrid View

  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
    7
    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
    7
    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
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,188
    Vote Rating
    102
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      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.

  8. #8
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,229
    Vote Rating
    114
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    The generated CSS file is automatically split on these boundaries in Cmd 3.1.2. Not sure how that fix missed the release notes. Bad coding in the tracking system.

    The content of the output file is replaced by one containing @import statements so the split, if it is needed, is (largely) transparent.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

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

      0  

    Default


    LesJ, we're not using Sencha cmd to build the application. It's just not doable the way it's built. We're only using it to build the stylesheets for the theme (sencha package build).

    Is there any way to exclude components from the final stylesheets just using the package build? Something I could put in the theme stylesheets?

  10. #10
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,229
    Vote Rating
    114
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Quote Originally Posted by Superflippy View Post
    Is there any way to exclude components from the final stylesheets just using the package build? Something I could put in the theme stylesheets?
    The easiest way to get the build you need is to make a fake app and just require the stuff you know you need. The app build of that app will produce a css file and resources folder with the flattened resources.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar