Using cross browser retina/high resolution media queries for icons (on hover, focus, before/after pseudo elements):
// Retina
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-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) {
.spritesheet,
#faqs-accordion button.accordion h3::after {
content: '' !important;
background-image: url(../images/yorkregion_spritesheet@2x.png) !important;
background-size: 800px !important;
}
#faqs-accordion button.button-bg:after {
content: '' !important;
background: url(../images/menu-items-bg@2x.png) no-repeat !important;
background-size: 50px 52px !important;
width: 50px !important;
height: 52px !important;
}
#faqs-accordion button.accordion:hover:after,
#faqs-accordion button.accordion:focus:after {
content: '' !important;
background: url(../images/menu-items-bg-dark@2x.png) no-repeat !important;
background-size: 50px 52px !important;
width: 50px !important;
height: 52px !important;
}
}


