Posted on

Retina Display Media Query

CategoriesCSS, Development, Front End

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;
    }    
}