So I was messing with my own site when this spark started (also the same time Scott was updating the repos) and I’d like to get some feedback from outside entities. To give you an idea of what I’m talking about let me show you this little snippet (pasted below) and mind you this is just for the stupid little social icons in my footer. I’ve implemented the most recent commits from Picturefill that I’d like to personally go ahead and coin as “Divfill.”<\/p>\n
[side note : This I’ve also created a new branch<\/a> with my own fork of Picturefill where I’m putting together a real world example<\/a> using this technique of Scott’s on a larger scale –with a Flickr–like layout. I hope we can use this live example and build upon it as a way to identify verboseness and at the same time indicate what’s working. I’ve done this only because a real world example is crucial to understand what we really need. This isn’t to blow the wind out of the Divfill sail. The two example images in use are just not cutting it. As they say, the proof is in the puddin’ so here comes the spoon.<\/p>\n The following is the snippet I used within my footer. I also set my fallbacks for Retina<\/p>\n So I was messing with my own site when this spark started (also the same time Scott was updating the repos) and I’d like to get some feedback from outside entities. To give you an idea of what I’m talking … Continue reading Divfill<\/code> artist formerly known as Picturefill<\/code> now appends an img<\/code> element within div[data-picture]<\/code>. As you hopefully will see this markup pattern can get unruly very quickly if used on a larger scale.]<\/em><\/span><\/p>\nMarkup using div polyfill<\/h3>\n
\r\n<article id=\"footer-socials\">\r\n<h3>Follow Along<\/h3> \r\n<ul class=\"socials-listing\"> \r\n<li class=\"twitter\"> \r\n<a href=\"https:\/\/twitter.com\"> \r\n<div data-picture data-alt=\"\"> \r\n<div data-src=\"img\/twitterBird.png\" data-media=\"screen\"><\/div> \r\n<div data-src=\"img\/twitterBird@2x.png\" data-media=\"(-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)\"><\/div> \r\n<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> \r\n<noscript><img src=\"img\/twitterBird.png\" alt=\"\"><\/noscript> \r\n<\/div> \r\n<\/a> \r\n<\/li> \r\n\r\n<li class=\"dribbble\">\r\n<a href=\"http:\/\/dribbble.com\"> \r\n<div data-picture data-alt=\"Social Follow Buttons\"> \r\n<div data-src=\"img\/dribbbleLogo.png\" data-media=\"screen\"><\/div> \r\n<div data-src=\"img\/dribbbleLogo@2x.png\" data-media=\"(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)\"><\/div> \r\n<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> \r\n<noscript><img src=\"img\/dribbbleLogo.png\" alt=\"\"><\/noscript> \r\n<\/div> \r\n<\/a> \r\n<\/li> \r\n\r\n<li class=\"facebook\"> \r\n<a href=\"http:\/\/www.facebook.com\"> \r\n<div data-picture data-alt=\"Social Follow Buttons\">\r\n<div data-src=\"img\/facebookLike.png\" data-media=\"screen\"><\/div> \r\n<div data-src=\"img\/facebookLike@2x.png\" data-media=\"(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)\"><\/div> \r\n<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> \r\n<noscript><img src=\"img\/facebookLike.png\" alt=\"\"><\/noscript> \r\n<\/div> \r\n<\/a> \r\n<\/li> \r\n\r\n<li class=\"github\"> \r\n<a href=\"https:\/\/github.com\"> \r\n<div data-picture data-alt=\"Social Follow Buttons\"> \r\n<div data-src=\"img\/githubOctocat.png\" data-media=\"screen\"><\/div> \r\n<div data-src=\"img\/githubOctocat@2x.png\" data-media=\"(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)\"><\/div> \r\n<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> \r\n<noscript><img src=\"img\/githubOctocat.png\" alt=\"\"><\/noscript>> \r\n<\/div> \r\n<\/a> \r\n<\/li> \r\n<\/ul> \r\n<\/article><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"