Uploaded image for project: 'SmartSprites'
  1. SmartSprites
  2. SMARTSPRITES-87

CSS background-size support for Retina/HiDPI displays

    Details

    • Type: New Feature
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 0.2.9
    • Labels:
      None

      Description

      Taking the background-size CSS property into account when generating offsets would further extend the use of SmartSprites. The property has the effect of scaling the background image into different size. One emerging use of it is for web pages targeting HiDPI displays, e.g., Apple's mobile devices with Retina display. (See: http://weedygarden.net/2010/10/retina-display-and-css-background-images/)

      SmartSprites currently assumes the background-image is always displayed with 1:1 ratio while generating offsets in background-position properties. To support the same scaling effect with sprites, it will need to first compute the aspect ratio of the original image, and generate the correct background-size for the sprite. That will be as simple as applying the ratio of the original image's width (height) to the displayed width (height) to the sprite's width (or height, respectively). Then, the offset in background-position need be adjusted applying either the width's or height's ratio depending on the sprite's layout.

      I'm very grateful to have this extremely useful tool around me, yet because of this missing feature, I couldn't reuse larger images for smaller spots but simply generate scaled-down version for all of them significantly increasing the size of the sprite in one of my project. I suppose implementing it would be pretty straightforward if we invent another SmartSprites directive instead of parsing the CSS. However, adding this could have some impact on other planned features since it might interfere with them. I might be able to spend some time hacking the code sooner or later, but if you find this request simple enough, please make it happen.

      Thanks!

      ~Jaeho

        Attachments

          Activity

            People

            • Assignee:
              stachoo Stanisław Osiński
              Reporter:
              netj Jaeho Shin
            • Votes:
              1 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 16h
                16h
                Remaining:
                Remaining Estimate - 16h
                16h
                Logged:
                Time Spent - Not Specified
                Not Specified