This is an idea of Jonathan Snook, an web designer and developer that I admire and follow.

He propose a new layout system on extending the CSS property “position” by adding value “:matrix (x,y)”. The Matrix Layouts should be like table-based layouts combined with absolute positioning and without any “hacks” for overflowing.

How this should work? You use the position property to specify where the box should be placed within the grid. Have a look at the following example diagram:

It’s a 3 column design but with a little extra pizzazz in the middle column. I’ve also lettered each section by their source order. Now, let’s look at what that code would look like with matrix layouts:

#a { position: matrix(1,2, 1,4); }
#b { position: matrix(2,2); }
#c { position: matrix(2,3); }
#d { position: matrix(2,4); }
#e { position: matrix(1,1, 2,1); }
#f { position: matrix(1,5, 2,5); }

I think this be a kick-ass CSS feature and I would love to use in my layouts. This will bring so much fun to CSS work and I’m sure that others would love it, but there is long way till it’s really implemented. Also will be good to have the Matrix Layout implemented in a CSS framework.

You can read the full blog post here or the Matrix Layout concept here.

Reading my RSS feeds in the last hour at work I found a super-funny tool that let you create a “Kamu“. IamKamu.com is a website where you can design and print your very own paper toys called Kamu in 3 steps. See example

Behind is a flash application that generates a custom “Kamu” image that your can print. You can select the texture, the face, the eyes, the body, event the mood :)

There is a thing that is missing and that is the possibility to upload your own face or your friends face and use it to create a “Kamu”, anyway give it a try!

Start your create your Kamu!

Why should ads be boring?

Check out this collection of unforgettable advertisements from around the world.

Sometimes reading rumors about the second iPhone is exactly like reading a wishlist of features people want. Whether it’s subconscious or not, the rumors do get us thinking about what we want from a 3G iPhone. In short, we want an iPhone done right. Here’s what we want to make the 3G iPhone faster, better and stronger.

Read more

Child selectors are slower than more simple brethren. Is this true?

This is a affirmation that Jon Sykes sought out data for after he read the work of Jim Barraud.

His conclusion?

The skinny is that child selectors are a major performance issue.

This seemed to make sense, but to me I needed some sort of proof rather than just being told it’s that way by someone, so over the last two days I’ve tried two approaches to see if I can replicate the issue.

The first one was rather a half-assed idea that afterwards seems fundamentally flawed as a benchmark.

So I took a new approach which does seem to return some valid and rather interesting findings, particularly regarding Safari and Firefox 3 and how they react to child selectors and performance.

The tests show that there is slow down using child selectors over direct class name declarations in IE6, IE7 and Safari 3. Safari 3 being the most

impacted by child selectors. Firefox 2 has some impact, and Firefox 3 doesn’t seem to be impacted at all.

That said, this is a very extreme test, it is not often you’d have 20,000 class definitions in a single page or that all of them would use 4 levels of child selector.

Some developers said that .className may not render correctly compared to table tr td.className if you have 2 different rule sets. Since the second is more specific, it will take precedence.

What do you think? If this is true and I will have use more css classes.