One of this blogs readers, Dan Humphrey, was helpful enough to let me know that the footer position, in the new design, was not behaving correctly on the iPhone. Sure enough, when scrolling in Safari on the iPhone a position:fixed element behaves like an absolutely positioned element in other browsers. I like the fixed header and footer, and do not want to remove them, but at the same time, I don't want my site looking bad on the iPhone. The solution then is to figure out a way to target a CSS file just for the iPhone. While, you could attempt to browser sniff on the client- or server-side, using HTML and IE conditional comments is a better practice:

Example 1: CSS Targeted to IPhone

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

I believe this was originally proposed by Jeremy Flint, in his article Designing for the iPhone. Looking at the link first, the important part is the media attribute. For the most part only browsers understand the keyword screen and modern browsers the keyword only. A new CSS3 selector, max-device-width, is used and only the iPhone has a value of 480px. This will prevent most older browsers and other mobile devices from serving the CSS file. However, there are versions of IE that will ignore the media attribute. For this reason the IE conditional comment is used:

Example 2: Standard IE Conditional Comment

<!--[if !IE]>
...
<![endif]-->

Unfortunately, only IE understands the IE conditional comment, and it is treated as a comment by other browsers. To serve the link in non-IE browsers we need to wrap the IE conditional comment with regular HTML comments, thereby causing non-IE browsers to ignore the IE conditional comment.

Example 3: Wrapped IE Conditional Comment

<!--[if !IE]>-->
...
<!--<![endif]-->

This way the <!--[if !IE]> and <![endif]--> are both inside HTML comments, so the conditional comments will be commented out by non-IE browsers. In IE, the conditional statement ignores the inside content, including the link and partial HTML comments.

Putting it all together (Example 1), you have HTML serving a CSS stylesheet only to the iPhone.

There isn't as good of a technique to target JavaScript. If you want to target JavaScript specifically to the iPhone, then wrap code targetting the iPhone with an if statment that checks the window.orientation property. This is a new property introduced for the iPhone.

Example 4: JavaScript for the iPhone

if (YAHOO.lang.isDefined(window.orientation) {
	...
}

In my projects, I frequently find the need to absolute position a div somewhere on the page (on Mint.com we things like position popups and autocomplete/menu widgets). At one time absolute positioning elements was a real chore, as browsers treat absolute positioning differently, depending on where the element is in the DOM and the positioning of the parent elements (more on positioning: Position Everything). I needed a technique to that allowed me to position any number of elements absolutely, without having to worry about x-browser hacks. The solution is to insert a 'layer' div as the first element of body, which will parent all other elements needing to be position absolutely.

continue reading article…

I remember hearing about the Canvas tag some time ago, but until recently I had not given it much thought. However, now we have John Resig using JavaScript and the Canvas tag to compile and render the Processing language (Processing.js), and Jacob Seidelin emulating Mario Kart. I have even read opinion articles claiming that Canvas could replace Flash. Although, that is unlikely, all this buzz portends that Canvas is here to stay and may be a big player in the future of the web. Todays article will address: what the Canvas tag is, who supports it, and a basic example of how you can use it.

continue reading article…

Most of the times when building forms, you will have a label either to the left or above the field that the label is associated with. Designers come up with all kinds of crazy ways to handle the layout, but most are not semantic and require browser hacks. In the past, I have used the following markup:

continue reading article…

I came across a slick CSS List Box widget the other day and wanted to share it. The original page was done by Mike Cherim, CSS: List Boxes. I liked how relatively simple the HTML and CSS was, plus the design was very visually appealing.

continue reading article…