The Picturefill named Div

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.”

[side note : This Divfill artist formerly known as Picturefill now appends an img element within div[data-picture]. As you hopefully will see this markup pattern can get unruly very quickly if used on a larger scale.]

I've also created a new branch with my own fork of Picturefill where I'm putting together a real world example 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.

Markup using div polyfill

The following is the snippet I used within my footer. I also set my fallbacks for Retina

 
<article id="footer-socials">
<h3>Follow Along</h3> 
<ul class="socials-listing"> 
<li class="twitter"> 
<a href="https://twitter.com"> 
<div data-picture data-alt=""> 
<div data-src="img/twitterBird.png" data-media="screen"></div> 
<div data-src="img/twitterBird@2x.png" data-media="(-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)"></div> 
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> 
<noscript><img src="img/twitterBird.png" alt=""></noscript> 
</div> 
</a> 
</li> 

<li class="dribbble">
<a href="http://dribbble.com"> 
<div data-picture data-alt="Social Follow Buttons"> 
<div data-src="img/dribbbleLogo.png" data-media="screen"></div> 
<div data-src="img/dribbbleLogo@2x.png" data-media="(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)"></div> 
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> 
<noscript><img src="img/dribbbleLogo.png" alt=""></noscript> 
</div> 
</a> 
</li> 

<li class="facebook"> 
<a href="http://www.facebook.com"> 
<div data-picture data-alt="Social Follow Buttons">
<div data-src="img/facebookLike.png" data-media="screen"></div> 
<div data-src="img/facebookLike@2x.png" data-media="(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)"></div> 
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> 
<noscript><img src="img/facebookLike.png" alt=""></noscript> 
</div> 
</a> 
</li> 

<li class="github"> 
<a href="https://github.com"> 
<div data-picture data-alt="Social Follow Buttons"> 
<div data-src="img/githubOctocat.png" data-media="screen"></div> 
<div data-src="img/githubOctocat@2x.png" data-media="(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)"></div> 
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> 
<noscript><img src="img/githubOctocat.png" alt=""></noscript>> 
</div> 
</a> 
</li> 
</ul> 
</article>

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Before you comment here, note that this forum is moderated and your IP address is sent to Akismet, the plugin we use to mitigate spam comments.