HTML and CSS Reference
In-Depth Information
Emerging APIs
The next sections will apply to the emerging JavaScript and DOM APIs that are coming to the new modern web stack.
Most of the following APIs can be used by downloading the latest beta browsers outlined previously; in the worst case,
they're just not yet implemented in any browser version or device at the time of this writing, but a formal specification
is being developed. It's best to keep an eye on
http://caniuse.com
and the various working groups for any progress
and adoption stats. Let's kick things off with the much-needed
picture
element.
Picture Element
The first DOM feature I want to touch on is the new
picture
element. As you know, with the varying screen sizes and
pixel densities out there, it's becoming increasingly hard to handle bitmap images that are optimized correctly for
every screen. While some people take the route of using straight CSS and/or SVG for their graphic elements paired
with a responsive approach to layout, bitmap images will still look very different on higher-density screens and with
fluctuating screen layouts.
Luckily, there is a working group dedicated to developing a technique known as
responsive images
using a new
picture
element. Using the
picture
element, you can dictate specific images to load based on the device accessing
the content. For example, if you were viewing an image on an Apple iPhone 3GS, your device pixel density would
be a 1:1 relationship between the device pixels and the document's CSS pixels. However, if you view the same piece
of content on an iPhone 4+, your device pixel density doubles for a 2:1 relationship (or as Apple coined it, a Retina
display). With this device, it means your device pixels are two times greater than the CSS pixels. Listing 12-6 uses the
picture
element to load the appropriate image based on your source media query.
Listing 12-6.
Picture Element Example
<html>
<head>
<body>
<picture alt="Sample Image">
<source src="default.jpg">
<!-- small size for viewport widths 400px wide and up -->
<source src="small.jpg" media="(min-width: 400px)">
<!-- medium size for viewport widths 800px wide and up -->
<source src="medium.jpg" media="(min-width: 800px)">
<!-- large size for viewport widths 1000px wide and up -->
<source src="large.jpg" media="(min-width: 1000px)">
<!-- extra large size for viewport widths 1200px wide and up -->
<source src="xlarge.jpg" media="(min-width: 1200px)">
</picture>
</body>
</html>
As you're aware, it is increasingly more important to take this design approach into consideration as more and
more devices gain higher pixel density. You don't want images looking blurry or unsharp on devices that can support
higher-quality bitmaps. Using a traditional media query approach for CSS, you can support multiple image sources
and let the browser/device handle which one it can support. For more information on the responsive images working
group and the
picture
element, visit
http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/
