Shorthand syntax

[stevelove]

The media query recommendation defines a shorthand syntax in Example V.

Essentially, the following are equivalent:
@media all and (min-width:400px) { ... } @media (min-width:400px) { ... }

Using the shorthand syntax with Respond caused incorrect matches with the regex used for media type.

Tests:
I modified the last test in the visual test cases (test/test.css) to use shorthand syntax, and it is passing. I also added tests that expose a bug in the way Respond injects style blocks grouped by media type rather than by query expression. I'll file an issue for that one.

[stevelove]

"projector" is not a valid media type. Changed it to "projection" instead.

[stevelove]

Example: @media (min-width: 900px)
Regex matches: ["(", undefined, "(", undefined]
type = "all"

Example: @media screen and (min-width: 900px)
Regex matches: ["screen and", undefined, "screen", "screen"]
type = "screen"

Example: @media only screen and (min-width: 900px)
Regex matches: ["only screen and", "only", "screen", "screen"]
type = "only screen"

[Wolfr]

+1
Just encountered this issue.

[scottjehl]

Thanks, Steve!
I've moved this into a branch https://github.com/scottjehl/Respond/tree/shorthand-syntax

and added a unit test, updated the min file. I don't have IE on me right now, so I can't test if it's passing or not. Mind giving it a look?

Otherwise, looks good and I should be able to bring this in this week.
Thanks!!

[stevelove]

Excellent. The tests are 100% passing in IE7 and IE8.

A couple of notes:

• I tested IE by changing the browser mode in IE9, and ran into a type mismatch error when loading qunit.js from GitHub. I had to save a local copy first to get it to work. The error is discussed here: http://stackoverflow.com/questions/5986772/ie9-script-response-blocked-due-to-mime-type-mismatch
• Looks like the Ajax factory was refactored recently, and the "new" keyword was removed from XMLHttpRequest(). This causes an error in Firefox 2 (haven't checked others). With "new" in there it works fine on visual inspection. The unit tests are only 25% passing in Firefox 2, but I wonder if that's a QUnit issue?