Less.js: Support for "\0" media query reference (IE8 - 10)

[jodriscoll]

@media screen and (min-width:0\0) & @media screen\0

Produces a syntax error, however, it's a valid media query usage for targeting IE9 and IE10. (http://www.impressivewebs.com/ie10-css-hacks/)

Also,
http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

Is there a work around for this or did I miss a fix/method on how to make this work?

Thanks,
J

[radium-v]

How's this?

@min-width: ~"screen and (min-width: 0\0)";
@screen: ~"screen\0";

@media @min-width, @screen {
    .box {
        width: 100%;
    }
}

Outputs to:

@media screen and (min-width: 0\0), screen\0 {
  .box {
    width: 100%;
  }
}

offtopic: When using variables in comments, use backticks to escape them so Github peoples don't get flooded with messages, (eg., @media)

[jodriscoll]

It appears LESS validated this. So, in the future, a work around for syntax errors would be to wrap the syntax error into a variable and call the variable?

[radium-v]

Huh. I was writing out a block that shows how to use variables for media query shortcuts, and I think I found the bug (1.4.1).

Can't seem to escape \ properly:

@device: ~'screen';
@ie6-7: ~'@{device}\9';

@ie8: ~"\0@{device}\"; // nope, error
@ie8: ~"\0@{device}\\"; // outputs two backslashes
@ie8: ~"\0@{device}\ "; // escapes the space properly...
@ie8: ~`"\\0@{device}\\"`; // <--- backticks and a javascript string works

.box {
  display: inline-block;

  @media @ie8 {
    display: none;
  }

  @media @ie6-7 {
    display: inline;
    zoom: 1;
  }

  @media @ie8, @ie6-7 {
    display: table;
  }
}

[radium-v]

This works:

@ie6-7: screen\9;
@ie8: \0screen;
@oldIE: ~"@{ie8}\,@{ie6-7}";
@ie9-10: ~"screen and (min-width:0\0)";
@mobile: ~"screen and (min-width: 640px)";
@mobile-with-oldIE: @mobile, @ie6-7;

@media @oldIE {}
@media @ie8 {}
@media @ie9-10 {}
@media @mobile, @ie6-7 {}

Outputs:

@media \0screen\,screen\9 {
}
@media \0screen {
}
@media screen and (min-width:0\0) {
}
@media screen and (min-width: 640px), screen\9 {
}
@media screen and (min-width: 640px), screen\9 {
}

[lukeapage]

see #1156 w.r.t the escaping weirdness.

and as for the original bug, yes we generally don't support non standard css

[ghost]

Is this still relevant?

[seven-phases-max]

@jasonwilliams200OK

All of these

@media screen and (min-width:0\0) {
    .box {
        width: 100%;
    }
}

@media screen\0 {
    .box {
        width: 100%;
    }
}

@media screen and (min-width: 0\0), screen\0 {
  .box {
    width: 100%;
  }
}

compile just fine with current Less versions.

[seven-phases-max]

Closing as fixed in a 2.x (which one?) release.

[aajahid]

I'm using lessc 2.5.1 and I just tried following syntax

@media screen and (min-width:0\0) {
    .box {
        width: 100%;
     }
}

And throws 'ParseError: Missing closing ')' in .....

Was the issue really fixed or the issue came back again?

[matthew-dean]

@aajahid You're right. It no longer compiles. My guess is that it was fixed and then something reverted the fix. @seven-phases-max @lukeapage Reopen?

[seven-phases-max]

Yep, reopening (no idea when it was broken again though). Either way for these kind of hacks (notice it's not even valid CSS min-width!) it's probably would be a good idea to always recommend to use escaping for IE hacks to save yourself from that sort of surprises, e.g.:

@media screen and (min-width: ~"0\0") {
    .box {
        width: 100%;
     }
}

^ Should be always fine.

[matthew-dean]

it's probably would be a good idea to always recommended to use escaping for IE hacks to save yourself from that sort of surprises

I don't disagree, and this should probably be added to docs. Escapes (such as in selector names) we should support, but if a value is really invalid and is a hack, yet is supported by the Less string-escaping syntax, that might be okay, as long as it wasn't accidental and is documented.

As @cloudhead said to me in #549, Less.js somewhat acts as a defacto linter (to some degree). That is, we have plenty of cases where invalid CSS will fail. If it fails here, but the value is invalid anyway, that seems ok. BUUUT the reverse argument is that these particular CSS hacks are rather common, and it would be convenient for the user to drop in examples from http://browserhacks.com/ and have them just work.

[jraadt]

Just tested this again and it still seems to be broken in the latest.

@media screen\0 {
    .box {
        width: 100%;
    }
}

[stalinb87]

+1 having the same issue here

[seven-phases-max]

Consider merging to #2207 (or vice-versa?).

[lichenhao]

I use the less import with css file which contain a css like this:
_file: http://demo.com/a.less.css_

.someclass{
    width: 12px\0; /* ie8 */
}

the base less file ：

@import (less) "http://demo.com/a.less.css";

Then throw an error.

[seven-phases-max]

@lichenhao Works fine in up-to-date Less versions: demo
Either way see escaping and (inline) (the latter is what you need in this case instead of (less)).

[seven-phases-max]

Merging to #2207.