Lately I was having the “fun” of customizing a website for showing up nicely on the browser, but also on the iPhone / iPod Touch as well. I wanted to do this job without supporting completely new views or html for the mobile device. The solution was, to do some tight customizing of the css-files, in order to show custom portions of content on regular browsers or on the mobile phone. One thing that helps is thinking css-class-definitions just like objects you know from OOP (object orientated programming). Each class got it’s properties, and you can select to show them or not, depending on the device, that is browsing the site. A little bit like adding informed behavior to your plain old html, depending on the browser, that visits the site.

Ok, let’s start! We first need to find out, if the site loads on a mobile like iPhone or not and load custom css, that contains css-data only for the mobile. Follow this tutorial to get a healthy start. It provides a standard-technique to do this task. It’s really simple, it loads a css-file only if the browser-width is smaller than 480 pixels in our case.

Type in

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

CSS loaded!

Okay, now we can load special css for the mobile. One cool feature of css is, that you can “overload” or “override” properties and definitions, like width of containers, sizes of fonts and so on. With that overloaded iphone.css, we can for example put the whole website into a smaller container. So far, no magical wizardry. But soon we may encounter to another magical problem… custom usability!

Pimp up my mobile usability!

In order to provide enhanced usability on the mobile, we may want to modify the structure of the navigation a little bit, for example to fit iPhone needs. In my case I felt, that there should be single navigation-features in the footer on the iPhone, that should not be there on regular browsers. And vice versa: in regular browsers I wanted to have special navigation buttons in the header, that should not be on iPhone, because it would distract the experience. This was a little bit of pain. How can we do this, just without creating special views (html) for this issue, resulting in extra work? I found a quick and easy solution to do so, just with the use of css.

CSS meets OOP?

For the dynamic showing or hiding of content-portions introduced two new css class-selectors: .iphonehide and .iphoneshow. Can you guess what this selectors do? Right, they make elements visible or not on the mobile device. The secret key is, that the .iphonehide is defined in the the iphone.css, that will be only loaded, when you browse the page on the iPhone or iPod Touch. It overrides the standard-css. It’s only called on the mobile browser. And here it is:


.phonehide {

}


Hiding and showing

Now, let’s implement this into our website-html. Say, we want a headline only show up in the regular browser. We do it like this:

<h1 class="iphonehide">Show this only in the browser</h1>

The class .iphonehide does nothing in a regular browser, because it is not defined. If you browse the page on your mobile, the class definition is loaded, resulting in hiding this h1-element.

This is fine and works nicely. But what about the other way round? What if we want to have elements, that show only up on the iPhone, but not in the regular browser? No problem at all. To do so, we assume, that the regular-browser css “always comes first”. The loading of the special iphone.css will only take place on the iPhone itself. Again: the default behavior is the web, while the loading of the page on the mobile device is the “special case”. We can build upon that. Let’s construct a css-class-selector, that enables default web-behaviour. In our regular css-file we write:


.phoneshow {

}


This code defines, that the element will be hidden by default in any case. Let’s implement it:

<h1 class="iphoneshow">Show this only on the iPhone</h1>

This element would be perfectly hidden in the browser. Excellent. To make it show on the iPhone, we override that class in our iphone.css:


.phoneshow {

}


Voila! There we have this element showing up, only on the iphone.

This sort of css-hack, it extremely useful to quickly customize navigations. It is no secret, that especially small mobile devices have special requirements for navigating websites. With this sort of custom css you can fine tune any website for iPhone, iPod Touch or other mobiles, just without having the extra work of making a “completely new website” only for the small devices. It’s a little bit like an object-orientiated approach for doing css. Css is used here, to specify the “behavior” of single site-elemements, in connection with the browsing-context.

Have fun and I hope this was useful for you. Feel free to leave any websites in the comments, that use this approach! And also if you continue to experiment with this or build upon. I’d like to learn from your experience as well!