How to implement an iPhone-specific stylesheet
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.
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 …
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.
- 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 &lt;form&gt; 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 ...