(Exclusive) Conditional-CSS for Safari Touch

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.


I’m available for hire to consult on and design products and websites. Based in North Wales, I travel regularly to work with clients world-wide.

Available from January 2020

Talk soon

For work enquiries email

Or call us on +44 (0)1745 851848


Stuff & Nonsense Ltd.
Eversleigh, Lon Capel,
Flintshire, North Wales,
LL18 6EJ, UK