Wednesday, January 22, 2014

Media Query parse issue

A media query running on Chrome in the following format will not work:

@media screen and (min-width:100px)and (max-width:199px){ ... }

but this will work in Chrome, Safari and FireFox:


@media screen and (min-width:100px) and (max-width:199px){ ... }

Notice the space between the closed parenthesis and 'and';  this is a parse error.  a space between these two symbols shouldn't invalidate the query.


The version of Chrome I found this in is Chrome 32.0.1700.77 Running on Mac OS X 10.9.1

If I remove the spaces then this query and have the following form:

@media screen and (min-width:100px)and(max-width:199px){ ... }

Only Safari will work.


To prevent this from happening, make sure you have spaces in your media queries.