I am looking into delivering an iPhone-specific stylesheet and I came across this:
For example, to specify a style sheet for iPhone, use an expression similar to the following: <link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet"> To specify a style sheet for devices other than iPhone, use an expression similar to the following: <link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet" on this page: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/chapter_3_section_2.html. What I am finding is that I can apply a mobile stylesheet using the first example, but all of my screen stylesheets are still applied. So using the second example I could eliminate this, but my concern is that other browsers will not understand the second example and therefore not render any screen styles at all. What is the preferred course of action here? Can I really inject a media query into all of my link "media" attributes without affecting older browsers? -- -- Christian Montoya mappdev.com :: christianmontoya.net ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [email protected] *******************************************************************
