I recently redesigned webchic.net and wanted to tweak the design to look good on the iPhone. While my first thought was to use a JS style switcher triggered by the iPhone's unique WebKit referrer, I decided on a much simpler solution for now.

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
    href="iPhone.css" type="text/css" rel="stylesheet" />
<!--<![endif]-->

Ultimately, only browsers that recognize screen will understand only, and only the iPhone fits the category of max-device-width: 480px.

On a related side note, I've notice a lot of developers reciting "browser width 320px" in regards to iPhone development. This is a little misleading, since the tilted, horizontal iPhone screen is much more popular when surfing websites and is 480px wide.

webchic.net

Read and post comments | Send to a friend

In the effort to post more regularly, I'm going to start posting these "Good Word" tidbits. The idea is to spread the word of various code tips and tricks that many people may not be aware of. (If you've heard of one before, or use it frequently, give yourself a big pat on the back.) I may or may not post the pros and cons of techniques, but will try to link to some supplementary material.

PNGs are often a favorite file format for icons, button images and all sorts of things. Transparent PNGs are transparent on ANY background color; fantastic for when your background color changes with the season, for example. PNG transparency support is already well-supported in Mozilla (Firefox, Safari), Opera, IE5 for Mac and a few others. Where doesn't it work? IE.

Here's the trick. IE has these semi-useless visual filters, one of which is AlphaImageLoader. Here's how to use it.

<div style="width: 10px;
                height: 10px;
                position: relative;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');"></div>

Messy to use inline, of course. Ideally, you would call the PNG as a background image from your stylesheet and drop the filter call in your IE-only stylesheet.

More info: Cross-Browser Variable Opacity with PNG: A Real Solution [A List Apart]

Read and post comments | Send to a friend