CSS Compression

[motlive]

Hi All,

I have just spent the last few hours trying to figure out how to optimise my css server side every time the page is called, and i think ive finally got it working.

however does anyone know the benefits and speed of doing it manually (removing whitespace, tabs and carriage returns) or having a script do it for you server side?

[craig]

Generally i don't see the point in trying to compress around 7kb of data to 4kb of data. It really seems negligable to me.

[motlive]

it has the benefit of not being easy to read, and also when dealing with mobile content is best to break it down as much as possible.

so instead of seeing:

Code: Select all

body {
margin:0;
padding: 0;
height: 0;
width: 0;
z-index; 0px;
border: 300px solid black;
background-image: url('mypicture.png');
}

div {
margin:0;
padding: 0;
height: 0;
width: 0;
z-index; 0px;
border: 300px solid black;
background-image: url('mypicture.png');
}

you get:

Code: Select all

body {margin:0;padding: 0;height: 0;width: 0;z-index; 0px;border: 300px solid  black;background-image: url('mypicture.png');}div {margin:0;padding: 0;height:  0;width: 0;z-index; 0px;border: 300px solid black;background-image:  url('mypicture.png');}

what ive done is that i see it as the first example when editing but when people view it in a browser they see it like the 2nd example.

[craig]

Why is not being easy to read a benefit?

Code should be human readable. If you're worried about copyright, there isn't much you can do about it, if someone really wants to use your code they will, whether it's in one long line or not.

And why is it best for mobile content like that?

If you are going to be designing for mobiles too then create a different CSS stylesheet tailored to that platform.

[motlive]

its something that ive seen google do, and when it comes to mobile content even a few kb can save time and money.

http://www.google.com/ig/mobile

[craig]

From what I can see, thats just inline CSS, there's no style sheet being called :s

[Ryan Fait]

Originally Posted by motlive

its something that ive seen google do, and when it comes to mobile content even a few kb can save time and money.

http://www.google.com/ig/mobile

Google probably does it because they have 10000000000 TB of bandwidth per day. There is no need for you to compress your CSS.

[snow]

optimise my css server side every time the page is called

That sounds like it's putting you'd be putting more of a strain on your server rather than any benefit to the client.

[motlive]

yep thats the conclusion i came to. nice waste of an afternoon

[Ryan Fait]

Haha, it would take a HUGE style sheet to make a server blink.

[motlive]

yep and mine is about 200 lines or so.

i have seen a css sheet which was over 2000 lines long :S that was a little scary.