On Fri, Aug 23, 2013 at 1:02 PM, Norman Fournier <nor...@normanfournier.com> wrote: > If you're in a sharing mood, Tom, it would be great if you would post your > solutions to this mailing list, and we could all benefit from your hard work > ;-) > > On 2013-08-23, at 10:24 AM, Tom Livingston wrote:
Like I said, this is low-tech. But it's quick, requires less effort and so far has not caused any pain that I'm aware of. Also, I certainly didn't think this up. I read about this technique and it made sense to me. Possibly from Andy Clarke. I will say that I hardly ever hear about so it's either common place, or unpopular. Either way, it works for me. YMMV. I am allergic to polyfils and use very few of them. The only one I can think of that I use regularly is selectivizr (http://selectivizr.com/). So... I have a main scss file that looks like: @import "normalize.scss"; @import "forms.scss"; @import "fonts.scss"; @import "base.scss"; @media only all and (min-width: 480px){ @import "480.scss"; } @media only all and (min-width: 600px){ @import "600.scss"; } @media only all and (min-width: 768px){ @import "768.scss"; } @media only all and (min-width: 960px){ @import "960.scss"; } /* CLEARING */ /* For modern browsers */ .clear:before, .clear:after {content:""; display:block;} .clear:after {clear:both;} .clear {zoom:1;}/* For IE 6/7 (trigger hasLayout) */ And an IE sheet that looks like: /*480*/ @import "480.scss"; /*600*/ @import "600.scss"; /*768*/ @import "768.scss"; /*992*/ @import "960.scss"; The IE sheet is importing the same styles as the main sheet, minus the MQs, inside a conditional for IE < 9. Sheets outside of the MQs in the main sheet still work for IE. The cascade then builds the desktop-only page for old IE, in my case 7 and 8. These are scss imports which happen in preprocessing and are not causing multiple server calls. The result is only 2 sheets, main and ie < 9. The base sheet is my mobile starting point, with usually only typographic styles and such with little or no layout styles. This is the base a "dumb" phone will get. Sheets build up from there as the width gets wider. I have conditionals around my <html> element, adding classes for 7 and 8, and I add specific 7/8 styles as needed in the individual break point sheets. Yes, this causes good browsers to also download ie-specific styles as well, but they are usually only a few lines and I can live with that. It's one less server call. I find it much easier to just keep all the element styles together, rather than to jump out to another sheet to do a style related to the element I'm working on in the main sheet. But that's just me. Feel free to create an IE-specific sheet and tack in on the end of the above IE scss file. I'm no guru. This is just what works for me. HTH -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] 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/
