{"issue":{"milestone":null,"user":{"id":39191,"login":"paulirish","url":"https://api.github.com/users/paulirish","avatar_url":"https://secure.gravatar.com/avatar/ffe68d6f71b225f7661d33f2a8908281?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"ffe68d6f71b225f7661d33f2a8908281"},"title":"Revert mobile-first media queries and remove respond.js","created_at":"2011-10-18T02:22:51Z","updated_at":"2011-12-19T21:33:52Z","labels":[{"name":"css","url":"https://api.github.com/repos/h5bp/html5-boilerplate/labels/css","color":"DC5B23"},{"name":"javascript","url":"https://api.github.com/repos/h5bp/html5-boilerplate/labels/javascript","color":"ededed"},{"name":"mobile","url":"https://api.github.com/repos/h5bp/html5-boilerplate/labels/mobile","color":"ededed"}],"state":"open","id":1935621,"pull_request":{"patch_url":null,"html_url":null,"diff_url":null},"html_url":"https://github.com/h5bp/html5-boilerplate/issues/816","closed_at":null,"body":"IE6-8 require respond.js to act as a polyfill because H5BP uses mobile-first media queries. \r\n\r\nI'm not convinced mobile-first media queries are best. \r\n\r\n1. Clearly they have this extra cost for IE baked in.\r\n1. Secondly, it's a little awkward, as a developer, to write your styles mobile first.\r\n\r\nWhat mobile browsers (in use, currently) do not support media queries? Moreover, of the ones who don't, are there browsers that don't scale the content to somehow adapt to the small screen size? \r\n\r\nI don't know enough of the Blackberry/Nokia product line to know what's up on this front. But I have a feeling the mobile-first MQ setup is a lot of work. And the payoff is not worth the effort.","number":816,"url":"https://api.github.com/repos/h5bp/html5-boilerplate/issues/816","comments":54,"assignee":null},"comment":{"user":{"id":835328,"login":"davidcochran","url":"https://api.github.com/users/davidcochran","avatar_url":"https://secure.gravatar.com/avatar/76de3e996e961a4ffbf1d05173d20487?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"76de3e996e961a4ffbf1d05173d20487"},"created_at":"2011-12-19T21:33:52Z","updated_at":"2011-12-19T21:33:52Z","id":3209945,"body":"Wait. I just followed the link provided in the above discussion to Jeremy Keith's post http://adactio.com/journal/4494/\r\n\r\nHis solution, which addresses what I just laid out above, but more elegantly, is to have two files:\r\n* **global.css** to provide base styles for all devices, including mobile-first styles\r\n* **layout.css** to provide layout for WVP browsers\r\n\r\nThen he uses a media query and a conditional comment to provide layout.css only as needed:\r\n* a media query for modern WVP browsers\r\n* a conditional comment for IE 6-8\r\n\r\nHis code snippet with my comments:\r\n\r\n    <!-- Base styles for all browsers -->\r\n        <link rel=\"stylesheet\" href=\"/css/global.css\" media=\"all\">\r\n    <!-- Layout for wide browsers -->\r\n        <link rel=\"stylesheet\" href=\"/css/layout.css\" media=\"all and (min-width: 30em)\">\r\n    <!-- SAME layout file for IE 6-8 -->\r\n        <!--[if (lt IE 9)&(!IEMobile)]>\r\n            <link rel=\"stylesheet\" href=\"/css/layout.css\" media=\"all\">\r\n        <![endif]-->\r\n\r\nThe advantages here seem significant, as this approach:\r\n1. provides base styles to all browsers\r\n2. keeps the more weighty CSS layout file from being requested by NVP browsers at all\r\n3. requires *just one* layout.css file (no copying and pasting into a separate file)\r\n\r\nIn addition, this approach still allows me to adjust the conditional comment to support only the versions of IE I choose to support with layout. For instance, if I do not wish to provide layout for IE 6:\r\n\r\n    <!-- layout file for only IE 7-8, excluding IE 6 -->\r\n        <!--[if (gt IE 6)&(lt IE 9)&(!IEMobile)]>\r\n            <link rel=\"stylesheet\" href=\"/css/layout.css\" media=\"all\">\r\n        <![endif]-->\r\n\r\nMoreover, if I want more precise media queries for mid-width devices (like tablets) and ultra-wide monitors, I can easily take and adjust this approach to cover such cases. The easiest way may be to include tablet-width layout within a media query inside global.css and then address mongo-width layout within a media query inside the layout.css file.","url":"https://api.github.com/repos/h5bp/html5-boilerplate/issues/comments/3209945"},"action":"created"}