You’ve probably heard the news by now - Opera is suing Microsoft, saying “Hey, wait a minute! Your browser doesn’t support open web standards!” Basically, they claim that evolution of websites and web applications is being slowed down due to the fact Internet Explorer works a bit differently from the other browsers. They claim too much of the developer’s time goes into fixing code for IE and therefore want Microsoft to support open standards as well as remove Internet Explorer from default Windows installation.

As someone, who has ever done a website, I say I have to agree with Opera. I have spent quite an amount of time fixing some sites to work in IE. But Internet Explorer 7 is quite a step forward. Most IE6 problems are gone, so Microsoft is going into the right direction. And it’s the same with Opera. Version 7 has given me some headaches, but Opera 9 is mostly fine. The difference is, Opera users upgrade more regularly, while IE users don’t. But why is this Microsoft’s problem? As far as I know, they have alarmed their users about a “critical update” to IE7. What more can they do? Prevent IE6 from working all together (I wish…)?

I do realize Opera supports more open standards than Internet Explorer, but it’s not all that perfect, really. I think this quote from Kenny Graham at the web standards group describes the situation nicely:

How do you legally distinguish “standards-compliant” from
non-compliant anyway? IE is clearly the worst of the bunch, but I’m
not aware of a browser that doesn’t have any rendering bugs. Would
the requirement be “be at least as compliant as opera”? And if so,
how do you measure that? Acid2? Number of CSS selectors understood?
And which standard? IE renders HTML 3.2 pretty well, if not
perfectly, 4.01 like crap, and XHTML (as xml) not at all.

Microsoft has already had to remove Media Player from the default Windows installation, and now they’re asking them to remove Internet Explorer as well? For the end user this means his or her computer can’t play movies, nor surf the web… Great. From what I can tell, Opera is just being a bit jealous of Microsoft’s market share. But they’ve worked hard to gain it (no denying that). And as much as I agree that Internet Explorer is actually slowing web development down, I can’t believe what dirty ways people are using to bring them down - “Support my standards or I’m telling on you!”.

Typography has been one of the main aspects of design ever since circa 3000 BC, when writing was invented. One can make quite some beautiful things by just choosing his font right and styling it correctly. But can we do it on the web? Can we use our own fonts?

Microsoft already solved this problem, way back in 1997. Internet Explorer version 4 brought support for embedding a font into a website, using css. Click here to see what I’m talking about. By using a special program, such as WEFT one is able to embed any True Type font with proper permissions into a website, by converting it into a .eot format. Nifty.
Let’s look at the css that does it. This is the main font style:

@font-face {
font-family: Piefont;
font-style: normal;
font-weight: normal;
src: url(PIE0.eot);
}

This would define a new font-family Piefont. It can be used as any other font:

p { font-family: Piefont; }

This would render all paragraphs in the font PIE0.eot. Now for some demos (IE screenshots lack font anti-aliasing, this is not necessarily always so):

• Demo 1 shows a simple page with an embedded font. See how it renders.
• Demo 3 illustrates what we can achieve by using special fonts. See screenshot.

Now this is great, I hear you say. Sure it is… for Internet Explorer users. But it doesn’t work in any other browser.

And what does W3 have to say about this? Well they defined very similar (if not the same) support for font embedding in CSS2, but it was removed by CSS 2.1, due to lack of browser support (or so they say). It’s being reintroduced in CSS3.

What about browser support? Currently font embedding is only supported in Internet Explorer, using the way described above. The w3 way, using True type fonts, however, is not supported anywhere.

I also recommend reading this ALA article for what can, or better yet, should be possible with font embedding.

So from a designer’s point of view, it’s a real pity we’re only limited to a few web-safe fonts. It does limit creativity. But from a surfer’s perspective, after seeing all the animated gifs, marquees, background sounds, etc., I’m really glad font-embedding isn’t widely supported.

To summarise what you should know as a developer - Using the simple “font-family: verdana, sans-serif;” to specify a font (and a font family, just in case) is still about the most you can do today on the web. But keep in mind that adjusting the spacing, line-height, etc. can do quite a lot. If you haven’t already, I suggest reading this website for a handful of tips on web typography. You can also use images for special fonts, but it comes with usability deficiencies, such as lack of font-size adjustments, broken searches and low quality printed pages.

There are numerous hacks on how to isolate some css rules from various browsers. But most of those ie6 hacks fail on ie7. Microsoft did obviously make some fixes here.

Many developers warn us not to use css hacks, instead we should use conditional comments. For me, these are really not the best option, for:

1. Version comparisons fail with multiple explorers installed (or at least they do for me)
2. I don’t like the idea of having extra html just because IE is a “special” browser. extra css.. ok. It’s the css that doesn’t work correctly in explorer, not html.

So I’ve been struggling to find a css hack, that would validate. There are quite a few out there, but most of them don’t work very well. So I’ve stumbled upon this website.

And this is the hack I liked:

*:first-child+html {}

This will only target html tag in IE7 (confirmed not to work in FF2, safari 2, opera 7 & 8 & 9, IE6). What it does is it targets every html tag, which is preceeded by some other tag, that is the first child of any third tag. We all know (or atleast we should) html is the topmost tag of our page and it has no preceeding element. Luckily, explorer doesn’t know that. And by adding some fancy selectors, we confuse IE6 and lower, so they won’t apply any rules.

Needless to say, we can address any element, not just the html element by knowing some css. For example:

*:first-child+html div { background:red; }

will make all divs in IE7 have a red background.

Word of cation though - if you want to apply rules to IE7 and IE6, you can not just put hacks for both in the same line. For example:

*:first-child+html, * html { /* rules... */ }

won’t work in IE6, while

*:first-child+html { /* rules... */ }
* html { /* same rules again... */ }

will.

So we all know internet explorer has a few rendering ssues. A big issue for many developers is the inability to show alpha opacity in png images. Of course, this has been fixed in IE7, but not everyone has switched yet.

So here’s a little css hack that allows IE6 and IE5.5 to show PNG’s alpha transparency. See the source for the details. We declare the background twice. Once for IE (with filter property, which is IE only) and once for all other browser, where hacks are not necessary. IE6 does not recognize the > css selector, so it doesn’t get confused by the background property. Sadly, the css won’t validate due to the filter property.

update: If anyone is interested in reading some more on this topic, A List Apart has an article dealing with the problem. It gives a more detailed overview on png and its problems and shows how to use javascript to determine which browser is used and fix the png images accordingly. The article is a bit old, so keep Internet Explorer 7 in mind when applying these hacks.