Yesterday I had a presentation at the SFUG meeting covering some bits of my rewritten BBML framework (originated from the project laax.com). I’ve tried to share some insights into the technical concept and strategies for CSS parsing, CSS selectors and layout validation.

Picture by Marc Liyanage

It’s been surprisingly fun (I give credits to the beer sponsored by Nemos). People even managed to pretend they’d be interested in what I was prosing, so credit to them too!

I’d also like to mention that there’ll be the swiss flash event soon: Flash at the Lake will not only pamper you with appearances of great national and international Flash enthustiacs, it will also give anybody attending the pleasure to enjoy one of Zurich’s greatest locations with people who don’t think of you as a storm lightning adorer when you sit in the sun twittering Flash into the clear lake. And all that to a fantastic price. Check it out at fatl.ch

So here we go with the presentation (Quicktime so you can enjoy the marvelous effects):

I used to use float:left a lot for my layouts. But it can be a pain in the ass for several reasons – which of them the main may be that the surrounding box doesn’t surround it (so you’d have to come up with some stupid clearfloat-hacks).

Anyway, I recently discovered somewhere a great alternative (you can call it hack too, but then everything a little fancy that’s supposed to work with IE is a hack, isn’t it?).

So while until now I’d have something like this:

.inlinebox {
	float:  left;
	width: 49%;
	min-height: 100px;
}

the new method goes like this:

.inlinebox {
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
	width: 49%;
	min-height: 100px;
	_height: 100px;
}

That’s looks quite more complex. And it certainly is. But it works like a charm on all browsers I’ve tested (IE7, Safari, FF3). _height, zoom and *display are some crappy IE hacks obviously. The zoom attribute by the way is quite interesting, as it activates the hidden (IE only) CSS attribute hasLayout.

It also has some very nice benefits, like the alignement to the bottom…

Example

View Example

	<style type="text/css" media="screen">
		.codeexample span {
			background-color: #68B6FF;
			-webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255, 255, 255, 0.8)));
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			margin-right: 10px;
			margin-bottom: 40px;
			width: 140px;
			padding: 10px;
		}
		.inlinebox1 {
			display: block;
			float:  left;
			min-height: 32px;
		}
 
		.inlinebox2 {
			display: -moz-inline-stack;
			display: inline-block;
			vertical-align: bottom;
			zoom: 1;
			*display: inline;
			min-height: 32px;
			_height: 32px;
		}
 
	</style>
 
	<div class="codeexample">
		<h3>Float: left</h3>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
 
		<h3 style="clear: both;">Inline Block</h3>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
	</div>

Just added a little javascript magic: now you can «zoom into» the code snippets in this blog. The javascript is not very -ehm- reusable because it contains some dirty hard coded style stuff, but hey, it does its job pretty well ;-) (btw: not tested on IE).

So now time to go to Marc’s birthday party. I wish Marc, my favorite code (and soon typo) guru and a good friend, all the best: Rock on!! :-)