Digital Masters Magazine

Mastering Digital Arts for Web, Video, Mobile, IoT (and Space Travel)

  • Design
  • Photo
  • Video
  • Web
  • Code
  • UX
  • Mobile
Home Code Using Sprites in @media Queries for High-Density Displays
Using Sprites in @media Queries for High-Density Displays

February 2, 2015 By admin Leave a Comment

Using Sprites in @media Queries for High-Density Displays

One way of speeding up a website is  to minimize the number of http requests by combining several small files of the same type. You can do this with scripts, stylesheets, and–by combining images into sprites–with icons and other pictures. So far so good. But using sprites and @media queries gets tricky when addressing devices with a high density display (such as Retina in iOS).

Important update as of 2016-01: HTTP/2 makes sprites obsolete. You should no longer be using this technique! (This article is only of historical value.) You can use sprites to save http requests, to preload rollovers, or to simplify design work.

A sprite is an image file which you can create by laying out the data of several images next to one another in one single image file, and saving it for web. Then, you can use CSS positioning magic to reveal the individual images contained in that one file, one at a time. This part gets somewhat tricky when addressing devices with high-density displays.

Mobile WebKit work with a virtual resolution in combination with a property which specifies the pixel density of the physical display.

TechArmor iPhone 8 Protective Screen

The background-size property you specify for devices with a high-density display should contain the size of the standard-display sprite. For example half the width and half the height of the sprite for high-density displays.

The -background-size property you define should be the size of the total sprite, so not just the size of a single icon within the sprite. For example with a sprite consisting of three elements at 60px by 60px each:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
.selector {
background-image: url(http://your.domain.com/somesprite.png);
-moz-background-size: 180px 60px;
-o-background-size: 180px 60px;
-webkit-background-size: 180px 60px;
background-size: 180px 60px; } }

Filed Under: Code, Mobile

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Zizo

Change language settings in Adobe Photoshop 2020

How to change the language of Adobe Photoshop

Apple MacBook Pro (16-Inch, 16GB RAM, 1TB Storage) - Space Gray

The new 16-inch MacBook Pro: Faster, slightly heavier but still ultra-light and #WorthTheWait

iPhone XS

The iPhone XS +++ An Insider Report +++ new 5.8-inch and 6.5-inch OLED iPhones +++ Codename D32 & D33

Disable Create a PIN in Windows 10

How to disable the Create a PIN prompt on Windows 10 for good

SEO keywords research tools: SkyFu.com

Get more free inbound clicks for qualifying leads from paid search. SEO research tools on steroids

Disable Create a PIN in Windows 10

Windows 10 can be very persistent in asking you to create a PIN “for your convenience”, but what if you don’t want to remember a PIN? What if you are happy with a password-based sign-in? Windows 10 won’t quit nagging you about the digits and there is no obvious way to prevent it from throwing […]

SEO keywords research tools: SkyFu.com

Looking for more organic traffic and better qualifying leads from paid search? Look no more.

Recent Posts

  • How to change the language of Adobe Photoshop
  • The new 16-inch MacBook Pro: Faster, slightly heavier but still ultra-light and #WorthTheWait
  • The iPhone XS +++ An Insider Report +++ new 5.8-inch and 6.5-inch OLED iPhones +++ Codename D32 & D33
  • How to disable the Create a PIN prompt on Windows 10 for good
  • Get more free inbound clicks for qualifying leads from paid search. SEO research tools on steroids

What’s up

Adobe Adobe CC AJAX Amazon FPS Apache Apple Authorize.net checkout crash CSS3 Dreamweaver e-commerce eshops event log Event Viewer Facebook Finder Flash Google HTML 5 iOS JavaScript Mac MAMP merchant mobile OS X payment payments PayPal Photoshop PHP product key RSS SEO shopping cart timesheets virtual hosts Wall Street WAMP web shop Windows Windows 8 Windows 10 WordPress

Categories

Archives

  • May 2020
  • November 2019
  • August 2018
  • November 2017
  • October 2017
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • February 2015
  • November 2014
  • November 2013
  • October 2012
  • September 2012
  • August 2012
  • June 2011
  • May 2011
  • March 2011
  • May 2010
  • Home
  • Subscribe
  • Advertise
  • Privacy Policy
  • Legal
  • Contact Us

Copyright © 2022 ·Streamline Pro Theme · Genesis Framework by StudioPress · WordPress · Log in

Posting....