Parse Error @media query for retina devices

Jonny Wood's Avatar

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

    Andrew L's Avatar

    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.

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

    Andrew L's Avatar

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

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

    Casey's Avatar

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

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

    ms-studio's Avatar

    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)

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

    Jonny Wood's Avatar

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

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

    Jeremy's Avatar

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

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

    Matt's Avatar

    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..

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

    Will's Avatar

    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) {

    }

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

    Lisa's Avatar

    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.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac