DRÄ Studio

Pixel pushing and pencil shavings

Home Blog Projects Wallpapers Themes Fonts


How to implement an iPhone-specific stylesheet

Posted on Wednesday, October 8th, 2008 under Code Design Downloads | No comments

iPhone : Circles of Interest

I am a little late to the game on this, but recently I was creating an iPhone screen optimized version of a site for my personal usage and thought I would share some of my findings.

The Initial

Though Apple recommends through the expansive information in its iPhone Developer Connection to implement CSS3 conditional statements to effectively achieve alternate style-sheets for personal computers and for the iPhone, I wasn’t satisfied with the resulting functionality. Yes, it did allow me to provide a 480px wide version of my design to the iPhone, but strictly using Apple’s sample code left me without a style-sheet for older browsers to fall back on.

Apparently, the “recommended” conditional statements of CSS3 do not degrade to older browsers that don’t support them yet. Sure that is not a major issue, but if I still wanted to provide any kind of design for users of IE 6, I would have had to segment out my CSS rules into 3 separate style-sheets. One would be attached to the page using the traditional link tag (for the older browsers) and the other two (to be loaded using the previously mentioned conditional statements) would have to be comprised mainly of descendant selectors to cascade over the previous stylesheet’s presentation changes. Not to difficult to initiate, but I felt it would be a big pain to continue to maintain … especially for the needs of this particular “project”. Ehem. Moving on …

The Desired

What I found extremely helpful, in the way of an alternate approach, was this article over at Jeremy Flint’s blog, which properly demonstrated how to utilize PHP to “sniff” the User Agent of the browser and once determined whether it was an iPhone or not, provide the appropriate style-sheet.

While Apple does technically suggest not using a sniffing Agent to provide the presentation aspects of your website, I kinda feel their non-backwards-compatible recommendation has a much larger hole in it than the one I am creating by reading the User Agent. And frankly, the fact that I can switch my User Agent on the fly (using the ‘Develop’ menu item in Safari 3.0, this is the method I am going to stick with for now.

Any thoughts or other findings you want to share? I’m all ears. Well … an iPhone too.

Related Posts:

Platinum Sounds
After fiddling with some older older backups, a couple attempts to install from a Mac OS 9 CD and trying to extract files from the "Classic" emulation app, I finally realized that I could get my hands on the original "Platinum Sounds" Apple soundset from Courtney's older IBook G4. Of course, it was mainly so ...
iPhone OS 4.0 Sneak Peak
I had intended on posting about all of the features I am excited for in the upcoming iPhone OS 4.0 software update (of which there are many), but Apple did a nice job of spoiling that with ... More reminders of their continued belief that the HTML5 markup language is a direct equivalent to and a ...
How to customize form elements like Apple
or maybe an even better question: Should I customize my form elements like Apple? Let me explain.The DilemmaUp until recently, I haven’t really worked too directly with the <form> elements, but when finding that I needed to add more screen sizes for the Desktop section of my page on this site (as well ...
Google IO Wallpaper
This afternoon I got a chance to watch Day 2 of Google's IO Developer Event (the Android Keynote, in particular) and I have to say that I was thoroughly impressed. Not only was it great to see such a strong commitment from Google toward an open platform that is working to strongly support Flash, but ...
Harmonious Desktop Residence
The BackgroundDuring a recent lecture in my Deployment of Flash Projects class, while discussing Adobe AIR and trying to summarize the essential parts of desktop User Interface design, I found myself lacking in a over-arching term and general category to which I could attach many of the nit-picky and minute ideas that collectively make for ...

Write a comment

Your e-mail address is never published nor shared. Required fields are marked *






Back to Top