Skip to toolbar

Community & Business Groups

Respondu 0.0.4 – Up to date with proposed picture sytax

Hey Everyone

Just to let you all know, the Respondu framework has undergone some changes to make it cleaner, simpler and more robust.

https://github.com/davidmarkclements/Respondu

http://respondu.davidmarkclements.com

Respondu uses a different method to Scott Jehl’s polyfill, it piggy backs on the noscript idea using a hack to extract the noscript content cross-browser. This means you can use the exact picture syntax and simply precursor it with a call to Respondu and wrap it with modified noscript tags like so:

<h1> Picture Element Example </h1>
<script>Respondu(‘picture’);</script>
<noscript>
<picture id=thepic>
<source srcset=”images/photo.small.jpg 1x, images/photo.small.jpg 2x”>
<source media=”(min-width:320px)” srcset=”images/photo.medium.jpg 1x, images/photo.medium@2x.jpg 2x”>
<source media=”(min-width:640px)” srcset=”images/photo.large.jpg 1x, images/photo.large@2x.jpg 2x”>
<source media=”(min-width:1280px)” srcset=”images/photo.xlarge.jpg 1x, images/photo.xlarge@2x.jpg 2x”>
<img src=”images/photo.jpg” alt=”Alt tag describing the image represented”>
</picture>
</noscript-->
<p> Some content after the image </p>

Respondu supports the proposed the current form of the picture syntax with media and simplified (i.e. density only) srcset attributes. I can say that building this framework and using it in my projects, the new picture syntax is a pleasure compared to the img srcset syntax – if you take a look at the examples you’ll see what I mean. The picture syntax has a much nicer balance between vertical  and horizontal text length.

Thanks to all, exciting times ahead!

Leave a Reply

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

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.

*