Im not big on CSS hacks but sometimes there’s a time and a place for one. Safari’s difference in font-sizing is one such area where such a hack becomes useful.
Unlike IE there is no type of conditional commenting that is recognized by Safari and although Safari’s CSS properties are 98% the same as Firefox, it renders fonts as unreadably small.
I’ve tried out a few different Safari hacks but unfortunately none of them worked for Safari Windows (yeah yeah Mac this, Mac that, Im looking for a job and beggars can’t be choosers). Then I found the hack on the Mechanism’s blog and it works beautifully.
Essentially the gist of the hack is this:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
That’s it. Put your full attribute{ value:x;} into the space where it belongs and you’re set to go. Now that was part one of my task. Part two was sorting out the inconsistency in font size. That took me to James Whittaker’s Vertical Rhythm Calculator. The calculation for the base font size is within the post. Essentially take your chosen default font size, divide it by your default line height and multiply it by 100. The result is used as a percentage and you’re sorted. James has kindly made his font size calculator an Adobe AIR download. Go on and download it and save yourself some time.
*UPDATE* I have noticed that this hack is only partially effective. I was using this to correct Safari font size problems and being a hack it also affects the font size for IE. I kept my base font size at 62.5% and the only solution I could find at this moment is using a conditional statement for IE to force it to keep its base size at 62.5%. Not pretty but it does work and saves a lot of headaches. Maybe Apple will consider providing support for conditional statements in future versions of Safari but I’m not holding my breath on it.
Share this Post
