CHAPTER 5 Robust, Responsible, Responsive Web Design
data- attributes — all standards-compliant markup, with all the behavior
we want from picture.<div data-picture>
<div data-source data-media="( min-width: 30em )" data-src="big.jpg">
<div data-source data-src="small.jpg">
<noscript>
<img src="fallback.jpg" alt="...">
</noscript>
</picture>In the event that JavaScript isn’t supported, the user will receive a standard
img element. If JavaScript is available, Picturefill will parse through the
attributes specified on the data-source elements, determine which one is
best suited to the user’s display, and inject an img tag with the appropriate
source into the page. We’ve been using Picturefill in our client work at
Filament Group for approaching a year now, and we’re having great luck
with it. The benefit to a developer-led standards effort is that we get a head
start on polyfilling the new markup: dozens of polyfills for both picture
and srcset are already available on GitHub.Down on SouthStreet
Filament Group has rolled all the lessons we’ve learned about optimizing
delivery of HTML, CSS, JavaScript and images into a project we’re calling
SouthStreet^23 , named for the location of FG’s office.
SouthStreet provides you with a set of tools you can use to ensure
that devices get the most efficient amount of code possible, while still
maintaining broad accessibility and support. We’re continuing to refine
SouthStreet as new approaches and techniques come to light, and all of the
projects mentioned in this chapter are completely open source: feedback,
suggestions and new ideas are always welcomed.23 https://github.com/filamentgroup/southstreet