(Exclusive) Conditional-CSS for Safari Touch

  • Words: Andy Clarke

Want an easier way to re-style and optimize your pages to work better in Safari Touch (or Mobile Safari if you prefer) on the iPhone or iPod Touch? I did and now with a custom version of Allan Jardine‘s Conditional-CSS I have it. And you do too.

I was intrigued by Conditional-CSS when I read about it a few weeks ago. Put simply, Conditional-CSS takes the concept and syntax of Microsoft's proprietary conditional comments, you know the ones;

<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" 
type="text/css" media="screen" />

and extends them to other browsers. But it gets better. With a little server-side parsing behind the scenes, Conditional-CSS allows you to place your browser conditional CSS styles within your CSS style-sheet instead of in the <head> of your document.

As Allan Jardine explains.

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

Targeting specific browsers or even versions of a browser requires only a conditional [if browser/version] statement in your CSS.

Let's imagine for a moment that you need to style a div element differently for Firefox than for Safari or any other browser. Conditional-CSS makes that easier than slipping on grease covered underpants. Declare in your style-sheet:

#branding  { background-image: url(branding.png); }
[if Gecko]#branding { background-image: url(gecko.png); }
[if Webkit]#branding { background-image: url(webkit.png); }

Conditional-CSS includes conditional statements that enable you to target versions of Internet Explorer (including Mac and IE mobile), Gecko based browsers, Webkit based browsers, Opera and even Playstation Portable. Delve deeper into Conditional-CSS and you will find that it also enables you to target grades of browsers in the way that Yahoo outlined as Graded Browser Support.

Conditional-CSS works. In-fact, it is as bomb-proof as wearing a steel hat in an concrete bunker.

Conditional-CSS for Safari Touch

When I set out to optimize For A Beautiful Web for Safari Touch, I found plenty of ways to feed specific CSS styles to my pocket's new best friend. Some used CSS3 Media Queries, others preferred more work on the server-side than I was inclined to do. Then it occurred to me that Conditional-CSS would be the perfect way to supply Safari Touch with optimized styles, all from within my main CSS file.

Unfortunately Conditional-CSS did not include conditional statements for Safari Touch, but soon after a conversation with Allan Jardine, the files were through my inbox and up on my server.

The Conditional-CSS php file (there are versions for C and C# available too) sits in the same directory as my other CSS files. Now when I need to feed specific CSS styles to Safari Touch I simply prefix the [SafMob] conditional statement to my CSS declarations.

#content-main  { float : left; }
[if SafMob]#content-main  { float : none; }

I will be playing with optimized Safari Touch styling much more now that Conditional-CSS has simplified the process and there is a Safari Touch version of the design in the works too. But for now, if you have an iPhone or an iPod Touch, tap on that Safari icon and load up For A Beautiful Web.

Contact us


Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ

(Here’s a map showing how to find our studio.)