I've been finding this little meta[name='tmpl'] pattern useful lately when making template-based decisions in JS, such as when loading a particular file or set of files that are needed only on a particular page of a site.
First, in the HTML of a particular template, like say, a search result page:
<head>
...
<meta name="tmpl" content="searchresult">
</head>
| @media (min--moz-device-pixel-ratio: 1.5), | |
| (-o-min-device-pixel-ratio: 3/2), | |
| (-webkit-min-device-pixel-ratio: 1.5), | |
| (min-device-pixel-ratio: 1.5), | |
| (min-resolution: 144dpi), | |
| (min-resolution: 1.5dppx) { | |
| /* Retina rules! */ | |
| } |
| /* ---------------------------------------------------------- */ | |
| /* */ | |
| /* A media query that captures: */ | |
| /* */ | |
| /* - Retina iOS devices */ | |
| /* - Retina Macs running Safari */ | |
| /* - High DPI Windows PCs running IE 8 and above */ | |
| /* - Low DPI Windows PCs running IE, zoomed in */ | |
| /* - Low DPI Windows PCs and Macs running Firefox, zoomed in */ | |
| /* - Android hdpi devices and above */ |
| //addEventListener polyfill 1.0 / Eirik Backer / MIT Licence | |
| (function(win, doc){ | |
| if(win.addEventListener)return; //No need to polyfill | |
| function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}} | |
| function addEvent(on, fn, self){ | |
| return (self = this).attachEvent('on' + on, function(e){ | |
| var e = e || win.event; | |
| e.preventDefault = e.preventDefault || function(){e.returnValue = false} | |
| e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true} |
| /** | |
| * Cross Browser helper to addEventListener. | |
| * | |
| * @param {HTMLElement} obj The Element to attach event to. | |
| * @param {string} evt The event that will trigger the binded function. | |
| * @param {function(event)} fnc The function to bind to the element. | |
| * @return {boolean} true if it was successfuly binded. | |
| */ | |
| var cb_addEventListener = function(obj, evt, fnc) { | |
| // W3C model |