Ethan Marcotte now blogs at Unstoppable Robot Ninja.

Weblog entry:

Box model hack, redux?

In today’s Daily Report, Zeldman eloquently rails against the W3C’s notoriously stingy treatment of Tantek Çelik’s venerated box model hack. In fact, the validator’s snarkiness about media-specific properties was one of the main reasons I stopped using the hack altogether — thankfully, Dave Shea provides some workarounds.

Personally, I’ve never quite understood why it was that Tantek decided to use voice-family in his famous escape sequence:

voice-family: "\"}"\"";

I’d always assumed that one of the reasons that Tantek opted for voice-family was because, well, nobody’d ever use it otherwise. I’m not sure if there are additional reasons that Tantek had in mind, but the hack does appear to work just fine and dandy with font-family, like so:

font-family: "\"}"\"";

I’ve tossed together a revised version of Tantek’s original demonstration, and all seems to be well. I haven’t encountered any real problems with it yet, although Dave Shea notes that the second box is incorrectly sans-serif’d in his copy of Safari 1.0. However, it does seem to make the validator happy (you get a warning, rather than an outright error), and works as intended in the IE browsers — you know, those knuckle-dragging user agents for which the hack was designed in the first place.

Anyway, what do you think? Is this an acceptable, W3C-friendly alternative to Tantek’s voice-family hack? Or, more likely, am I just a raving loon? Let me know.

Addendum: The great thing about the current CSS landscape is that we’ve so many workarounds to choose from. CSS-Discuss and Dithered are two excellent resources that detail dozens of methods to feed different rules to different UAs, each option a fine alternative to Tantek’s original hack.

However, Tantek’s was one of the first publicized hacks — as such, I think Zeldman’s correct in noting that there are thousands of sites that rely upon it. That’s the spirit in which I was offering my workaround; I wasn’t arguing the merits of Tantek’s hack over another, but was instead trying to offer an easy workaround to those already relying upon his famous escape sequence.

However, all of this doesn’t change the fact that the W3C needs our help to improve upon its validators. Get involved, and lend a hand.


Hooray, technical difficulties.

There’s a WordPress issue that’s currently preventing old comments from displaying correctly. Sorry for the inconvenience, but hopefully we’ll be back online soon.