~ overflow ~

Sometime ago i posted a simple css packer which basically wipes out the whitespaces,  new lines and so on. The javascript packer was also included. Although none of those were 100% my creations i’ve improved the way it works by adding a couple of things:

- Caching based on timestamp on files (aka automatic cache expiry on update)

- Packing multiple files into a single one (ex. if you have 100s of jquery extensions you don’t need to pack them individually, packing everything into a single file is faster and smaller)

- Flexible layout for packing IE specific files

Source:

function css_specifics($fn) {
	global $_GET;
	if (isset($_GET['q'])) {
		return str_replace(".css",".".trim(str_replace(array("..","/"),"",$_GET['q'])).".css",$fn);
	} else {
		return $fn;
	}
}

base_defines(array(
	"css_packed" => _is_sadm ? "packed-adm.css" : "packed.css",												// css worked file output
	"css_include_path" => "css/",																											// css base include path
	"css_cache_path" => "css/cache/",																									// css cache path
	"css_compression" => -1,																													// css compression method, -1 = disabled
	"css_copyright" => "/* (c) z3n - www.overflow.biz - rodrigo.orph@gmail.com */\n\n", 	// css copyright notice, will appear on packed verisons
	"css_debug" => 0,
	"css_gzip" => 1
));

$css="";
$_use_cache=0;
$css_packed=css_specifics(css_packed);

$l=(file_exists(css_cache_path.$css_packed)) ? filemtime(css_cache_path.$css_packed) : 0;

if (isset($css_includes) && (!empty($css_includes))) {
	if ($l > 0) { // check last mod first
		$_use_cache=1;
		if (css_debug)
			echo "collected includes: ".var_export($css_includes,true)."\n";
		foreach ($css_includes as $v) {
			$fn=_fn_fix($v{0} == "/" || strpos($v,":\\") !== false || $v{0} == "\\" ? $v : css_include_path.$v);
			if (css_debug)
				echo "checking lastmod for: ".$v."\n";
			if (foo((substr($v,0,5) == "http:") ?
					getlastmod($fn)
				:
					filemtime($fn)
			) > $l) {
				$_use_cache=0;
				break;
			}
		}
	}

	if (!$_use_cache) { // re/pack
		if (css_debug)
			echo "building new cache\n";
		// load all js into one
		foreach ($css_includes as $v)
			$css.=substr($v,0,5) == "http:" ?
					file_get_contents($v)."\n"
				:
					_fs($v{0} == "/" || strpos($v,":\\") !== false || $v{0} == "\\" ? $v : css_include_path.$v)."\n"
			;

		// @Packager.RemoveLine -> nothing

		if (css_debug)
			echo "replacing..\n";
		// perform basic replaces
		$css=str_replace(array(
				"##SITE_FULL_URI##"
			),array(
				site_full_uri
		),$css);

		// compress
		switch (css_compression) {
			case "0": // css tidy - http://csstidy.sourceforge.net/
				require_once("classes/csstidy/class.csstidy.php");

				$x=new csstidy();
				$x->set_cfg('preserve_css',true);
				$x->set_cfg('remove_last_;',true);
				$x->set_cfg('merge_selectors',1);
				$x->set_cfg('optimise_shorthands',1);
				$x->set_cfg('silent',true);
				$x->set_cfg('compress_colors',true);
				$x->set_cfg('sort_selectors',false);
				$x->set_cfg('sort_properties',false);
				$x->set_cfg('discard_invalid_properties',false);
				$x->set_cfg('timestamp',false);
				$x->load_template("highest_compression");

				$x->parse(strip_comments($css));
				$css=$x->print->plain();

				break;
			case "1": // minify - http://www.lateralcode.com/css-minifier/
				$css = preg_replace( '#\s+#', ' ', $css );
				$css = preg_replace( '#/\*.*?\*/#s', '', $css );
				$css = str_replace( '; ', ';', $css );
				$css = str_replace( ': ', ':', $css );
				$css = str_replace( ' {', '{', $css );
				$css = str_replace( '{ ', '{', $css );
				$css = str_replace( ', ', ',', $css );
				$css = str_replace( '} ', '}', $css );
				$css = str_replace( ';}', '}', $css );
				break;
			default: // no compression/invalid
				// nothing!
				break;
		}

		$css=css_copyright.$css; // add copyright notice

		if (css_debug)
			echo "writing cache..\n";

		_fw(css_cache_path.$css_packed,$css,"w"); // save cache
	} else { // use cache
		if (css_debug)
			echo "loading from cache\n";
		$css=_fs(css_cache_path.$css_packed);
	}

	if (css_debug)
		echo "output\n - - - \n".$css;

	_opt_headers(gmdate(_dt_lm,filemtime(css_cache_path.$css_packed))." GMT"); // check/send 304

	header('Content-Type: text/css');

	if (css_gzip) // compress
		ob_start("ob_gzhandler");

	print $css; // final output
}

die;

Usage:

Configure files to be added by:

$css_includes=array(
    "file1.css",
    "file2.css",
    "fileN.css",
    "http://www.remote.com/style.css"
);

Do the link by:

<link rel="stylesheet" href="/lib/css.php" type="text/css">
<!--[if IE]><link rel="stylesheet" href="/lib/css.php?q=ie" type="text/css"><![endif]-->

Assuming you have the source into /lib/css.php and, on this case, you have an exception for all IEs.

Notes:

css_include_path = source of css (uncompressed, commented)
css_cache_path = path to save the compressed css
css_compression = method of compression , -1 no compression , 0 = css tidy, 1 = minify
css_debug = enables step by step debug
css_gzip = forces php to output as gzip

Required:

CSS Tidy

You may also need some functions of my framework, i will post them when i compile a decent common file.

I was looking around to fix bugs on IE opacity settings and found out this article, although the rgba don’t work on ie6 <= , it seemed pretty good for me, not only because it’s less code, but it’s smarter; and it’s also an old thing!

On this sample i will have an some_css class with 50% transparency, on the usual method you need to do lots of statements to be compatible with all major browsers, not only that but this makes things harder when you have elements inside the parent element that shouldn’t be transparent.

Problem:

.some_css {

filter:alpha(opacity=50);
opacity:0.5;
-moz-opacity:0.5;
position:relative;

}

Solution:

.some_css {

background-color:rgba(0,0,0,0.5);

}

Source:

Ove Klykken

Problem:

Firebug skin is white, it’s annoying and it hurts my eyes.

Solution:

I edited myself a bunch of css files and build up a less annoying version, although there’s a lots of borders that still too light, it’s a real relief for me already.

You can download it here.

You should replace the files on the classic skin, they are located inside the document settings/your user/data something/mozilla/extensions/firebug/skin/

Problem:

Having a fixed background may be a problem on firefox if you just declare it like this:

body { background:url(file.ext) fixed; }

Solution:

body { background:url(file.ext) fixed #color; }

Problem:

When you need to build up a page with lots of little images , like the borders, gradients, different backgrounds , slideshows etc. All into the same page.

You probably will have lots of images on the same page, specially if you cut them to save much bytes as you can, however, you might fall into a different issue:

Too many images will make the load slow as well, since browser will open only 2 connections at same time with the server (every connection takes a while to actually start downloading something since it needs to go thuru all the hops and reach the server etc etc), meaning that all that nice optmization you did worth nothing since you got lots of images.

No good!

Solution:

I’ve seen this only one time at fleXcroll script, and many times on old games textures.

The technique used on both is the same, although might not ring a bell for you it’s pretty simple to use, a little complicated to add on css, but will do the work.

picmap png file zoomed

This is a zoomed version of a picmap (I don’t really know a formal name for this that’s how i will call it) png I did, you can see it got transparency and stuff.

The different colors and green lines are just to highlight the different images i merged here, they will be used all in background at the css, meaning that i can have the position easily set.

As you can see on the bottom there’s 2 huge blocks, this is for the horizontal repeat, since i can’t define a fixed area on the image for the browser to pick as pattern for repeat-x (for example) I need to do this. You may think that it would be a waste, since usually, you can do a 1px width image for this type of thing, however, when you merge pictures toguether you’re not only saving the connection delay time, but for some image formats you have a header on the file or a color index that, when merged, became smaller than the separated files.

In the original 2,65kb png, I managed to merge 17 different pictures, that separated were 4,79kb, and yet you can see that there still some space left to add more things if i wanted to.

The css for the top circle (which is actually 4 corners) would look like this:

.bB,.bC,.bD,.bE{height:9px;width:9px;font-size:1px;}

.bB{background:url(img/b.png) 0px 0px;}
.bC{background:url(img/b.png) -9px 0px;}
.bD{background:url(img/b.png) -9px -9px;}
.bE{background:url(img/b.png) 0px -9px;}

Note that all the positions are negative.

Depending on the usage of your picmap you might want to have repeat-y’s for example, so you need to rethink the layout in order to take maximum of it.

For me, i only have repeat-x backgrounds, so I broke it in different formats, gif, png and jpg, doing that I could take the best of each.

Problem:

No decent css/js packers in php

Solution:

Source Here

This CLI based script will compress the input files detecting their formats and placing on a defined folder, easying the automation of multiple files compression.

have fun!

We all know ie sucks a lot, but when it comes to transparent png it’s another level of suckness.

I’m designing a site with those little shadow borders, like 4px in height, the usual ie6< fix:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');

apparently work, but if you look closely, for small height divs it don’t work right.

it assumes that the minimum height is the same height of the font on that div, so how stupid is this?

a work around would be:

.your_happy_class { font-size:1px; }

an interesting fact is that IE don’t support the line-height feature right, so if you were thinking in use this, you thought wrong! hahahah

It’s been a long time i use this trick but i never got time to share it, so here it goes,

there are many different ways to have an specific css command to be interpreted by a IE or FF, but they are complicated some are obscure , other requires you to do a separated CSS file etc etc

here’s my trick:

.someclass {
width:250px; /* this is for FF */
//width:265px; /* this only works on IE */
}

so on FF it will ignore the commented line while IE will override the previous value with the one on the commented line; For some reason this works all IE versions i was able to test, somehow IE really loves to read the //’s , regular /* */ comments are ignored by both browsers.

that’s all.