Travis Miller » Browser Issues

Conditional comments for iPhone

admin — Mon, 26 Oct 2009 19:31:38 +0000

You're probably familiar with IE's conditional comments. They allow us to feed special code to that special browser to overcome its many bugs and deficiencies.

Is there something similar for iPhone? Not exactly, but we can achieve the same end:


	<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

Some versions of IE will apply stylesheets regardless of the media attribute, so the conditional comments are here merely to tell IE not to use this code.

As for the value of the media attribute: not all browsers understand the "only" keyword; they will simply ignore this line. Of those that do understand it, the only one width a max-device-width of 480px is the iPhone.

(So I'm told. I'm taking all of this on faith. But it seems to work.)

Three essential Firefox extensions for web developers

admin — Wed, 05 Aug 2009 23:02:53 +0000

Firefox is beloved by web developers for its compliance with W3C standards, its open-source nature, and its general awesomeness. But its vast library of genuinely useful extensions and Greasemonkey scripts is surely a big part of the attraction, too. Here are three that I couldn't live without.

You probably already know about the Web Developer Toolbar, but if you don't, trust me—go download it now.

Its most valuable feature is the ability to view the generated source of a page—that is, to see the HTML as it exists at the current moment, including any changes that have been made via JavaScript. It's absolutely indispensible for any kind of AJAX-ish work.

It can do a lot more than that, though—with a couple of clicks, you can validate documents, see what your page looks like at different resolutions, quickly view or delete cookies from only the current domain or path, view overlays which reveal various aspects of the document (such as the names of form fields or information about links), disable images or CSS, autopopulate forms to accelerate testing, and much more.
JSView. How many times have you needed to view the stylesheets or JavaScript files that are used on a page—and had to hunt through the page source for the filenames, so you could cobble them together to get a complete URL?
JSView adds a submenu to the context menu which lists all stylesheets and JavaScript files linked to a page, along with the file sizes. Selecting a file from the menu will display the source in a new window. What JavaScript library are they using on that page? How did they get that effect with CSS? JSView makes it easier than ever to find out.
Live HTTP Headers. Very handy when you want to see exactly what the browser and the server are saying to each other—complete with HTTP status codes, POST data, and request and response headers.
It's helped me to diagnose obscure bugs, to understand the workings of third-party web applications (such as when working with Microsoft products, which tend to freak out if the headers aren't set exactly as expected), to discover the URLs of embedded media files so I can download them (even on sites which obfuscate the URLs through various means), and more.

Styling horizontal rules in Internet Explorer 6 & 7

admin — Tue, 21 Jul 2009 00:48:40 +0000

Scott Klarr has a nice post about the difficulties of styling horizontal rules with CSS—owing mainly, of course, to problems in Internet Explorer.

In short, IE 6 and 7 insist on putting a border around horizontal rules, no matter how you set up your stylesheet.

Scott offers a simple but elegant solution which relies on jQuery. That's fine if you're already using jQuery in your project, but if you're not, it's hard to justify the extra payload to fix a simple cosmetic issue.

I've written a standalone version of Scott's script. At less than 350 bytes, it's a very lightweight solution, and it's easy to implement. Here's a demo page. As Scott's post explains, it simply replaces all

elements with in the affected versions of IE.

Instructions:

Mark up your pages with semantically correct
tags.
Style the horizontal rules however you like in your default stylesheet. (You'll probably be using a background image.)
Prepare a second stylesheet, which we'll feed only to IE by using conditional comments. It should contain two rules: one which sets display: none; on all elements, and one which describes alternate rules for div.iehrfix. You can use the demo stylesheet as a starting point.
Download iehrfix.js.
Place the following code in the of your document:

That's it! Browsers other than IE 6 and 7 will completely ignore the added code. IE 6 and 7 will execute it on page load; if JavaScript is disabled,

elements will simply be hidden altogether. (IE 8 handles horizontal rules correctly, and doesn't need the fix.)