May 2nd, 2011 at 1:35 pm

Stablize floating containers with overflow: hidden

A large majority of web designers still uses the CSS property clear: both to stabilize floating boxes in CSS layouts:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<style type="text/css">
		div            { border: 1px solid #444; padding: 15px; margin: 5px; }
		.div1, .div2   { height: 100px; width: 100px; float: left}
		.clear         { clear: both }
	</style>
	<title>Demo</title>
</head>
<body>
	<div class='container'>
		<div class='div1'>div1</div>
		<div class='div2'>div2</div>
	</div>
	<div class='clear'></div>
</body>
</html>

However, there is a much more elegant way to solve the problem – with overflow: hidden. This solution is known since many years, but nobody ever uses it. Instead, everybody is moaning about clear: both.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<style type="text/css">
		div             { border: 1px solid #444; padding: 15px; margin: 5px; }
		.container      { overflow: hidden; }
		.div1, .div2    { height: 100px; width: 100px; float: left}
	</style>
	<title>Demo</title>
</head>
 
<body>
	<div class='container'>
		<div class='div1'>div1</div>
		<div class='div2'>div2</div>
	</div>
</body>
</html>

Why is it more elegant? Because it doesn’t create an extra element, and all CSS properties only influence the behaviour of the elements they’re applied to.

Where’s the catch? There’s none. This works in all major browsers, including IE 6. You can float left or right. You can give inner and outer elements margin, padding, height, width. You can nest floating elements. So why is everybody using clear:both? I don’t know.

My guess is that it is evolutionary. Somebody influential started with bad code, and everybody else just copied it.

Comments: 0 Categories: Code Tags: , , , ,

March 10th, 2011 at 11:08 pm

Batch processing files with YUI Compressor

The YUI Compressor is a phenomenal tool to minimize (and obfuscate, by the way) CSS and JavaScript code.

Here’s a little bash script that will batch-process all JS and CSS files in your project, while preserving a source copy of that file.

#!/bin/bash
 
JAVA="$(which java)"
BUILDDIR="$(pwd)"
YUIJAR="/path/to/yuicompressor-x.x.x.jar"
 
 
echo "Compressing JS and CSS:"
 
for TYPE in js css
do
	for FILENAME in $(find "$BUILDDIR" -iname "*.$TYPE" | sed -e "s|\.$TYPE$||g")
	do
		echo -n "compressing $FILENAME.$TYPE ... "
 
		mv "$FILENAME.$TYPE" "$FILENAME.src.$TYPE"
		$JAVA -jar $YUIJAR  --charset utf-8 --type "$TYPE" "$FILENAME.src.$TYPE" > "$FILENAME.$TYPE"
 
		if [ "$?" == '0' ]; then
			echo "success."
		else
			cp "$FILENAME.src.$TYPE" "$FILENAME.$TYPE"
			echo "ERROR: failed, using original."
		fi
	done
done
 
echo "done."

Note: You will usually first copy your application source to some sort of build target, and then apply this script. Elsewise, you will have to revert the actions of that script when you continue editing your code.

Comments: 0 Categories: Code Tags: , , , ,

December 22nd, 2007 at 3:32 pm

Optimize your CSS

CSS files are the most downloaded parts of a website, as they are usually loaded with every webpage. Also, CSS files usually contain a lot of, from a technical point of view, unnesseccery characters. Therefore it is a good idea to optimize your CSS file(s) for faster loading. A good tool to remove pretty much all spare characters is the CSS compressor, which can reduce the file size of your CSS up to 25%. Of course, you should always keep a “source” version for modifications.

That tool of course is not able to optimize your CSS semantically, this must be done by you. Semantic optimization means that you should scrutinize your CSS file for redundancy. Do you possibly define background-image, background-position and background-repeat separately? Merge them into a single statement like background: #fff url(image.png) top left; — you need the first ones only for overwriting a single other property. (That’s why they are called Cascading Style Sheets.) Same goes for margin, border and padding with their -top, -right, -bottom, -left: Use them only for overwriting. In all other cases, merge them into one statement: For example, margin: 5px 2px; will assign a margin of 5px to the top and bottom, and 2px to the left and right. margin: 5px 2px 3px; will assign a margin of 5px to the top, 2px to the left and right, and 3px to the bottom. And margin: 5px 2px 3px 4px; will assign a margin of 5px to the top, 2px to the right, 3px to the bottom, and 4px to the left.

Other possibilities: Consider using relative paths to images instead of absolute ones. Remove unneeded definitions (or comment them out before sending them through the compressor). Combine multiple selectors in a single one (e.g. if you have #content_left a, #content_right a it could be possible to use #content a instead).

Optimizing your CSS by compression and good semantical style will shrink your CSS by 30-60%. This will make the loading of a webpage from your website noticeably faster, even with a fast connection.

Comments: 0 Categories: Code Tags: , ,