testing retina display media queries

Discussion in 'Web Design and Development' started by olup, Dec 8, 2012.

  1. olup, Dec 8, 2012
    Last edited: Feb 25, 2013

    macrumors 6502

    Joined:
    Oct 11, 2011
    #1
    I made an image sprite for some icons for a band's website that includes bigger icons for high resolution displays.

    While the normal icons load fine and are valid css, the retina/high resolution icons don't apparently. I came across this snippet here to make it work, but it doesn't validate nor work. http://css-tricks.com/snippets/css/retina-display-media-query/Here's the code:

    Code:
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and ( -moz-min-device-pixel-ratio: 2),
    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) { 
      
    	.social a{
    		background-image: url(../images/logos/sprites.png);
    		background-repeat:no-repeat;
    		display:block;
    		height:100px;
    		text-indent:-9999em;
    		width:100px;
    	}
    	.facebook {
    		background-position:0 -120px;
    	}
    	.facebook:focus,.facebook:hover {
    		background-position:0 -220px;
    	}
    	.youtube {
    		background-position:-130px -120px;
    	}
    	.youtube:focus,.youtube:hover {
    		background-position:-130px -220px;
    	}
    	.twitter {
    		background-position:-220px -120px;
    	}
    	.twitter:focus,.twitter:hover {
    		background-position:-220px -220px;
    	}
    	.bandcamp {
    		background-position:-310px -120px;
    	}
    	.bandcamp:focus,.bandcamp:hover {
    		background-position:-310px -220px;
    	}
    
    }
    I'm completely shooting in the dark here, since I don't have an appropriate device to test on. How can I fix this?
    Any help would be greatly appreciated. :)
     
  2. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    The below media query works in all browsers and is considered future friendly:

    Code:
    @media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 192dpi) { 
        /* Retina-specific stuff here, put your CSS sprite stuff here for Retina */
    }
    
    Your current style.css has some media code in it but not what you posted above so I assumed you removed it. Try this, simplify, see if it validates and works.
     
  3. thread starter macrumors 6502

    Joined:
    Oct 11, 2011
    #3
    yes indeed I removed some of the code and uncluttered the css.

    However I'm still confused what to implement within the brackets. Is it the actual sprite like I did with the non retina icons, using background-positioning or this ?

    Code:
    @media only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (min-device-pixel-ratio: 2) {
    	span.location {
    		background-image: url(location@2x.png);
    		background-size: 50px 50px;
    	}
    
    Thank you very much for your help! :)
     
  4. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    Use my responsive code, not yours. Between the { and } insert any CSS that generates your sprites based on the high quality version intended for retina displays only. I did not simply copy/paste your previous CSS for the sprite because I assume it's the original low resolution version. If not, use that.

    :)
     

Share This Page