Posts Tagged ‘CSS’

Why I don’t hate Internet Explorer 8 (not that I’d ever use it)

Monday, January 18th, 2010

This week’s entry is a double feature about Internet Explorer. Part 1 examined why IE4 was awesome. Read on for part 2, where I’ll admit that I’m grateful for IE8.

Let me start by saying that in general, I find Internet Explorer appalling. The fact that so many people have been supporting an insecure, slow, feature-weak, standards-deviant browser with serious rendering problems and an awful user interface for so many years afflicts my soul with such utter disdain for Microsoft’s line of browsers that I automatically regard every new incantation thereof as an affront to both the web and mankind as a species.

Now that that’s out of my system, I don’t entirely hate Internet Explorer 8. I wouldn’t use it, not with so many better alternatives just waiting to be explored*, but it does offer one massive improvement over its predecessors that I’m very pleased with: IE8 has fantastic CSS 2.1 support.

I’m not making this up.

Check out the standards support table on this page, specifically the secion about CSS 2.1. Look at the massive difference between IE6/IE7 and IE8. Even Firefox 3 and Opera 10 can’t claim the same level of compliance. IE8 isn’t just a competitor when it comes to supporting CSS 2.1, it’s a role model.

This is a big deal.

For the first time ever, web developers can finally count on using standardized CSS to create a modern web experience without having to worry about “how to handle Internet Explorer”. Granted there is still the matter of older versions of IE, but with Windows 7 repairing a lot of the damage done by Vista, more and more users are upgrading to a new OS, and with that, a new browser. Writing cross-browser CSS is becoming easier than ever before.

Of course, many people will argue that simply supporting CSS 2.1 isn’t good enough (and they’re right). Internet Explorer is still way behind its competitors when it comes to newer standards such as HTML 5 and CSS 3. But what if this is just the beginning? Internet Explorer 9 is already well into development, and if Microsoft can turn the hobbled CSS implementations found in IE6 and IE7 into what is now in IE8, who’s to say they won’t be able to step up support for CSS 3 and/or HTML 5 in IE9? In as little as a year or two from now, Internet Explorer may be a legitimate browser for cutting-edge web experiences.

Share some thoughts!

What do you think of IE8? What about Internet Explorer in general?


* For the curious, the browsers linked in that phrase are the ones that were selected to show up in Windows 7′s “browser ballot” in Europe due to antitrust charges brought by the EU against Microsoft’s bundling of Internet Explorer with Windows. Computer World offers a great summary and FAQ on the matter.

What is a Font Stack?

Saturday, October 24th, 2009

Font Stack (n) : A list of several fonts provided from a website to a browser via CSS from which the browser will chose a font with which to render the associated text. eg. font-family: Helvetica, Arial, sans-serif;

This is a pretty simple concept to understand. To show text on screen, the browser needs to use a font, and the way web developers tell the browser which font to use is by making a font stack like the one shown above. The browser will go through the list from left to right, and when it finds a font that it can use, it renders the text using that font. So you put the ideal font first, then the next-best-thing that looks pretty similar, then maybe another back-up or two, then a default like serif or sans serif, which essentially tells the browser to use whatever default font it has of that type.

I was sifting through WordPress themes the other day when I stumbled upon:

font-family: Georgia, sans-serif, Verdana;

Let’s take a moment to go over the various atrocities committed by this abomination:

  1. Georgia is a serif font, while Verdana (and obviously sans-serif) are sans-serif fonts. It’s purely nonsensical to include serif and sans-serif fonts in the same stack — you either want serifs or you don’t.
  2. Browsers choose fonts from left to right, remember? And sans-serif is one of those default fonts we talked about, so it’s guaranteed to always be supported by all browsers. This means that the Verdana in that stack will never be used, ever. There is absolutely no reason to include another font after a default.
  3. One of the notable characteristics of Verdana is that it’s very wide. The wider the font, the less characters will appear on a single line. It’s a terrible idea to include a wide font, such as Verdana, in the same stack as a comparatively thin font, such as Georgia (or Arial, which is a more common mistake) because now the width of your lines, the length of your page, and the general look and feel of your text vary greatly depending on which font is used.

Horrible! But all is not lost; here are a few simple guidelines to make sure you don’t create anything similar:

  1. Never mix serif and sans-serif fonts in the same stack.
  2. Always include a default font, but always put it at the very end.
  3. Always test each font first to make sure your lines break in about the same places and that your text still has the same general shape.
  4. Never guess — the internet is a wonderful place with plenty of resources for the aspiring typophile, use them!