List, I have been developing with media queries on link elements like such:
<link rel="stylesheet" media="screen" href="css/style.css?v=1"> <link rel="stylesheet" media="only screen and (min-width: 600px)" href="css/600.css?v=1"> <link rel="stylesheet" media="only screen and (min-width: 768px)" href="css/768.css?v=1"> <link rel="stylesheet" media="only screen and (min-width: 992px)" href="css/992.css?v=1"> then, aside from the base 'style.css', repeating the other sheets inside a conditional comment, without the media queries, to serve old IE only the desktop-width layout: <!--[if lt IE 9]> <link rel="stylesheet" media="all" href="css/600.css?v=1"> <link rel="stylesheet" media="all" href="css/768.css?v=1"> <link rel="stylesheet" media="all" href="css/992.css?v=1"> <![endif]--> This has been working really well for me. I build in a "mobile first" fashion, that is, starting with a narrow width and then adjusting as the browser width increases. I find this an easier direction to develop in (as opposed to the reverse - browser width first, and work down). I have been reading more recently that some are tending to abandon the above for media queries within a single sheet. My question is how does one handle old IE using the single sheet method? I don't really like polyfills and would rather achieve the same effect as above without having to polyfill old IE to understand the media queries. Is this idea possible in the single-sheet scenario? TIA -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
