{"id":22,"date":"2012-02-21T09:23:28","date_gmt":"2012-02-21T09:23:28","guid":{"rendered":"http:\/\/www.w3.org\/community\/respimg\/?p=22"},"modified":"2012-02-21T09:24:34","modified_gmt":"2012-02-21T09:24:34","slug":"a-sample-picture-implementation","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/respimg\/2012\/02\/21\/a-sample-picture-implementation\/","title":{"rendered":"A sample picture implementation"},"content":{"rendered":"<p>Hi all.<\/p>\n<p>As a result of a weird lunchtime hacking idea, I&#8217;ve created a crude working example of the proposed picture element markup and behavior (<em>a polyfill for a non-existent feature, how weird&#8230;<\/em>).<\/p>\n<p>This isn&#8217;t meant to be used in a production setting right now; it just seemed like it might be helpful to have something tangeable to work with while mapping out a preferred markup pattern. That said, I think it behaves roughly the same as existing client-only workarounds, so if it ends up proving helpful, I&#8217;ll try and maintain it as discussions progress so that it could potentially be used as a polyfill when-or-if a picture element lands in a browser or a candidate recommendation.<\/p>\n<p><strong>Example URL<\/strong><\/p>\n<p><em><a href=\"http:\/\/scottjehl.github.com\/picturefill\/\" target=\"_blank\" rel=\"nofollow\">http:\/\/scottjehl.github.com\/picturefill\/<\/a><\/em><\/p>\n<p><em>Like the proposed picture element, you&#8217;ll need a media-query supporting browser to see anything more than fallback content, so IE9+, etc.<\/em><\/p>\n<p><strong>Source code<\/strong><\/p>\n<p><a href=\"https:\/\/github.com\/scottjehl\/picturefill\" target=\"_blank\" rel=\"nofollow\">https:\/\/github.com\/scottjehl\/picturefill<\/a><\/p>\n<p><strong>Markup:<\/strong>\u00a0<a href=\"https:\/\/github.com\/scottjehl\/picturefill\/blob\/master\/index.html\" target=\"_blank\" rel=\"nofollow\">https:\/\/github.com\/scottjehl\/picturefill\/blob\/master\/index.html<\/a><\/p>\n<p><strong>JS:<\/strong>\u00a0<a href=\"https:\/\/github.com\/scottjehl\/picturefill\/blob\/master\/picturefill.js\" target=\"_blank\" rel=\"nofollow\">https:\/\/github.com\/scottjehl\/picturefill\/blob\/master\/picturefill.js<\/a><\/p>\n<p><strong>Some notes:<\/strong><\/p>\n<ul>\n<li>The JS uses the matchMedia API (with polyfill included in the external folder) to find matches within the source elements, keeping the last match it finds in source order.<\/li>\n<li>Per Mat&#8217;s example markup, the last element in the picture element is the fallback img element, and for the sake of this script, the matching src is simply plugged into that element.<\/li>\n<li>This script does nothing to prevent the fallback image from downloading before it is overridden by another potential match, and I&#8217;m not sure it needs to, since that&#8217;s an advantage a native implementation will bring.<\/li>\n<li>The script is configured to run when the DOM is ready, and on window resize (which tends to catch orientationchange as well).<\/li>\n<\/ul>\n<p>&#8212;<\/p>\n<p>Please let me know if this is at all detrimental to the planning stages. Here&#8217;s hoping it provides us something to play with and see what sort of markup will make the most sense in the end.<\/p>\n<p>Thanks,<\/p>\n<p>Scott Jehl<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi all. As a result of a weird lunchtime hacking idea, I&#8217;ve created a crude working example of the proposed picture element markup and behavior (a polyfill for a non-existent feature, how weird&#8230;). This isn&#8217;t meant to be used in &hellip; <a href=\"https:\/\/www.w3.org\/community\/respimg\/2012\/02\/21\/a-sample-picture-implementation\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1281,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[1],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/users\/1281"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":3,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/22\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}