Monthly archives for "March 2009"

Are HDR images the new velvet paintings?

There’s a great article about designing a font over at “I Love Typography” that’s worth a thorough read.

I love, love, love articles like this: they stick you directly in the mind of the author & give you practical tips for doing something similar, if you’re interested in doing so. Even if you’re not interested in designing a font, the observations that arise from the article will help hone your vision for designing anything.

If you’re a web developer, you’re going to be interested in the fact that Microsoft Internet Explorer 8 has been released.

There’s a lot of good news: it’s passed the Acid2 test & supports CSS tables, making it the last major browser to achieve both of these. Apparently it’s also more secure than previous versions, although that has yet to be fully tested in the real world. Finally, it’s also faster than previous IE versions, although according to Computerworld, IE8 is still the slowest browser based upon SunSpider benchmarks. In my (very limited) experience, IE8 is significantly faster than previous versions—not dramatically so against Safari or Firefox, however—but more importantly I’m grateful that it hasn’t munged up any of my layouts!

What a difference a few years make: when IE7 came out, it’s only real competition came from Firefox (with Opera as well, of course). It’s now a very full field, with Safari & Chrome freely distributed as well. It’s really great to see such strong competition, and it has to be said that the IE team seem to have done a good job on the browser.

It remains to be seen what the new release will mean for IE’s declining market share; I can’t speak to that. For developers, IE6 was pretty odious & IE7 a bastard step-child of a browser, as it only made half-steps towards standards compliance. IE8 has removed support for HasLayout, the code that trips up most developers, including me.

But… the insta-reviews aren’t positive, and although they’re concentrating mostly upon installation problems, the centre of my concern lies in advanced standards support. There’s still a lot of room for improvement from a developer’s point of view. Whilst the other major browsers have passed the Acid3 test, IE8 still fails, and pretty miserably.

Just as important is the lack of CSS3 support. One might argue that CSS3 isn’t a full recommendation yet, but its development was modularised so browser vendors could start implementing portions as they were completed. And on this score, Safari & Firefox roundly beat IE8. I know I’d love to have multi-column & RGBa support across the board. Yet even if IE8 did support these, it’d be years before we could use them with confidence, that is until older IE versions finally dropped off the face of the earth The fact that the IE team haven’t supported them yet means the day is that much farther away.

Maintaining Older Browsers for Testing

If you’re like me, you’ll have multiple slices of Windows so you can test sites against IE versions. To not get tripped up & accidentally overwrite an IE6 or 7 install because of an automatic update, I’d suggest you install the IE8 blocker toolkit.

Something is amiss. From The currency widget in Mac OS X:

A pound sterling equals 0.297 pound sterling? Really?

It looks like Apple’s using Yahoo for their currency widget data instead of… who was it again? In any event, this has been going on for a couple of days. I hope it’s fixed soon!

As a fan of the cool Scriptaculous home page, I was wondering how we could achieve a similar look using pure CSS. It turns out that it’s child’s play.

The circular effect we want to achieve in CSS

NB: to use this effect, you’ll need to be using a browser that’s implemented CSS3’s border-radius. This means Safari & Firefox: other browsers will simply get a square. Because they’re square, man!

For the example, we’re going to have simply a DIV with a paragraph in it.

CSS Circle Effect Definitions

  div {
    width: 10em; height: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    text-align: center; margin-top: 4.5em;
  }

The Explanation

You have to define your parent objec’s height & width & they must be the same (here, 10em). You then employ -webkit-border-radius (or, for Firefox, -moz-border-radius) & define it as half the amount of the height & width. There’s your circle. To get your paragraph looking awesome, align the text centrally.

I’ve placed a HTML/CSS sample here for viewing. Note that I added a border colour to verify that the DIV operates as a proper circle.

For the sample, I defined the P tag explicitly as 1em in height. A small paragraph would be square in the middle of the DIV, which means it would straddle the centre, hence a definition of 4.5em—5em being the centre of our example, 1 em being the height of our P, so we have to nudge the paragraph up by half its height, or 0.5em.

If you wanted to employ this for a real project, you’d have to consider what would happen to the enclosing content of your DIV, however. You’d almost certainly have to define your paragraph to be smaller in height & width than the parent DIV, otherwise your paragraph would bleed over the edges of your circle.

Anyway, some food for thought. Now go & make circles, my pretties!