Other MQ syntax? Also, is grunt-recess required?

[mhulse]

Hi,

Thanks for sharing code! Seems like a good solution. I'd prefer to stick with less vs. switch to SASS for its @content feature.

Couple of quick questions:

What happens if my MQ is:

@media all and () { ... }

... or something like this (for retina):

@media 
only screen and (min-width: 1005px) and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-width: 1005px) and (-moz-min-device-pixel-ratio: 1.5),
only screen and (min-width: 1005px) and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-width: 1005px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-width: 1005px) and (min-device-pixel-ratio: 1.5),
only screen and (min-width: 1005px) and (min-resolution: 1.5dppx) {
...
}

I find that in my CSS I'm needing the flexibilty of doing the above. Would your code be able to parse/handle some of the more advanced MQ statements?

Also, is grunt-recess required?

Thanks!!!! :)

[himedlooff]

This is only a method, there's no custom parsing I'm doing to achieve this. I wanted to point out that you can use LESS to switch media queries to media types by using LESS's built-in string interpolation method.

The following is straight from http://lesscss.org/

String interpolation
Variables can be embedded inside strings in a similar way to Ruby or PHP, with the @{name} construct:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

RE: Grunt recess it's only there to compile LESS.

RE: Other media query formats great question! I don't know but I'll run some tests.

[mhulse]

Ah, this is cool! Thanks for updating the README! Your new examples and docs really made it much more clear to me. I'm looking forward to testing this. I'll let you know the results of my tests (like I said before, I'm also wanting to use this technique to attain a desktop print style sheet).

I really like this technique as it's pretty straight forward. It's one of those things that when you point it out, I'm like "duh, why didn't I think of that!". 👍

Lol, thanks!!!! I'll be back with my results.

[mhulse]

So, good news!

First, ignore my question about the retina display media query ... Old IEs and/or printers don't need that high resolution stuff, so it's a good thing that those devices/browsers ignore said media query(s). 👍

Second, I've done some quick testing (I won't have time to do more thorough testing until later this week) and (thanks to your inspiration and code samples) I've been getting some good results!

Without even using LESS, I wanted to test some combinations of MQs to see how this would work (without spending a lot of time setting up a grunt LESS project).

Attempt 1

I wanted to see how the below would behave across old IEs and printers:

/* MOBILE */

/* ... styles here ... */

@media {

    /* TABLET */

    /* ... styles here ... */

}

@media {

    /* SMALL DESKTOP */

    /* ... styles here ... */

}

@media {

    /* DESKTOP */

    /* ... styles here ... */

}

As you can see, I've opted to not have any arguments afer my @media statements. My thinking was that the LESS variable overrides would just be empty strings (e.g. @respond-to-medium-screens: "").

THE GOOD:

• Firefox on my Mac displayed the desktop style (including the cascade from mobile to desktop).
• Printer printed desktop styles (IBID).
• IE 6 & 7 showed desktop styles (IBID).

THE BAD:

• IE 8 showed the mobile styles only. I forgot that IE 8 has issue with MQs that, suprisingly, older IEs don't have.

---

Related to IE8 not behaving:

Media query syntax when a separate style sheet is included (alternative link)

... The above thread makes a reference to this post:

Techniques For Gracefully Degrading Media Queries

... on the above page is a section title "Technique 3: Circumvent Media Query Conditions"; the author contends that @media screen, all and ... will load in old IEs. Unfortunately, as I stated in the css-discuss thread:

Based on my tests, IE6 and IE7 actually read the contents of the @media! Unfortunately, surprisingly, STRANGELY, IE8 doesn't fall in line with it's predecessors. Unbelievable. Sad too.

It's amazing that IE8 fails and IE6/7 work when using that technique. Too bad too, because that would have been a pretty sweet, non-LESS, fix for graceful degradation of MQs in older IEs.

I digress ...

---

Attempt 2

/* ... MOBILE ... */

/* ... styles here ... */

@media all {

    /* TABLET */

    /* ... styles here ... */

}

@media all {

    /* SMALL DESKTOP */

    /* ... styles here ... */

}

@media all {

    /* DESKTOP */

    /* ... styles here ... */

}

SUCCESS!

From what I've tested, like you've already pointed out, old IEs, and my printer, are getting the "desktop" styles (plus cascade).

Now, like you have pointed out already, I just need to do:

<!--[if lt IE 9]>      <link rel="stylesheet" href="styles/styles-desktop.css"> <![endif]-->
<!--[if gt IE 8]><!--> <link rel="stylesheet" href="styles/styles.css"> <!--<![endif]-->

... and for print:

<link rel="stylesheet" media="print" href="/styles-desktop.css">

Note: I don't typically have special vars for old IEs, so I'd probably load styles-desktop.css for old IE and print, as the stylesheet will just be my main styles sans media queries (other than @media all { ... }).

Awesome! 👯

I'm kinda stoked that I don't need to switch to SASS just so I can use @content. Thanks for the tip on this technique! Lovin' it. :)

Btw, here's my test code if you (or others) want to play:

http://jsbin.com/alugiv/1

Sorry, no LESS. I just wanted to quickly test changes to my @media queries and I already had a test page so it was fastest for me to just modify the strings manually.

Thanks again for the inspiration/tips/help! It's much appreicated!!!!

[himedlooff]

@mhulse wow thanks for documenting your research, it's great to see that @media all is working out well. I've updated examples in this repo to use all.

Can you update that link to the Media query syntax when a separate style sheet is included article? It's linking to this issue page accidentally.

I'm pretty psyched about this approach as well. I was using respond.js and ran into a "flash of small screen layout" issue before the large screen layout kicked in. This approach seems to be a better alternative, thanks again for the input!

[himedlooff]

@mhulse also, out of curiosity how do you usually compile LESS? I'm using grunt because I can have it compile two different stylesheets for me automatically. You don't need it though you can compile as normal with any other compiler.

[mhulse]

@mhulse wow thanks for documenting your research, it's great to see that @media all is working out well. I've updated examples in this repo to use all.

Awesome! I also just tested @media screen { .. } in IE6-8 and Firefox v21/Mac "print preview" and everything worked the same as all.

Demo page here:

http://jsbin.com/alugiv/2

So, at least for the simple tests that I've done, unless I've missed something obvious, both all and screen get the job done.

For me, I'll be using all, as that means I can use the same generated CSS to print our "desktop" styles.

As I mentioned earlier, when using a "mobile-first" approach and @media screen and (size) ..., then the mobile only styles load (because of the "screen" restriction).

Alternatively, using @media all and (size) ..., the printer will only load the styles that fit on a printed page ("all" works on print, though the size restrictions are followed); in the case of an 8.5 x 11, that's like a "tablet" size (at least for codebase I tend use, that's the size that fit on a standard printout).

Anyway, I'm hopeful that your solution will work on my latest project (based on my test page results, I'm hopeful).

FYI, I'm researching now if there are any corner cases that I have not thought of ... I'll be back if I learn anything new.

Can you update that link to the Media query syntax when a separate style sheet is included article? It's linking to this issue page accidentally.

Ooops! Updated link. Sorry about that.

There's really not much there. Just a thread I started on CSS-D a few months back. I mostly just wanted to point out some of my other research/conversations on print topic.

I'm pretty psyched about this approach as well. I was using respond.js and ran into a "flash of small screen layout" issue before the large screen layout kicked in. This approach seems to be a better alternative, thanks again for the input!

OMG, yah. You know, respond.js is great for small sites. I was also using that until I realized how much of a headache it can be on a large site with multiple CSS asset servers/cdns. The whole cross-domain setup is a pain in the ass.

I'm ready to feed OLD IEs desktop styles. I'm using LESS and I don't want to switch to SASS (just so I can use @content) ... I mean, I think SASS is cool, it's just that I've already committed to using LESS features and I think I'd be pulling my hair out to do the conversion.

@mhulse also, out of curiosity how do you usually compile LESS? I'm using grunt because I can have it compile two different style sheets for me automatically. You don't need it though you can compile as normal with any other compiler.

Oh, I'm a HUGE Grunt.js fan! I've been using the gurnt-contrib-less task.

To prove to you that I'm a grunt man, I've setup a boilerplate repo that I use for my Grunt repos (also, this was setup to help get my co-workers up-to-speed with a Grunt workflow):

https://github.com/registerguard/grunt-boiler

That's setup currently to be more of a JS plugin workflow; I'll probably be adding a boilerplate setup for CSS/LESS stuff in the coming weeks.

Anyway, thanks for the awesome conversation and code inspiration! I'll be back with updates! :)

[mhulse]

So, just to satisfy my own curiosity, I pinged a large group of CSS gurus found on the CSS-d list:

@media all {} & @media screen {}: Both ignored (or followed) by IE6-8

Conclusion: We're good to go! Well, you probably already knew that ... I just am the type of person to beat a dead horse. 🐴

Relevant information:

MSDN: CSS Compatibility in Internet Explorer

... where:

@media [is supported in] √ IE6, √ IE7, √ IE8, √ IE9, √ IE10

From there, I followed the @media link to:

MSDN: @media rule

On that page, the list of supported "media types" are:

screen: Output is intended for computer screens.
print: Output is intended for printed material and for documents viewed in Print Preview mode.
all: Output is intended for all devices.

Additionally, to drive home the point, Philippe states:

... IE 7 & 8 (and 6 I think, but it has been a while since I checked thoroughly) really support basic media queries of the type

@media screen {}
@media all {}
@media screen, print {}

That is, media queries as described in CSS 2.1:
http://www.w3.org/TR/CSS21/media.html

But this is not supported:

@media {}

for the obvious reason: it is invalid per CSS 2.1.

... which, for that last part, I think explains why IE was having troubles with @media {}.

So yah! I'm really stoked now. This actually seems like a pretty awesome alternative to using SASS' @content!

Thanks!

[himedlooff]

@mhulse thanks for all of this! I've got a project going live with this approach really soon and will let you know what how it turns out.

[mhulse]

Awesome! I'm looking forward to hearing about your results. I hope to impliment your solution as well in the (hopefully) near future. 👍

Thanks again Mike!