search

JoshBarr / on-media-query

A neat way to trigger JS when media queries change. No jQuery required.
283 stars 33 forks source link

@media \0screen breaks LESS compilation #13

Closed davidpmccormick closed 11 years ago

davidpmccormick commented 11 years ago

I think this line :

@media \0screen {

breaks LESS compilation – prevents LESS from compiling correctly. Is there a way round this, other than adding it after the LESS is compiled?

Thanks, D

mhulse commented 11 years ago

Maybe:

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Last time I checked, the html5 bp was using this:

https://github.com/h5bp/html5-boilerplate/blob/master/index.html

Tbth, your problem sounds like a limitation of LESS, or a bug, heck, maybe it's a feature? Maybe there's a setting you can adjust to turn that type of validation on/off?

Last time I used less, it failed to compile on a perfectly valid retina display media query; it ended up being a bug that needed fixing by the LESS peeps. Long story short, if the above (or IE-specific style sheets) don't fix your issue, then I would open an issue here:

https://github.com/cloudhead/less.js/issues

Just found this:

https://github.com/cloudhead/less.js/issues/390

You might gander at these issues:

https://github.com/cloudhead/less.js/issues/search?q=Hack

Here's a similar problem that got patched:

https://github.com/cloudhead/less.js/pull/492

... You might even consider writing a patch?

Anyway, I think my first suggestion will work for ya.

(Typed on my iPhone)

davidpmccormick commented 11 years ago

Thanks for the dope – if I had the chops, I'd attempt a patch myself; for now, I'll have to rely on complaining to the appropriate authorities! Ta.

mhulse commented 11 years ago

I hear ya! Let us know if the Paul Irish fix works! Seems like that should fix your issue without having to have a patch on Less.js. Maybe post your version of the code here (or as a gist) so it can help others?

mhulse commented 11 years ago

Closing. I think someone could eventually fix the demo to use this technique:

<!--[if IE 6]>         <html class="no-js ie6 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js ie7 lt-ie9 lt-ie8">        <![endif]-->
<!--[if IE 8]>         <html class="no-js ie8 lt-ie9">               <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js no-touch">                 <!--<![endif]-->

Really, from my point of view, the demo page code is just an example. If the end user needs to use a different technique, then there's nothing stopping them from modifying the code to meet their needs. :+1: