How to make desktop browsers ignore the iPhone css3 media query

Question

i'm including an alternate stylesheet for iPhone/iTouch devices. Initially i wanted to simply use the handheld media type:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?>

which i add to the DOM document thusly:

//Add handheld stylesheet
ProcessingInstruction pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'");
doc.InsertBefore(pi, doc.DocumentElement);

//Default css, for everyone else
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage.xsl' media='all'");
doc.InsertBefore(pi, doc.DocumentElement);

Unfortunately, the iPhone's Safari browser doesn't support the handheld media type. The apple-proposed workaround is to use a CSS3 media query, replacing handheld:

media='handheld'

with a query that detects iPhone-like devices:

media="only screen and (max-device-width: 480px)"

Note: 480px is the width of flipped iPhone (i.e. landscape)

So i include this media type in my stylesheet links:

//Add handheld stylesheet
ProcessingInstruction pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'");
doc.InsertBefore(pi, doc.DocumentElement);

//BUG: iPhone doesn't support handheld media type. Use the CSS3 media query hack
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'");
doc.InsertBefore(pi, doc.DocumentElement);

//Default css, for everyone else
pi = doc.CreateProcessingInstruction("xml-stylesheet", "type='text/xsl' href='/css/homepage.xsl' media='all'");
doc.InsertBefore(pi, doc.DocumentElement);

Which gives the xml:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?>

And all would seem to be good, except that now browsers (ie8, Chrome5) begin using the "handheld" xsl.

"browsers".

Note: Firefox (3.5) doesn't support rendering xml content with xml-stylesheet at all. What's why i don't include it in the list of "browsers".

---

i've tried moving the "all" stylesheet nodes above the iPhone-specific media query:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?>
<?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='only screen and (max-device-width: 480px)'?>

But ie and Chrome continue to use the only screen and (max-device-wisth: 480px) media type.

---

How can i have one stylesheet apply for handhelds, and another apply for "everyone else".

Answer 1

Not very familar with XML implementation, but here's a good article I just read on doing it just with the media attribute (which leaves out IE users), or instead using a javascript.

http://css-tricks.com/resolution-specific-stylesheets/

The short of it is that you ad an ID to the <link> something like:
<link rel="stylesheet" type="text/css" href="main.css" /> <link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

Then use js to determine the browser window size, and depending on what parameters you want to target, you use the ID as a hood to replace the href value with the appropriate stylesheet.