Through the use of HTML comments, markup can be introduced to progressively enhance an experience as various media queries or feature detections evaluate to true.
Data attributes are used with valid media queries to conditionally display HTML. For example:
<div data-responsive-comment-media="(min-width: 769px)"> <!-- <div><p>Any content can go in here</p></div> --> </div>
IE 9 and below support requires the matchMedia.js polyfill, but otherwise browser support is pretty good.
What would jQuery look like if it was written for modern browsers with ES6 modules? jQuery Evergreen (GitHub: webpro / jquery-evergreen, License: MIT, Bower: jquery-evergreen) by Lars Kappert is an attempt at answering that question.
jQuery Evergreen works with modern browsers. It has the same familiar API as jQuery, and is lean and mean with the following, optional modules: selector, class, DOM, event, attr and html. The source is written in the ES6 Modules format, and transpiled to an AMD version, and a "browser global" version using the ES6 Module Transpiler.
It'll work with current versions of most browsers thanks to transpilation and an IE9 polyfill for
You can even create custom builds with Grunt, like this: