I'm currently working on a project to develop a responsive website using SASS/Compass, and I am incorporating retina icons by utilizing generated sprites. In my .scss file, I have created a mixin for including these icons.
Here is my mixin for retina icons:
// Retina icons
@mixin sprite-background($name, $xpos: 0px, $ypos: 0px, $xpos2x: $xpos, $ypos2x: $ypos, $size: image-width(sprite-file($icons, $name))) {
background-image: sprite-url($icons);
background-position: sprite-position($icons, $name, $xpos, $ypos);
background-repeat: no-repeat;
display: block;
@media all and ($pixel-ratio) {
@if (sprite-position($icons, $name) != sprite-position($icons2x, $name)) {
background-position: $xpos2x $ypos2x;
}
@include background-size($size auto);
background-image: sprite-url($icons2x);
}
}
Defined Variable:
$pixel-ratio: "-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5";
Implementation Example:
.selector {
@include sprite-background(clock_small, 0px, 2px, 0px, -1013px, 45px);
}
The issue I am facing is that in Internet Explorer 8, the browser uses my retina sprite as the `background-image`, resulting in a failure when it comes to the `background-size`. I understand that IE8 does not support `background-size` and hence ignores it, causing misalignment of the icons.
You can use JavaScript to determine the current pixel ratio:
alert(window.devicePixelRatio);
In Internet Explorer, the alert displays `undefined`. How is it possible that my "retina media query" recognizes `undefined` as a valid number and applies its CSS? Is there any workaround for this issue?