{"id":22,"date":"2010-12-29T01:08:14","date_gmt":"2010-12-29T01:08:14","guid":{"rendered":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/?p=22"},"modified":"2010-12-30T16:05:03","modified_gmt":"2010-12-30T16:05:03","slug":"switching-css-dynamically-without-javascript","status":"publish","type":"post","link":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/?p=22","title":{"rendered":"Switching CSS Dynamically Without Javascript"},"content":{"rendered":"<address><span style=\"color: #ff9900;\">Disclaimer: I&#8217;m sure that there are more efficient, cross browser ways of doing this, my intent is to simply share what worked for me&#8230;<\/span><\/address>\n<p>One of the nice things I discovered about CSS3 is the ability to detect devices and swap CSS files automatically <span style=\"text-decoration: underline;\">without<\/span> any javascript. The following code will enable you to use a different CSS file based on the device:<\/p>\n<div id=\"_mcePaste\"><span style=\"color: #008000;\">&lt;link rel=&#8221;stylesheet&#8221; media=&#8221;all and (max-device-width: 480px)&#8221; href=&#8221;iphone.css&#8221;&gt;<\/span><\/div>\n<div id=\"_mcePaste\"><span style=\"color: #008000;\">&lt;link rel=&#8221;stylesheet&#8221; media=&#8221;all and (min-device-width: 481px) and (max-device-width: 1024px)&#8221; href=&#8221;ipad.css&#8221;&gt;<\/span><\/div>\n<div id=\"_mcePaste\"><span style=\"color: #008000;\">&lt;link rel=&#8221;stylesheet&#8221; media=&#8221;all and (min-device-width: 1025px)&#8221; href=&#8221;ipad.css&#8221;&gt;<\/span><\/div>\n<p>Although I don&#8217;t use it in my app, there are also ways to detect which orientation the device is using (landscape or portrait) and to dynamically apply different stylesheets based on that. <a href=\"http:\/\/www.1stwebdesigner.com\/tutorials\/how-to-use-css3-orientation-media-queries\/\" target=\"_blank\">Here&#8217;s a link to more information<\/a> on that topic&#8230;<\/p>\n<p>So back to the code I did use &#8211; the first line sets the CSS for an iPhone \/ iPod Touch, the second line specifies the CSS for the iPad, and the third line is for webkit browsers &#8211; since I&#8217;m not really worried about optimizing things for desktop browsers, I chose to just point it to the same stylesheet as the iPad.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Disclaimer: I&#8217;m sure that there are more efficient, cross browser ways of doing this, my intent is to simply share what worked for me&#8230; One of the nice things I discovered about CSS3 is the ability to detect devices and &hellip; <a href=\"http:\/\/www.yeschefgame.mkurtz.com\/blog\/?p=22\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-css3"],"_links":{"self":[{"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22"}],"version-history":[{"count":0,"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/22\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.yeschefgame.mkurtz.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}