HTML and CSS Reference
In-Depth Information
Apple in iOS 6 Safari and desktop Safari 6 take a similar but slightly different approach. You can now take
advantage of this new element by using the -webkit-image-set method for the property of background-image . Take a
look at the following example to get a better idea:
.hqImage {
url(standard.jpg) 1x,
url(highdefinition.jpg) 2x
As you can see in the previous example, you use the class hqImage and set the background-image property to the
new -webkit-image-set method. Inside of that method, you need to use two arguments, which are the URL of the
image asset and the pixel density at which that image should be used. In this case, you have a standard.jpg file for a
1x device pixel density and a highdefinition.jpg file for a 2x density. This is a really great enhancement because you
don't need to traverse the DOM and replace all of your images with high-DPI images should a device with a higher
resolution be accessing your content. Also, only the image that supports the device will get loaded, so there is no
additional overhead for a user downloading the image; they get only the one that their device supports.
Up next is the new download attribute in HTML5. Have you ever wanted to allow a user to save a file from your web
content? Or how about have them save a coupon within an ad unit so they can later print it and use it at the point of
sale? Well, now you can take advantage of the new download attribute that will instruct the browser to handle the link
as a downloadable asset instead of redirecting the browser to that resource in a new window or tab. Listing 12-7 shows
how to work with the download attribute.
Listing 12-7. Download Attribute Example
<a download="SomeFile.jpg" href="SomeFile.jpg">Download This Image!</a>
Now when the user clicks the Download This Image! link, the browser will download the resource called
SomeFile.jpg , as shown in Figure 12-8 .
Figure 12-8. The download functionality in the Chrome browser
Search WWH ::

Custom Search