kaioa.com

Interchangeable presentation

You know the drill

If you didn't ignore the web for the past few years, you've probably heard it a million times by now: separate your content and presentation, use CSS for presentation, and say yes to semantic markup. There is no doubt that it's the right thing to do, given the sheer amount of benefits.

In a nutshell: it makes your life easier by lumping those pieces together which belong next to each other. It's somewhat akin to the proximity usability rule. It also keeps the noise down; if you want to change parts of the presentation there are no content bits in the way and vice versa. There is also a lot less overhead since those style sheets can be cached on the client side. In extreme cases it can save as much as 200kb of utterly pointless bloat. Additionally, proper CSS usage also paves the way for the ultimate killer feature: interchangeable presentation.

Decisions, decisions...

Legacy Ball Chains

A few weeks ago when Microsoft announced their "opt-in for the default behavior" strategy I was disgusted. Quite frankly I still am. As I see it it's just another scheme to pave the way for more legacy cruft. Don't get me wrong, I'm not disappointed. After all it's what Microsoft always did, but the way they did that - pretending they are doing everyone a favor - was just a bit too annoying. Why can't they do the right thing? Just once.

"Backward compatibility", they say. But wait a minute - don't we already have a tool for that? Yes, we do. Conditional comments (another Internet Explorer specific thing) are used for this kind of things for a couple of years. In a nutshell: you create a website with a good browser (i.e. not IE), and then you work around IE's issues with override style sheets targeting specific IE versions.

The strategy was always to lean forward; fix the issues of the current and previous IE versions and hope that the next one doesn't need extra workarounds. Back when IE7 was released that didn't really work out, because it still had some of IE6's problems and a few new ones on top of that. I should have seen that coming.

Since Opera 9.5 started to support :last-child, I changed the markup/styling of the reports generated by my PNG batch processing utility. Finally the markup was down to an absolute minimum. There wasn't even a single extraneous character (except for new lines... for the bare minimum of legibility). I was really happy with the simplicity/elegance and lived happily ever after.

Well, not quite.

Two hours ago I did a checkout and after the tool processed the 2 new/changed files I took a look at the report. Instead of 682 rows there were now 684 rows, which happens to be just enough to trigger the bug on my machine. Firefox doesn't render the page in one go anymore, and whenever it stops elements which happen to be the last element right now get the :last-child rule applied. It stays this way even if the layout changes (e.g. by loading the rest or via JavaScript).

As I mentioned earlier the upcoming release of Opera 9.5 comes with 2 long awaited features: SVG as background-image (CSS), and SVG via <img/>. The alpha versions were buggy all over the place, but the freshly released beta seems to be pretty stable.

So, what is it good for? Good question. I also wondered about that. This is what I came up with:

svg_demo.html (screenshot)

Be sure to check out the the resize and zooming behavior. It's pretty nifty.

This is truly awesome stuff. The latest snapshot of Opera 9.50 allows you to use SVG in img elements and via CSS (demo) as well.

The Mozilla guys are also on this for a while. With some luck we'll see those features in Firefox in a few months, too. Unfortunately it looks like it will be somewhere after the FF3 release. I really hope that they'll hurry a bit with these features.

I read some article, which mentioned CSS' text-transform a few hours ago. That made me remember using PHP's ucwords for the title tag. "Hey, I could have done that with CSS instead", I thought. For a split second that is. Obviously it's a silly idea – search engines won't give a damn and will display it in lowercase on the results page either way.

But in theory it should work, right? It's just another element in the DOM and JavaScript can also change the title.

Well, it doesn't work. Neither Firefox, Opera nor IE will apply any text-transform or change/add something to the content.

At one hand that asymmetry is a bit unexpected, but on the other hand it would be also really weird if it would work, because it's amazingly pointless and no one should ever do that.

Who wants a forgiving parser anyways? You write something with semi-broken syntax and test it in forgiving browser X and then it doesn't work in less forgiving browser Y. I fail to see what's supposed to be good about that.

It only wastes time.

Take this piece of css for example:

#something{
  background:transparent url(image.png)4px center no-repeat;
}