Shorthand syntax #41

wants to merge 6 commits into


None yet
3 participants

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.

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.

@@ -37,7 +37,7 @@ a {
/*styles for 620px and up! (let's try this one minified )*/
-@media screen and (min-width: 620px),only print,projector{body{background:red;}}
+@media screen and (min-width: 620px),only print,projection{body{background:red;}}

stevelove Jul 9, 2011

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

@@ -115,8 +115,10 @@
for( ; j < eql; j++ ){
thisq = eachq[ j ];
+ type = thisq.match( /(only\s+)?((?:\()|([a-zA-Z]+))(?:\sand)?/ );
+ type = (!type[3]) ? "all" : (type[1]) ? type[1] + type[2] : type[2];

stevelove Jul 11, 2011

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 commented Jul 27, 2011

Just encountered this issue.


scottjehl commented Aug 14, 2011

Thanks, Steve!
I've moved this into a branch

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.

@scottjehl scottjehl closed this Aug 14, 2011

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:
  • 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?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment