In response to Mark Pilgrim’s “Pushing the envelope” post, Hans Nowak complains that sometimes semantically correct HTML elements don’t “look good”. So, he tends to use <pre> instead of <code> to designate code fragments in web pages.
The answer, of course, is to just use CSS to make <code> act more like <pre>. Here’s my CSS:
code {
white-space: pre;
}
And here’s how it renders Hans’ code fragment:
def f(x, y):
if x > y:
print "foo!"
else:
print "bar!"
This is how I’d do it too. I’m told IE doesn’t support CSS’s white-space tho. I wouldn’t know for a fact, since I never need to use IE. Mozilla & Opera work better and handle more coding capabilities . Hmmm….maybe this is a good reason to start slapping “works best in Mozilla” or “Viewed best in Opera” phrases/images on websites. I remember when the web used to be filled with “Best viewed in Netscape” images.
I can vouch that it works fine in IE 5.5 and 6.0. I suspect that it IE 5.0 also understands “white-space:pre”, but I don’t know about 4.0.
What’s wrong with using
<pre><code>
var x = z - y++;
</code></pre>?
You don’t have to worry about support for white-space: pre; then, and it’ll work in all browsers that can do <pre>