Re: Compressing CSS (single-line rules)

Hi

I guess you are trying to minimise the CSS (and JS) file size to decrease 
download time ?
Turning on Gzip or Deflate on your web server for these files helps a lot, 
i've been able to squeeze files down by a factor of 5 or so, which has sped up 
site speed no end.

One other handy trick is to combine all your JS and CSS files into one large 
file (and Gzip / Deflate that file). I use a PHP script to do this, called by 
the HTML pages. The resulting file can be cached so it isn't hit all the time.

<?php
//multiloader.css.php
header('Content-Type: text/css');
$files = array(
	'file1.css',
	'file2.css',
	//etc etc
);
$files = new ArrayIterator($files);
while($files->valid()) {
	$file = file_get_contents(dirname(__FILE__) . '/' . $files->current());
	print $file . "\n";
	$files->next();
}
?>

(yes, you can also foreach over the array, although that creates a copy of the 
array in memory).

then in your HTML doc:
<link rel="stylesheet" type="text/css" href="/path/to/multiloader.css.php"  
media="screen" />

For CSS you can only combine styles into one file for one "media"  - doesn't 
work combining screen and print CSS together! For JS you can just sandwich 
everything (careful of the calling order of some functions).

You can also go so far as to strip out CR and LF and write some regular 
expressions to remove comments in the resulting file, to cut down on file size 
even more.

This way, the actual CSS / JS files you edit are in human readable format, the 
minimising happens on the fly on the web server.

The Yahoo yslow plugin for Firebug is also a good starting point for frontend 
optimisation.

Cheers
James

On Thursday 09 October 2008 05:34:52 Niko Sams wrote:
> Hi,
>
> You create yourself a simple user script that does this compressing.
> A few regular expressions will do the job.
> You can then integrate this user-script perfectly into quanta.
>
> Niko
>
> On Sun, Oct 5, 2008 at 5:09 PM, Rudy - Italy <[email protected]> wrote:
> > Hello,
> >
> > At home I Quanta is my only choice for editing CSS, at work I have to use
> > Windows and Topstyle. However there is a handy feature called "Style
> > Sweeper" in Topstyle, I wondered if it is possible to achieve a similar
> > functionality in Quanta. It would be enough to convert a stylesheet like
> > this:
> >
> > #bar, #foo {
> >  bar: foobar;
> >  bar2: foobar2;
> > } /* Foo Bar */
> >
> > .foo2 {
> >  bar2: foo;
> > }
> > ...
> >
> > into this:
> >
> > #bar,
> > #foo { bar:foobar; bar2: foobar2; } /* Foo Bar */
> > .foo2 { bar2: foo; }
> > ...
> >
> > without all the silly stuff like combine rules etc. which only messes up
> > the code. Simply remove newlines from the rules, and every rule in a
> > single line, possibly available by keyboard shortcut. Is there a way to
> > easily integrate such functionality?
> >
> > Thanks for any help,
> > Rudy
> >
> >
> > --
> > V

_______________________________________________
Quanta mailing list
[email protected]
https://mail.kde.org/mailman/listinfo/quanta