testing retina display media queries

[olup]

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:

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

 

[SrWebDeveloper]

The below media query works in all browsers and is considered future friendly:

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

 

[olup]

The below media query works in all browsers and is considered future friendly:

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

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 ?

@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!

 

[SrWebDeveloper]

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.