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:
<style>
.hqImage {
background-image:
-webkit-image-set(
url(standard.jpg) 1x,
url(highdefinition.jpg) 2x
);
}
</style>
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.
Download
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
<html>
<head>
</head>
<body>
<a download="SomeFile.jpg" href="SomeFile.jpg">Download This Image!</a>
</body>
</html>
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