Tag Archives: browsers

How to use @font-face to avoid faux-italic and bold browser styles

Posted on by
Reply

Did you know that if you declare a custom font using @font-face, the browser will try to fake the bold and italic styles if it can’t find them? This is a clever little feature that avoids a scenario where a themer specifies a font and is then confused that bold and italics don’t work, but it can be very confusing if you actually have a bold or italic version of the font. In this article, I’ll walk you through how to properly load your font files to avoid the browser’s faux-italic and faux-bold styles.

Continue reading →

How to use jQuery to target CSS at older browsers

Posted on by
1

On a recent project where I had to support Firefox 3.6, 3.0 and 2.0, I had to find a way to target a specific version of the browser due to differences in the rendering engine. It turns out the easiest way to do this is by using jQuery to detect the browser and add a class to the body tag.

// add a body class for firefox 2.0 only
if($.browser.mozilla && $.browser.version.substr(0,5)=="1.8.1") {
  $('body').addClass('ff2');
}

// add a body class for firefox 3.0 only
if($.browser.mozilla && $.browser.version.substr(0,5)=="1.9.0") {
  $('body').addClass('ff3');
}

The reason $.browser.version doesn’t appear to match is because for Firefox, jQuery actually detects the version of Gecko, the rendering engine. You can see which versions of Gecko line up to which versions of Firefox on this chart.

The dangers of browser detection have been covered in depth elsewhere, but in this case, I feel it’s acceptable because A) we’re detecting a browser version as well as a browser type, and B) we’re targeting old versions of the browser, whose usage in our stats are 5% or less (but for this particular client, we’re obligated to support them anyway). If someone has a better way, I’m open to it. In the meantime, this solved my problem nicely.

Google Chrome Frame for Internet Explorer

Posted on by
1

Long story short, Google released a plugin for IE 6, 7 and 8 that will run Google Chrome (which uses webkit) inside a frame in the IE browser. Now IE6 can be standards-compliant, and all versions of IE get blazing fast javascript and HTML 5 support. Sounds great, but there are some problems, as lifehacker points out:

“The (most) obvious question: Why would I install this plug-in rather than switch browsers to Chrome? The folks at Google point to IT lockdown that won’t allow users to install a new browser; Ars wonders whether such restrictive IT departments would be any more likely to approve this plug-in. If nothing else, it’s a pretty bold move on the part of Google.”

If you’re interested, Jim Ray dug into the details of how it works. Personally, I don’t think this will solve anyone’s IE6 problems, but it’s a fascinating development, and worth keeping an eye on.

“The irony here, as I see it, is that an old, insecure feature Microsoft built to try to beat Netscape is now being used by Microsoft’s biggest current rival to patch IE.”

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.

IE8 Compatibility Mode and IE7 are Not the Same Thing

Posted on by
1

Just so we’re clear, testing your website in an actual copy of IE7, and testing in IE8′s Compatibility Mode are not the same thing. Compatibility Mode does an acceptable job of imitating IE7, and for the average user who’s just trying to fix a site that looks broken under IE8, it’s good enough. However, there are lots of small differences, and if you’re only testing your client sites with Compatibility Mode, it could come back to bite you.

On the IE Blog, Tony Ross published a list of mostly technical differences between the two. Perhaps more useful for web developers is this article by Estelle Weyl outlining some of the presentation differences between the two, such as border handling and box model differences.

Why does this matter? Because I’ve heard some otherwise intelligent web developers (including Microsoft’s Expression Web team, which uses IE8′s Compatibility Mode for IE7 testing) claim that testing will be much easier now, since you can test everything in one place.

To be sure, tools like Expression Web or the old Stand-Alone IE installers are helpful, but don’t fool yourself into thinking that they are an accurate representation of a “clean” IE6 or IE7 installation. To test against those, you’ll still need to resort to more thorough measures like keeping separate machines around, or using the free Virtual PC images for IE6, IE7, and IE8.

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.

Mac vs PC Firefox 3 Add Bookmark Dialog

Posted on by
Reply

Mac vs PC Firefox 3 Add Bookmark Dialog

One major annoyance between the Mac and PC versions of Firefox 3 is the position of the “Done” button on the Add Bookmark dialog. On a Mac, the button is on the right. On a PC, it’s on the left. I won’t comment on which is better, just that the difference breaks my muscle memory and is driving me up the wall, and causing me to lose bookmarks that I think I’ve saved.

The only saving grace here is that “Done” is the default action on both, so what I really need to do is train myself to press Enter on the keyboard instead of mousing over and clicking on the button.

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.