(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" />
<![endif]-->
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.