SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Experiment: Minimizing CSS size using genetic algorithms

    Hi everyone!

    I've been doing a little experiment with genetic algoritms and maybe someone will be interested in the result.

    I've made a Java program that tries to minimize CSS stylesheet by swaping rules. Of course the final rules applyed to a page must not change the look of it.

    I've experimented with this stylesheet.
    Code:
    .left {
    	text-align: left;
    	color: green;
    	margin: 10em;
    	float: left;
    }
    .right {
    	color: green;
    	margin: 10em;
    	float: right;
    	text-align: right;
    	font-weight: bold;
    }
    The program worked with a population of 300 genomes, 2% elitism, 20% mutation, 77% crossover and 1% random genome creation.

    Here is the optimal output stylesheet.
    Code:
    .left, .right {
    	margin: 10em;
    	color: green;
    	text-align: left;
    	float: left;
    }
    .right {
    	font-weight: bold;
    	text-align: right;
    	float: right;
    }
    I'm now experimenting with bigger stylesheets.

    What do you think?
    Annotations support for PHP5
    TC/OPT™ Group Leader

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,785
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    That seems pretty clever to me.

    It's the way I tried to code my stylesheets to minimise the code. Although sometimes it can make it a little harder to debug or change but at times it can save pages of coding.

    On very large stylesheets this could prove very useful for minimising their size.

    Paul

  3. #3
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PAUL: I'm now trying to optimize my code for bigger stylesheets because time and cpu power seem to be a problem now.
    Annotations support for PHP5
    TC/OPT™ Group Leader

  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup, would be very useful. i'm like paul, trying to do optimisation by hand...but having something like this could certainly be of help when trying to squeeze every last ounce out of a stylesheet.

    i'm hoping that you'll manage to code it in such a way that it understands the complete css parsing tree...then it'd be great stuff indeed
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting idea, I'll be keeping an eye on this

  6. #6
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you planing to make it open-source?
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.

  7. #7
    SitePoint Member evronm's Avatar
    Join Date
    Jan 2004
    Location
    nyc
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is GA really necessary

    Johno,

    I tried looking at your site for the answer to this question, but I can't read whatever language that is (Polish? Czech? Dumb American here: I can't tell the difference).

    IAC, Optimizing css files for size is a great idea, and genetic algorithms are cool as hell, but is GA really necessary for this kind of optimization?

    Wouldn't it be simpler and more processor friendly to just collect a count of all directives and consolidate the ones with a count > 1 where the total length of the selectors < the length of the directive?

    You could, of course, play with this algorithm to achieve even greater optimization, and even apply a GA to the algorithms themselves (are you doing this already? Am I answering my own question here?).

    Regardless, great idea, and I look forward to seeing your results. I'd offer coding assistance, but I never learned Java (I use perl almost exclusively, and it seems ideal for this kind of project).

    Thanks,

    Mike.

  8. #8
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by evronm
    Wouldn't it be simpler and more processor friendly to just collect a count of all directives and consolidate the ones with a count > 1 where the total length of the selectors < the length of the directive?
    not really, as to optimise it completely, the processor needs to be aware of how the css cascade and inheritance work (so if a rule is applied to an element, it doesn't need to be specifically re-applied to a child element, unless one of those child elements' parent element has changed the rule...etc etc)
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  9. #9
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JAMESXV7: I can make it opensource but it's my third program in Java so i think its a little messy.

    EVRONM: Its Slovak language. Czech language is almost the same. Slovak people understand Czech but Czech have bigger problems understanding Slovakians.

    No, i'm not using GA for algorithm evolution.

    I have just this genome:
    For one rule i have a field of applied selectors.
    e.g. genome for example optimized stylesheet.
    Code:
    rule id    selector(.left)    selector(.right)  rule
      #1                1                  1              margin:10em;
      #2                1                  1              color: green;
      #3                1                  1              text-align: left;
      #4                1                  1              float: left;
      #5                0                  1              font-weight: bold;
      #6                0                  1              text-align: right;
      #7                0                  1              float: right;
    REDUX: Yes, that is a little problem. I've just made a really simple evaluator for CSS stylesheet so i do not count selector specificity, inheritance, ... for now.
    But the bigger problem now is with computation speed.
    Annotations support for PHP5
    TC/OPT™ Group Leader

  10. #10
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    There are style sweepers out there, which do optimise CSS, use shorthand replacement and CSS Specificity though they tend to be commercial and the e-genetic approach looks fairly interesting.

  11. #11
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, here are the source files. Enjoy the mess.
    Attached Files Attached Files
    Annotations support for PHP5
    TC/OPT™ Group Leader


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •