What it is.

ResponsiveComments was designed to bring simple conditional loading to the client side. Although not the complete answer to conditional loading in responsive web design, ResponsiveComments provides a solution to simple conditional loading, directly within your markup, using HTML comments, media queries and feature detection.

Anybody who has spent time in responsive web design will be aware of the performance issues, particularly with load & hide and load & shrink techniques. But despite the excitement and new technologies introduced with RWD, performance became lost in the crowd. Sending the exact same application to all devices regardless of viewport size, feature support or bandwidth, unfortunately became the accepted the norm.

Luckily, performance is now at the forefront of RWD and one of the most sought after features in a modern web application. Responsive image solutions and formats are providing the means to render device optimised images, while techniques like RESS are taking the emphasis away from media queries and allowing us to conditionally load content. This help ensure that while sending the same content and experience to all devices, we do so in an optimised and performant way for our users.

ResponsiveComments was born from conversations between Adam Chambers and Craig Keller at Digital Surgeons as they attempted to leave no stone unturned in the quest for performant responsive experiences. Although ResponsiveComments does have certain disadvantages (HTML bloat being one) it certainly provides an interesting concept for experimentation and exploration, the reasons Adam went ahead and wrote this library.

How it works.

Perhaps not the most widely known feature available today, but JavaScript is able to read HTML comments. In fact, comments are just another DOM node, type 8 if you were wondering. Because of this, we can pull out the textContent of the comment node and insert it into the DOM, using data-* attributes to specify media queries to trigger the process. See below for examples of usage or view the source of this page and check out the navigation, 'top' link and GitHub ribbon.

ResponsiveComments is supported across all major web browsers. However, we make use of the window.matchMedia function for testing media queries, this function is fully supported in Internet Explorer 10, but version 9 and down require a polyfil. ResponsiveComments also requires Modernizr for feature detection so ensure a Modernizr build is included, before the ResponsiveComments library, with all the required tests.

To paraphrase the functionality...

1. On load we cache all nodes with the attribute [data-responsive-comment-media] containing a media query or [data-responsive-comment-supports] containing a Modernizr test.
2. We iterate through these nodes and if the specified media query or feature detection passes we then loop through the children, looking for a node of type 8, an HTML comment.
3. Once we find our target we insert into the DOM in the manner specified in [data-responsive-comment-insert].
4. Steps 2 and 3 are then also run on window.resize for [data-responsive-comment-media] nodes where the media query has not yet passed.

Usage.

To get started using ResponsiveComments, add a data-responsive-comment-media attribute containing a valid media query to any element containing children that you wish to conditionally load. The ResponsiveComments concept will only work in a progressivelty enhanced experience so make sure you use minimum width media queries.

<div data-responsive-comment-media="(min-width: 769px)">...</div>

The [data-responsive-comment-media] containers should contain one commented out segment of markup as well as any other HTML they require.

<div data-responsive-comment-media="(min-width: 769px)">

	<!-- <div>Any content can go in here</div> -->

</div>

ResponsiveComments also supports feature detection using Modernizr. Make sure you include a Modernizr build with all the tests you need before the ResponsiveComments library. A Modernizr test, or a comma separated list of multiple Modernizr tests, can then be specified in [data-responsive-comments-supports].

<div data-responsive-comment-supports="svg">

	<!-- <div><p>Any content can go in here, including images</p></div> -->

</div>

The `[data-responsive-comment-supports]` containers should also contain one commented out segment of markup as well as any other HTML they require.

The commented out markup inside the ResponsiveComments container will be inserted into the DOM when the specified media query or feature detection passes. Any valid insertAdjacentHTML insertion type can be specified in [data-responsive-comment-insert], valid options are 'beforebegin', 'afterbegin', 'beforeend', 'afterend' with a default of 'beforeend'.

<div data-responsive-comment-insert="afterbegin"
     data-responsive-comment-media="(min-width: 769px)">

	<!-- <div>Any content can go in here, including images</div> -->

</div>

For added functionality you can also bind to an event fired on the element containing the [data-responsive-comment-media] attribute. Use jQuery if you wish or good old vanilla JavaScript.

// #respcomm[data-responsive-comment-media] should contain the commented out markup
document.getElementById('respcomm').addEventListener('responsiveComment', function(e) {

    // do something crazy

});

Try it out.

DemoDownload