Home → Problems →

Parse Error @media query for retina devices

• Edit

Jonny Wood

23 Jan, 2012 11:25 AM

Hi,

Using Less.app

I've been using the following media query to swap out background images for higher resolution screens:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {

    //styles here

}

This was working fine until a recent update to Less.app and now it gives me a parse error unless I remove the whole media query?
Any idea why this is happening??!!

1. 1 Posted by Andrew L on 02 Feb, 2012 05:54 PM

   

   I'm experiencing this same problem with @font-face.
   This issue has been known for years but it's still a problem. Any timeframe on when this will be fixed? It might be a showstopper for me.

   • Edit

2. 2 Posted by Andrew L on 02 Feb, 2012 06:00 PM

   

   Actually, I'm no longer having the problem with @font-face. Please ignore the previous comment.

   • Edit

3. 3 Posted by Casey on 05 Mar, 2012 09:16 AM

   

   I am having the exact same issue - any ideas how to work around

   • Edit

4. 4 Posted by ms-studio on 06 Mar, 2012 10:11 AM

   

   Same issue here. The following CSS triggers a syntax error and prevents LESS (2.6 956) from compiling:

   @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
   only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape),
   only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
   only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape)

   NOTE: it's the -moz and and opera browser-specific styles that cause the error. If i declare only the following it works fine:

   @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
   only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape)

   • Edit

5. 5 Posted by Jonny Wood on 06 Mar, 2012 10:29 AM

   

   @ms-studio thanks for the extra info on this problem – really hope the bug is fixed and Less updated soon!

   • Edit

6. 6 Posted by Jeremy on 19 Mar, 2012 01:34 PM

   

   I'm still having the same issue as well. Any work-arounds or fixes yet?

   • Edit

7. 7 Posted by Matt on 14 Apr, 2012 09:52 AM

   

   Same issue here..
   Using Less.app 2.7 (959)

   Code (from '320 and Up' boilerplate):

   @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2),
   only screen and (min-device-pixel-ratio: 1.5) {

   }

   As ms-studio suggests, removing the opera specific style fixes the parse error..

   • Edit

8. 8 Posted by Will on 25 May, 2012 06:35 PM

   

   I ran into this issue and was able to resolve it by escaping the opera value:

   @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (-o-min-device-pixel-ratio: ~"3/2"),
   only screen and (min-device-pixel-ratio: 1.5) {

   }

   • Edit

9. 9 Posted by Lisa on 31 Dec, 2013 04:50 PM

   

   This has reared its head again...
   @media only screen and (-webkit-min-device-pixel-ratio: 2),
   only screen and ( min--moz-device-pixel-ratio: 2), /* bug fix */
   only screen and ( -o-min-device-pixel-ratio: 2/1),
   only screen and ( min-device-pixel-ratio: 2),
   only screen and ( min-resolution: 192dpi),
   only screen and ( min-resolution: 2dppx) {}
   results in a parse error. Any advice on how to solve this would be much appreciated.

   • Edit