And here is why...

HTTP/1.1: Connections: "Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion."

I read an interesting tweet just now by Sergey ilinsky, saying that his bug report to Chromium was being ignored. A bug that let's you include css only for chrome WebKit browsers, like apple's safari and google's chrome. Look here for the example page., the text is red in chromium WebKit and black in other browsers. The HTML is valid in case you're wondering, so you won't catch it that way.

All you have to do is to write a phony include that only chromium WebKit browser ( today ) will detect and act upon. Like this:

<link type="custom/mime+type"
rel="stylesheet" 
href="css/chromehack.css" />

The type="custom/mime+type" is what does the magic. Chromium WebKit browsers will request the file from the server and add it to the document. What should happen is that browser shouldn't fetch the file or process it for that matter. The chrome team responded with a status: WontFix, which is wrong in my opinion. People will use this to write css to over come chromium WebKit bugs instead of learning what it is they are doing wrong.

The reasoning of the chromium team is:

Darin, given the number of web sites this would likely break I don't think we want to be this strict. If you disagree then I will re-open this.

I think that there is something to be said about this reasoning, but I am one of those people that wants browsers to be very, very strict... I understand that browsers don't want to "break the web", after all, who remembers the outrage that ensued when microsoft released version 7 of IE. A lot of people blamed IE for their own sloppy coding, breaking bad websites.

Why should this be fixed?

A lot of people write css to work around browser bugs, when they should go out and read the specifications. Very often I see people complain about bugs, they have done something wrong in their HTML. So when I see a reaction like the wontfix by chromium I think that a lot of people still will take the easy way out and choose the hack, instead of learning to do it the right way. Not knowing that they are walking a fine line, utilizing a "feature" in a browser which may be fixed at any moment, thus rendering their fixes obsolete.

So I hope that they will fix this soon, after all building browsers to allow sloppy coding is encouraging that very thing in my opinion. And yes, I know that the "we render anything you code, even our own front page garbage" is what made IE6 the greatest browser in it's time. But in the end it slowed down the web, as people were not encouraged to write proper code, but got away with building crap.

Update

Kyle made an excellent point in his comment. This is a WebKit bug or feature. The browser does not do anything wrong, as this is not being specified. So browsers can do what they want with it. He even makes some good points on how we could be using this. Still I am not conviced and urge people not to use this, as it will come back and bite you somewhere...

Some interesting comments Opera's product analyst Phillip Grønvold on the future of flash. I think they are right, flash has it's place. But it's usage for video for example is an excellent example of what you should use HTML5 for nowadays.

"But flash as a video container makes very little sense for CPU, WiFi battery usage etcetera – you can cook an egg on [devices] once you start running Flash on them and there's a reason for that."

Don't get me wrong, flash is great for some stuff, but I even see it for building webforms ( with openLazlo ) and that is just plain stupid.

The best line I think was:

"But at Opera we say that the future of the web is open web standards and Flash is not an open web standards technology"

Opera joins in Jobs v Flash argument | News | TechRadar UK: ""

• Introduction
• Code HTML CSS
• Results
• Screenshots
• Conclusion
• test page

I recently encountered something in my work that kinda baffled me. Apparently some (make that lot) people don't know one fundamental thing about inline and block-level elements.

The fact is that you are not allowed to nest them.

This seems to be a small matter, but it has all sorts of consequences for the styling of the front end. What a lot of people don't get is that if you serve the browser invalid html, which is what you do if you nest a block-level element ( div) inside an inline element (span), you are at the mercy of it. A browser, and lets not name names, has a though job as it is when rendering valid html. What it is supposed to do with invalid code is anybody's guess.

So to test this I created a small test page with some invalid HTML and some simple CSS. What I did is that I nested a block-level element, in this case a div, inside an inline element, a span. Below that I swapped the div with the span. Both examples got a unordered list with one li.

HTML

<span class="foo">
		<div>
			<ul>
				<li>list item</li>
			</ul>
		</div>
	</span>

	<div class="foo">
		<span>
			<ul>
				<li class="">list item</li>
			</ul>
		</span>
	</div>

CSS

I than gave it some simple css, which is below:

	body {
		margin: 0 auto;
		width: 40em;
		font-size: 1.2em;
		font-family: helvetica,arial,sans-serif;
	}
	#test {
		border: 4px dotted #ccc;
		width: 200px;
		height: 200px;
		margin-top: 5em;
	}
	.foo {
		border: 1px solid red;
		padding: 1em;
		position: relative;
	}
	.foo div,
	.foo span {
		background: #dee2ee;
		margin-bottom: 1em;
		padding: 1em;
	}
	span.foo li {
		background-color: #ccc;
	}
	.foo li {
		position: absolute;
		left: 100px;
		top: 5px;
	}
	div.foo {
		border-color: blue;
	}

The results

The results where surprising, some browers tried to interpret the css and succeeded ( in a way ), while others failed in nice and surprising ways. Mind you, I am not blaming browsers here. Let me repeat that:

I AM NOT BLAMING BROWSERS HERE
not even ie6, really not this time.

If you serve a browser invalid HTML, you get everything you deserve, in my not so humble opinion

Screen shots

Let's get on with the screen shots, which I will present without any comment. Again, if you serve a mess to a browser, you deserve all the trouble you get...

• 

  Safari 4 XP and Safari 4 os X

• 

  Opera 10 os X

• 

  Camino 1.6 os X

• 

  Firefox 3.5.3 XP

• 

  Firefox 3.5.3 os X

• 

  Internet Explorer 8 XP

• 

  Internet Explorer 7 XP

• 

  Internet Explorer 6 XP

Conclusion

Always validate your code, it will help you. I know that proper front end developers will do this without thinking and I will agree that using stuff like WAI-ARIA tags will invalidate your code, but when you do that stuff I hope you know your basics. Stuff like this I see primarily in html rendered by some back end system put together by someone who doesn't know what they are doing. I will tell (and have told) you what you're doing, you're overly complicating the work of the front end developer.

I mean, we could work around these quirks, but why should we work to correct mistakes easily avoided? It would only mean adding extra lines of code to the css, thus making it harder to maintain...

My proposition is that we, as front end developers, simply refuse to work with invalid code. It is only a source of trouble and will cause more work which will cut into the budget and so on.

Now my question to you all, do you see this and/or have any nice examples you would care to share in the comments or tell me about on twitter I would love to see them.