├── css ├── style.css └── bootstrap-responsive.min.css ├── js ├── main.js ├── plugins.js └── vendor │ ├── css_browser_selector.js │ ├── modernizr-2.6.1-respond-1.1.0.min.js │ └── bootstrap.min.js ├── .gitignore ├── .idea ├── .name ├── scopes │ └── scope_settings.xml ├── encodings.xml ├── vcs.xml ├── misc.xml ├── modules.xml └── css_browser_selector.iml ├── favicon.ico ├── img ├── glyphicons-halflings.png └── glyphicons-halflings-white.png ├── crossdomain.xml ├── tests ├── test.html ├── style.css ├── index.html ├── generator.js ├── test_android.html ├── test_blackberry.html └── tester.html ├── index.html ├── README.md ├── .htaccess ├── index_en.html └── index_pt.html /css/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | css_browser_selector -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ridjohansen/css_browser_selector/HEAD/favicon.ico -------------------------------------------------------------------------------- /img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ridjohansen/css_browser_selector/HEAD/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ridjohansen/css_browser_selector/HEAD/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /.idea/scopes/scope_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | http://www.w3.org/1999/xhtml 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.idea/css_browser_selector.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /crossdomain.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /js/plugins.js: -------------------------------------------------------------------------------- 1 | // Avoid `console` errors in browsers that lack a console. 2 | if (!(window.console && console.log)) { 3 | (function() { 4 | var noop = function() {}; 5 | var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn']; 6 | var length = methods.length; 7 | var console = window.console = {}; 8 | while (length--) { 9 | console[methods[length]] = noop; 10 | } 11 | }()); 12 | } 13 | 14 | // Place any jQuery/helper plugins in here. 15 | -------------------------------------------------------------------------------- /tests/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Browser Selector Tester: ANDROID 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

22 | 23 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /tests/style.css: -------------------------------------------------------------------------------- 1 | body { margin:0px; padding:10px; font-size:12px;font-family:Arial,Helvetica,sans-serif; } 2 | h1, h2, h3, h4, h5, h6 { padding:0px; margin:0px; } 3 | h1 { font-size:16px; font-weight:bold; } 4 | h2 { font-size:14px; font-weight:bold; } 5 | h3 { font-size:12px; } 6 | .header h3 { font-size:18px; margin-top:12px; } 7 | .pass { color:#090; background-color:#CFC; } 8 | .fail { color:#900; background-color:#FCC; } 9 | .partial, .generated_classes { color:#009; background-color:#CCF; } 10 | .fail, .result, .partial { -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; } 11 | .failed, .generated_classes { -webkit-border-radius:0px 0px 8px 8px; -moz-border-radius:0px 0px 8px 8px; border-radius:0px 0px 8px 8px; } 12 | .full_test .generated_classes { border-radius:0px; } 13 | .result, #results { margin-top:10px; } 14 | .expected, .got { } 15 | .odd { } 16 | pre { font-family:"Courier New",monospace;font-size:11px; } 17 | #container { width:800px; margin:0px auto; } 18 | #results { border-top:1px solid #CCC; } 19 | .passed, .fail, .result, .user_agent, .generated_classes { padding:8px; } 20 | .user_agent {color:#333; background-color:#FF9; -webkit-border-radius:8px 8px 0px 0px; -moz-border-radius:8px 8px 0px 0px; border-radius:8px 8px 0px 0px; } 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS Browser Selector 5 | 6 | 7 | 21 | 22 | 23 | 24 | 28 | 29 | 30 | 31 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /tests/generator.js: -------------------------------------------------------------------------------- 1 | showLog=true; 2 | function log(m) {if ( window.console && showLog ) {console.log(m); } } 3 | 4 | // query string parser 5 | function parseQuery(fldNm) 6 | { 7 | var oRe = new RegExp("[\\?&]"+fldNm+"=([^&#]*)","i"); 8 | var fldVal = oRe.exec(parent.location.search); 9 | return (fldVal) ? unescape(fldVal[1]) : ""; 10 | } 11 | 12 | $(document).ready(function () { 13 | 14 | test_mode = "full"; // full = shows all pass fail outputs 15 | // partial = shows a list of classes generated for each UA string 16 | // generate = generates a new array for user_agent_strings once all testing done 17 | passed = 0; 18 | failed = 0; 19 | output=''; 20 | h=document.documentElement; 21 | 22 | currentNavigator = '

Your UA string: '+navigator.userAgent+'<\/div>
Your HTML classes: '+h.className+'<\/div><\/h1>'; 23 | 24 | if (test_mode=="full") { document.documentElement.className = document.documentElement.className +" full_test" } 25 | all = user_agent_strings.length; 26 | 27 | if (test_mode=="generate") { output+='
' }
28 | 
29 |     $.each(user_agent_strings,function(index, item) 
30 |     	{
31 | 		document.documentElement.className = '';
32 | 		ua = item[0];
33 | 		codes_expected = item[1];		
34 | 		codes_returned = css_browser_selector(ua);
35 | 
36 | 
37 | 		/* removido orientation, minw e maxw pois estes dependem do ambiente e não do teste em si */
38 | 		codes_returned = codes_returned.replace(/ ?orientation_\w+/g, "").replace(/ [min|max|cl]+[w|h]_\d+/g, "");
39 | 		codes_returned = codes_returned.replace(/\s(no-)?hidpi/, "");
40 | 
41 | 
42 | 		log("|"+codes_returned+"|");
43 | 		generate_class= (codes_expected=="header") ? codes_expected : "result partial"
44 | 		if (test_mode=="generate")
45 | 			{ output+= (codes_expected=="header"?'

':'
')+'\t["'+ua+'","'+((codes_expected=="header") ? codes_expected : codes_returned)+'"]'+(index':''); }
46 | 		else if (test_mode=="partial" || codes_expected=="header")
47 | 			{ output += '
'+ua+'<\/h3>'+(codes_expected!="header"?'\n
generated: '+codes_returned+'<\/div>\n':'')+'<\/div>'; }
48 | 		else if (codes_expected == codes_returned) 
49 | 			{
50 | 			output += '
'+ua+'<\/h3>\n
got: '+codes_returned+'<\/div>\n<\/div>';
51 | 			passed++;
52 | 			}
53 | 		else 
54 | 			{
55 | 			output += '
\n
'+ua+'<\/h3>\n
expected: '+codes_expected+'<\/div>\n
got: '+codes_returned+'<\/div>\n<\/div>';
56 | 			failed++;
57 | 			}
58 |     	});
59 |     
60 |     	if (test_mode=="generate") {  output+='
' } 61 | 62 | var passHead = '

'+passed+' tests passed<\/h2>', 63 | failHead = '

'+failed+' tests failed<\/h2>', 64 | outputHeaders = //allHead + "\n" + 65 | //currentHead + "\n" + 66 | currentNavigator + "\n" + 67 | (test_mode=="full" ? passHead + "\n" +failHead :"") 68 | ; 69 | 70 | $("
").attr("id","container").appendTo("body"); 71 | $(outputHeaders).appendTo("#container"); 72 | $("
").attr("id","results").appendTo("#container"); 73 | 74 | $(output).appendTo("#results"); 75 | 76 | // adds "odd" class to odd TRs for zebra striping 77 | $("#results .result:odd").addClass("odd"); 78 | 79 | }); 80 | 81 | 82 | -------------------------------------------------------------------------------- /tests/test_android.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Browser Selector Tester: ANDROID 6 | 7 | 8 | 9 | 10 | 11 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /js/vendor/css_browser_selector.js: -------------------------------------------------------------------------------- 1 | /* 2 | CSS Browser Selector 0.81 3 | Originally written by Rafael Lima (http://rafael.adm.br) 4 | http://rafael.adm.br/css_browser_selector 5 | License: http://creativecommons.org/licenses/by/2.5/ 6 | 7 | Co-maintained by: 8 | https://github.com/ridjohansen/css_browser_selector 9 | https://github.com/delka/css_browser_selector 10 | https://github.com/verbatim/css_browser_selector 11 | */ 12 | (function() { 13 | var uaInfo = { 14 | ua : '', 15 | is : function (t) { 16 | return RegExp(t, "i").test(uaInfo.ua); 17 | }, 18 | version : function (p, n) { 19 | n = n.replace(".", "_"); 20 | var i = n.indexOf('_'), 21 | ver = ""; 22 | while (i > 0) { 23 | ver += " " + p + n.substring(0, i); 24 | i = n.indexOf('_', i + 1); 25 | } 26 | ver += " " + p + n; 27 | return ver; 28 | }, 29 | getBrowser : function() { 30 | var g = 'gecko', 31 | w = 'webkit', 32 | c = 'chrome', 33 | f = 'firefox', 34 | s = 'safari', 35 | o = 'opera', 36 | 37 | ua = uaInfo.ua, 38 | is = uaInfo.is; 39 | 40 | return [ 41 | (!(/opera|webtv/i.test(ua)) && /msie\s(\d+)/.test(ua)) ? ('ie ie' + (/trident\/4\.0/.test(ua) ? '8' : RegExp.$1)) 42 | :is('edge\/') ? 'edge ie' + (/edge\/(\d+)\.(\d+)/.test(ua) ? RegExp.$1 + ' ie' + RegExp.$1 + '_' + RegExp.$2 : '') // IE Edge 43 | :is('trident\/') ? 'ie ie'+ (/trident\/.+rv:(\d+)/i.test(ua) ? RegExp.$1 : '') //ie11+ 44 | :is('firefox/') ? g + " " + f + (/firefox\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua) ? ' ' + f + RegExp.$2 + ' ' + f + RegExp.$2 + "_" + RegExp.$4 : '') 45 | :is('gecko/') ? g 46 | :is('opera') ? o + (/version\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua) ? ' ' + o + RegExp.$2 + ' ' + o + RegExp.$2 + "_" + RegExp.$4 : (/opera(\s|\/)(\d+)\.(\d+)/.test(ua) ? ' ' + o + RegExp.$2 + " " + o + RegExp.$2 + "_" + RegExp.$3 : '')) 47 | :is('konqueror') ? 'konqueror' 48 | :is('chrome') ? w + ' ' + c + (/chrome\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua) ? ' ' + c + RegExp.$2 + ((RegExp.$4 > 0) ? ' ' + c + RegExp.$2 + "_" + RegExp.$4 : '') : '') 49 | :is('iron') ? w + ' iron' 50 | :is('applewebkit/') ? (w + ' ' + s + (/version\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua) ? ' ' + s + RegExp.$2 + " " + s + RegExp.$2 + RegExp.$3.replace('.', '_') : (/ Safari\/(\d+)/i.test(ua) ? ((RegExp.$1 == "419" || RegExp.$1 == "417" || RegExp.$1 == "416" || RegExp.$1 == "412") ? ' ' + s + '2_0' : RegExp.$1 == "312" ? ' ' + s + '1_3' : RegExp.$1 == "125" ? ' ' + s + '1_2' : RegExp.$1 == "85" ? ' ' + s + '1_0' : '') : ''))) //applewebkit 51 | :is('mozilla/') ? g : '' 52 | ]; 53 | }, 54 | getPlatform : function() { 55 | var wp = 'winphone', 56 | a = 'android', 57 | bb = 'blackberry', 58 | dv = 'device_', 59 | 60 | ua = uaInfo.ua, 61 | version = uaInfo.version, 62 | is = uaInfo.is; 63 | 64 | return [ 65 | is('j2me') ? 'j2me' 66 | :is('windows phone') ? (wp + (/Windows Phone (\d+)(\.(\d+))+/i.test(ua) ? " " + wp + RegExp.$1 + " " + wp + RegExp.$1 + RegExp.$2.replace('.', '_') : (/Windows Phone OS (\d+)(\.(\d+))+/i.test(ua) ? " " + wp + RegExp.$1 + " " + wp + RegExp.$1 + RegExp.$2.replace('.', '_') : ''))) // Windows Phone 67 | :is('blackberry') ? (bb + (/Version\/(\d+)(\.(\d+)+)/i.test(ua) ? " " + bb + RegExp.$1 + " " + bb + RegExp.$1 + RegExp.$2.replace('.', '_') : (/Blackberry ?(([0-9]+)([a-z]?))[\/|;]/gi.test(ua) ? ' ' + bb + RegExp.$2 + (RegExp.$3 ? ' ' + bb + RegExp.$2 + RegExp.$3 : '') : ''))) // blackberry 68 | :is('android') ? (a + (/Version\/(\d+)(\.(\d+))+/i.test(ua) ? " " + a + RegExp.$1 + " " + a + RegExp.$1 + RegExp.$2.replace('.', '_') : '') + (/Android (.+); (.+) Build/i.test(ua) ? ' ' + dv + ((RegExp.$2).replace(/ /g, "_")).replace(/-/g, "_") : '')) //android 69 | :is('ipad|ipod|iphone') ? ( 70 | (/CPU( iPhone)? OS (\d+[_|\.]\d+([_|\.]\d+)*)/i.test(ua) ? 'ios' + version('ios', RegExp.$2) : '') + ' ' + (/(ip(ad|od|hone))/gi.test(ua) ? RegExp.$1 : "")) //'iphone' 71 | //:is('ipod')?'ipod' 72 | //:is('ipad')?'ipad' 73 | :is('playbook') ? 'playbook' 74 | :is('kindle|silk') ? 'kindle' 75 | :is('playbook') ? 'playbook' 76 | :is('mac') ? 'mac' + (/mac os x ((\d+)[.|_](\d+))/.test(ua) ? (' mac' + (RegExp.$2) + ' mac' + (RegExp.$1).replace('.', "_")) : '') 77 | :is('win') ? 'win' + (is('windows nt 10.0') ? ' win10' 78 | :is('windows nt 6.3') ? ' win8_1' 79 | :is('windows nt 6.2') ? ' win8' 80 | :is('windows nt 6.1') ? ' win7' 81 | :is('windows nt 6.0') ? ' vista' 82 | :is('windows nt 5.2') || is('windows nt 5.1') ? ' win_xp' 83 | :is('windows nt 5.0') ? ' win_2k' 84 | :is('windows nt 4.0') || is('WinNT4.0') ? ' win_nt' : '') 85 | :is('freebsd') ? 'freebsd' 86 | :is('x11|linux') ? 'linux' : '' 87 | ]; 88 | }, 89 | getMobile : function() { 90 | var is = uaInfo.is; 91 | return [ 92 | is("android|mobi|mobile|j2me|iphone|ipod|ipad|blackberry|winphone|playbook|kindle|silk") ? 'mobile' : '' 93 | ]; 94 | }, 95 | getIpadApp : function() { 96 | var is = uaInfo.is; 97 | return [ 98 | (is('ipad|iphone|ipod') && !is('safari')) ? 'ipad_app' : '' 99 | ]; 100 | }, 101 | getLang : function() { 102 | var ua = uaInfo.ua; 103 | 104 | return [ 105 | /[; |\[](([a-z]{2})(\-[a-z]{2})?)[)|;|\]]/i.test(ua) ? ('lang_' + RegExp.$2).replace("-", "_") + (RegExp.$3 != '' ? (' ' + 'lang_' + RegExp.$1).replace("-", "_") : '') : '' 106 | ]; 107 | } 108 | } 109 | 110 | if (typeof html =='undefined') { 111 | html=document.documentElement; 112 | } 113 | 114 | var screenInfo = { 115 | width : (window.outerWidth || html.clientWidth) - 15, 116 | height : window.outerHeight || html.clientHeight, 117 | screens : [0, 768, 980, 1200], 118 | 119 | screenSize : function () { 120 | screenInfo.width = (window.outerWidth || html.clientWidth) - 15; 121 | screenInfo.height = window.outerHeight || html.clientHeight; 122 | 123 | var screens = screenInfo.screens, 124 | i = screens.length, 125 | arr = [], 126 | maxw, 127 | minw; 128 | 129 | while(i--) { 130 | if (screenInfo.width >= screens[i]) { 131 | if(i) { 132 | arr.push("minw_" + screens[(i)]); 133 | } 134 | if (i <= 2) { 135 | arr.push("maxw_" + (screens[(i) + 1] - 1)); 136 | } 137 | break; 138 | } 139 | } 140 | return arr; 141 | }, 142 | getOrientation : function() { 143 | return screenInfo.width < screenInfo.height ? ["orientation_portrait"] : ["orientation_landscape"]; 144 | }, 145 | getInfo : function() { 146 | var arr = []; 147 | arr = arr.concat(screenInfo.screenSize()); 148 | arr = arr.concat(screenInfo.getOrientation()); 149 | return arr; 150 | }, 151 | getPixelRatio : function() { 152 | var arr = [], 153 | pixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1; 154 | 155 | if(pixelRatio > 1) { 156 | arr.push('retina_' + parseInt(pixelRatio) + 'x'); 157 | arr.push('hidpi'); 158 | } else { 159 | arr.push('no-hidpi'); 160 | } 161 | return arr; 162 | } 163 | } 164 | 165 | var dataUriInfo = { 166 | data : new Image(), 167 | div : document.createElement("div"), 168 | isIeLessThan9 : false, 169 | getImg : function() { 170 | 171 | dataUriInfo.data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 172 | dataUriInfo.div.innerHTML = ""; 173 | dataUriInfo.isIeLessThan9 = dataUriInfo.div.getElementsByTagName("i").length == 1; 174 | 175 | return dataUriInfo.data; 176 | }, 177 | checkSupport : function() { 178 | if(dataUriInfo.data.width != 1 || dataUriInfo.data.height != 1 || dataUriInfo.isIeLessThan9) { 179 | return ["no-datauri"]; 180 | } 181 | else { 182 | return ["datauri"]; 183 | } 184 | } 185 | 186 | } 187 | 188 | function css_browser_selector(u, ns) { 189 | var html = document.documentElement, 190 | b = [] 191 | ns = ns ? ns : ""; 192 | 193 | /* ua */ 194 | uaInfo.ua = u.toLowerCase(); 195 | b = b.concat(uaInfo.getBrowser()); 196 | b = b.concat(uaInfo.getPlatform()); 197 | b = b.concat(uaInfo.getMobile()); 198 | b = b.concat(uaInfo.getIpadApp()); 199 | b = b.concat(uaInfo.getLang()); 200 | 201 | 202 | /* js */ 203 | b = b.concat(['js']); 204 | 205 | /* pixel ratio */ 206 | b = b.concat(screenInfo.getPixelRatio()); 207 | 208 | /* screen */ 209 | b = b.concat(screenInfo.getInfo()); 210 | 211 | var updateScreen = function() { 212 | html.className = html.className.replace(/ ?orientation_\w+/g, "").replace(/ [min|max|cl]+[w|h]_\d+/g, ""); 213 | html.className = html.className + ' ' + screenInfo.getInfo().join(' '); 214 | } 215 | 216 | if (window.addEventListener) { 217 | window.addEventListener('resize', updateScreen); 218 | window.addEventListener('orientationchange', updateScreen); 219 | } else if (window.attachEvent) { 220 | window.attachEvent('onresize', updateScreen); 221 | } 222 | 223 | /* dataURI */ 224 | var data = dataUriInfo.getImg(); 225 | data.onload = data.onerror = function(){ 226 | html.className += ' ' + dataUriInfo.checkSupport().join(' '); 227 | } 228 | 229 | 230 | /* save & add existing html classes */ 231 | var classes = html.className; 232 | var classesArray = classes.split(/ /); 233 | 234 | /* merge existing classes on html tag */ 235 | b = b.concat(classesArray); 236 | 237 | /* removendo itens invalidos do array */ 238 | /* add filter function polyfill for IE8 */ 239 | if (!Array.prototype.filter) { 240 | Array.prototype.filter = function(fun/*, thisArg*/) { 241 | 'use strict'; 242 | 243 | if (this === void 0 || this === null) { 244 | throw new TypeError(); 245 | } 246 | 247 | var t = Object(this); 248 | var len = t.length >>> 0; 249 | if (typeof fun !== 'function') { 250 | throw new TypeError(); 251 | } 252 | 253 | var res = []; 254 | var thisArg = arguments.length >= 2 ? arguments[1] : void 0; 255 | for (var i = 0; i < len; i++) { 256 | if (i in t) { 257 | var val = t[i]; 258 | 259 | // NOTE: Technically this should Object.defineProperty at 260 | // the next index, as push can be affected by 261 | // properties on Object.prototype and Array.prototype. 262 | // But that method's new, and collisions should be 263 | // rare, so use the more-compatible alternative. 264 | if (fun.call(thisArg, val, i, t)) { 265 | res.push(val); 266 | } 267 | } 268 | } 269 | 270 | return res; 271 | }; 272 | } 273 | 274 | b = b.filter(function(e){ 275 | /* if no-js class exists, remove it */ 276 | if (e === 'no-js') { 277 | return false; 278 | } 279 | return e; 280 | }); 281 | 282 | /* prefixo do namespace */ 283 | b[0] = ns ? ns + b[0] : b[0]; 284 | html.className = b.join(' ' + ns); 285 | return html.className; 286 | } 287 | 288 | // Add css_browser_selector as a global object. 289 | window.css_browser_selector = css_browser_selector; 290 | })(); 291 | 292 | // define css_browser_selector_ns before loading this script to assign a namespace 293 | var css_browser_selector_ns = css_browser_selector_ns || ""; 294 | 295 | // init 296 | css_browser_selector(navigator.userAgent, css_browser_selector_ns); 297 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Browser Selector + | Um Auxiliador no Desenvovimento Responsivo Cross-Browser 8 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 34 | 35 | 36 | 37 | 38 | 39 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 70 | 71 |
72 |
73 |
74 | CSS Browser Selector + 75 |
76 |
77 |
78 | 79 |
80 | 81 | 82 |
83 |

CSS Browser Selector +

84 | 85 | 93 | 94 |

95 | 96 | Hi-dpi screen 97 | 98 | 99 | Pixel-ratio > 1 and < 2 100 | 101 | 102 | Pixel-ratio >= 2 103 | 104 |

105 | 106 |

107 | Um Auxiliador no Desenvolvimento Responsivo Cross-Browser
108 | A Cross-browser Responsive Design Helper 109 |

110 | 111 |

112 | CSS Browser Selector + é um javascript muito pequeno, que habilita seletores 113 | CSS.
114 | CSS Browser Selector + is a very small javascript which empowers CSS selectors. 115 |

116 | 117 |

118 | Veja o exemplo:
119 | See an example: 120 |

121 | 
122 | <html lang="pt-br" class="">
123 |
124 | 130 | 131 |
132 |
133 |
134 |

135 | 137 | CSS Browser Selector Download 138 | 139 |

140 | 141 |

142 | 144 | Github 145 | 146 |

147 |
148 |
149 |
150 | 159 |
160 |
161 |
162 |
163 | 164 |

165 | CSS Browser Selector + é um auxiliador no desenvolvimento responsivo cross-browser sem a 166 | utilização de Hacks. Com ele é possível desenvolver sites responsivos para navegadores que 167 | não suportam o módulo Media Queries (CSS3) e sem a utilização de hacks (caracteres não 168 | validados pelo W3C). 169 |

170 | 171 |

172 | O script adiciona classes que fazem uma verificação profunda no navegador do cliente, abrindo 173 | um leque de oportunidades de personalização, podendo assim, estender estas funcionalidades 174 | até para navegadores mais recentes. 175 |

176 | 177 |

178 | Como são utilizadas classes de css, o desenvolvimento torna-se amigável; 179 |

180 | 181 |

182 | Vantagens: 183 | 184 | - Fácil de ser Implementado 185 | 186 | - Habilidade de escrever códigos CSS específicos 187 | 188 | - Possibilidade de resolver problemas em versões em outros SOs 189 | 190 | - Herança de CSS devido à classe que identifica a família do Navegador 191 | 192 | - Fim dos CSS Hacks! 193 |

194 | 195 |

196 | Ele identifica: 197 | 198 | - Navegadores: Firefox; IE; Edge; Opera; Safari; Chrome, Konqueror, Iron 199 | 200 | - Versões dos navegadores: (like chrome46, firefox41, ie6, ie7, ie8, ie9, ie10, ie11, ie edge, …) 201 | 202 | - Motores de renderização: Webkit; Mozilla; Gecko 203 | 204 | - Sistemas Operacionais/Plataformas: Mac; Win: Win10, Win8.1, Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11 205 | 206 | - Dispositivos: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; Windows Phone; J2me; RIM Playbook; mobile (generic) 207 | 208 | - Tecnologia habilitada: JS (usado em conjunto com <html class="no-js"> para ainda ter mais 209 | controle) 210 | 211 | - Detecção de max-width e min-width 212 | 213 | - Detecção de retina 214 | 215 | - Detecção da orientação navegador 216 | 217 | - Detecção de idioma 218 |

219 |

220 | Mais Informações: 221 |
(http://rafael.adm.br/css_browser_selector) 222 |

223 | 224 |

225 | Versões Experimentais: 226 |
(http://github.com/delka/css_browser_selector/) 227 |
(http://github.com/verbatim/css_browser_selector/) 228 |

229 |
230 | 231 |

http://creativecommons.org/licenses/by/2.5/

232 | 233 |

Autor original:

234 | 235 |

236 | Rafael Lima: 237 | http://rafael.adm.br 238 |

239 | 240 |

Com base na idéia do site 37signals

241 | 242 |

http://37signals.com/svn/archives2/browser_selectors_in_css.php

243 | 244 |
245 | 246 | 247 |
248 | 249 | 259 | 274 | 275 | 276 | -------------------------------------------------------------------------------- /css/bootstrap-responsive.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Responsive v2.1.1 3 | * 4 | * Copyright 2012 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | */ 10 | .clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.hidden{display:none;visibility:hidden}.visible-phone{display:none!important}.visible-tablet{display:none!important}.hidden-desktop{display:none!important}.visible-desktop{display:inherit!important}@media(min-width:768px) and (max-width:979px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-tablet{display:inherit!important}.hidden-tablet{display:none!important}}@media(max-width:767px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-phone{display:inherit!important}.hidden-phone{display:none!important}}@media(min-width:1200px){.row{margin-left:-30px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:30px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}.span12{width:1170px}.span11{width:1070px}.span10{width:970px}.span9{width:870px}.span8{width:770px}.span7{width:670px}.span6{width:570px}.span5{width:470px}.span4{width:370px}.span3{width:270px}.span2{width:170px}.span1{width:70px}.offset12{margin-left:1230px}.offset11{margin-left:1130px}.offset10{margin-left:1030px}.offset9{margin-left:930px}.offset8{margin-left:830px}.offset7{margin-left:730px}.offset6{margin-left:630px}.offset5{margin-left:530px}.offset4{margin-left:430px}.offset3{margin-left:330px}.offset2{margin-left:230px}.offset1{margin-left:130px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.45299145299145%;*width:91.39979996362975%}.row-fluid .span10{width:82.90598290598291%;*width:82.8527914166212%}.row-fluid .span9{width:74.35897435897436%;*width:74.30578286961266%}.row-fluid .span8{width:65.81196581196582%;*width:65.75877432260411%}.row-fluid .span7{width:57.26495726495726%;*width:57.21176577559556%}.row-fluid .span6{width:48.717948717948715%;*width:48.664757228587014%}.row-fluid .span5{width:40.17094017094017%;*width:40.11774868157847%}.row-fluid .span4{width:31.623931623931625%;*width:31.570740134569924%}.row-fluid .span3{width:23.076923076923077%;*width:23.023731587561375%}.row-fluid .span2{width:14.52991452991453%;*width:14.476723040552828%}.row-fluid .span1{width:5.982905982905983%;*width:5.929714493544281%}.row-fluid .offset12{margin-left:105.12820512820512%;*margin-left:105.02182214948171%}.row-fluid .offset12:first-child{margin-left:102.56410256410257%;*margin-left:102.45771958537915%}.row-fluid .offset11{margin-left:96.58119658119658%;*margin-left:96.47481360247316%}.row-fluid .offset11:first-child{margin-left:94.01709401709402%;*margin-left:93.91071103837061%}.row-fluid .offset10{margin-left:88.03418803418803%;*margin-left:87.92780505546462%}.row-fluid .offset10:first-child{margin-left:85.47008547008548%;*margin-left:85.36370249136206%}.row-fluid .offset9{margin-left:79.48717948717949%;*margin-left:79.38079650845607%}.row-fluid .offset9:first-child{margin-left:76.92307692307693%;*margin-left:76.81669394435352%}.row-fluid .offset8{margin-left:70.94017094017094%;*margin-left:70.83378796144753%}.row-fluid .offset8:first-child{margin-left:68.37606837606839%;*margin-left:68.26968539734497%}.row-fluid .offset7{margin-left:62.393162393162385%;*margin-left:62.28677941443899%}.row-fluid .offset7:first-child{margin-left:59.82905982905982%;*margin-left:59.72267685033642%}.row-fluid .offset6{margin-left:53.84615384615384%;*margin-left:53.739770867430444%}.row-fluid .offset6:first-child{margin-left:51.28205128205128%;*margin-left:51.175668303327875%}.row-fluid .offset5{margin-left:45.299145299145295%;*margin-left:45.1927623204219%}.row-fluid .offset5:first-child{margin-left:42.73504273504273%;*margin-left:42.62865975631933%}.row-fluid .offset4{margin-left:36.75213675213675%;*margin-left:36.645753773413354%}.row-fluid .offset4:first-child{margin-left:34.18803418803419%;*margin-left:34.081651209310785%}.row-fluid .offset3{margin-left:28.205128205128204%;*margin-left:28.0987452264048%}.row-fluid .offset3:first-child{margin-left:25.641025641025642%;*margin-left:25.53464266230224%}.row-fluid .offset2{margin-left:19.65811965811966%;*margin-left:19.551736679396257%}.row-fluid .offset2:first-child{margin-left:17.094017094017094%;*margin-left:16.98763411529369%}.row-fluid .offset1{margin-left:11.11111111111111%;*margin-left:11.004728132387708%}.row-fluid .offset1:first-child{margin-left:8.547008547008547%;*margin-left:8.440625568285142%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:30px}input.span12,textarea.span12,.uneditable-input.span12{width:1156px}input.span11,textarea.span11,.uneditable-input.span11{width:1056px}input.span10,textarea.span10,.uneditable-input.span10{width:956px}input.span9,textarea.span9,.uneditable-input.span9{width:856px}input.span8,textarea.span8,.uneditable-input.span8{width:756px}input.span7,textarea.span7,.uneditable-input.span7{width:656px}input.span6,textarea.span6,.uneditable-input.span6{width:556px}input.span5,textarea.span5,.uneditable-input.span5{width:456px}input.span4,textarea.span4,.uneditable-input.span4{width:356px}input.span3,textarea.span3,.uneditable-input.span3{width:256px}input.span2,textarea.span2,.uneditable-input.span2{width:156px}input.span1,textarea.span1,.uneditable-input.span1{width:56px}.thumbnails{margin-left:-30px}.thumbnails>li{margin-left:30px}.row-fluid .thumbnails{margin-left:0}}@media(min-width:768px) and (max-width:979px){.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:20px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px}.span12{width:724px}.span11{width:662px}.span10{width:600px}.span9{width:538px}.span8{width:476px}.span7{width:414px}.span6{width:352px}.span5{width:290px}.span4{width:228px}.span3{width:166px}.span2{width:104px}.span1{width:42px}.offset12{margin-left:764px}.offset11{margin-left:702px}.offset10{margin-left:640px}.offset9{margin-left:578px}.offset8{margin-left:516px}.offset7{margin-left:454px}.offset6{margin-left:392px}.offset5{margin-left:330px}.offset4{margin-left:268px}.offset3{margin-left:206px}.offset2{margin-left:144px}.offset1{margin-left:82px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.7624309392265194%;*margin-left:2.709239449864817%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.43646408839778%;*width:91.38327259903608%}.row-fluid .span10{width:82.87292817679558%;*width:82.81973668743387%}.row-fluid .span9{width:74.30939226519337%;*width:74.25620077583166%}.row-fluid .span8{width:65.74585635359117%;*width:65.69266486422946%}.row-fluid .span7{width:57.18232044198895%;*width:57.12912895262725%}.row-fluid .span6{width:48.61878453038674%;*width:48.56559304102504%}.row-fluid .span5{width:40.05524861878453%;*width:40.00205712942283%}.row-fluid .span4{width:31.491712707182323%;*width:31.43852121782062%}.row-fluid .span3{width:22.92817679558011%;*width:22.87498530621841%}.row-fluid .span2{width:14.3646408839779%;*width:14.311449394616199%}.row-fluid .span1{width:5.801104972375691%;*width:5.747913483013988%}.row-fluid .offset12{margin-left:105.52486187845304%;*margin-left:105.41847889972962%}.row-fluid .offset12:first-child{margin-left:102.76243093922652%;*margin-left:102.6560479605031%}.row-fluid .offset11{margin-left:96.96132596685082%;*margin-left:96.8549429881274%}.row-fluid .offset11:first-child{margin-left:94.1988950276243%;*margin-left:94.09251204890089%}.row-fluid .offset10{margin-left:88.39779005524862%;*margin-left:88.2914070765252%}.row-fluid .offset10:first-child{margin-left:85.6353591160221%;*margin-left:85.52897613729868%}.row-fluid .offset9{margin-left:79.8342541436464%;*margin-left:79.72787116492299%}.row-fluid .offset9:first-child{margin-left:77.07182320441989%;*margin-left:76.96544022569647%}.row-fluid .offset8{margin-left:71.2707182320442%;*margin-left:71.16433525332079%}.row-fluid .offset8:first-child{margin-left:68.50828729281768%;*margin-left:68.40190431409427%}.row-fluid .offset7{margin-left:62.70718232044199%;*margin-left:62.600799341718584%}.row-fluid .offset7:first-child{margin-left:59.94475138121547%;*margin-left:59.838368402492065%}.row-fluid .offset6{margin-left:54.14364640883978%;*margin-left:54.037263430116376%}.row-fluid .offset6:first-child{margin-left:51.38121546961326%;*margin-left:51.27483249088986%}.row-fluid .offset5{margin-left:45.58011049723757%;*margin-left:45.47372751851417%}.row-fluid .offset5:first-child{margin-left:42.81767955801105%;*margin-left:42.71129657928765%}.row-fluid .offset4{margin-left:37.01657458563536%;*margin-left:36.91019160691196%}.row-fluid .offset4:first-child{margin-left:34.25414364640884%;*margin-left:34.14776066768544%}.row-fluid .offset3{margin-left:28.45303867403315%;*margin-left:28.346655695309746%}.row-fluid .offset3:first-child{margin-left:25.69060773480663%;*margin-left:25.584224756083227%}.row-fluid .offset2{margin-left:19.88950276243094%;*margin-left:19.783119783707537%}.row-fluid .offset2:first-child{margin-left:17.12707182320442%;*margin-left:17.02068884448102%}.row-fluid .offset1{margin-left:11.32596685082873%;*margin-left:11.219583872105325%}.row-fluid .offset1:first-child{margin-left:8.56353591160221%;*margin-left:8.457152932878806%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:20px}input.span12,textarea.span12,.uneditable-input.span12{width:710px}input.span11,textarea.span11,.uneditable-input.span11{width:648px}input.span10,textarea.span10,.uneditable-input.span10{width:586px}input.span9,textarea.span9,.uneditable-input.span9{width:524px}input.span8,textarea.span8,.uneditable-input.span8{width:462px}input.span7,textarea.span7,.uneditable-input.span7{width:400px}input.span6,textarea.span6,.uneditable-input.span6{width:338px}input.span5,textarea.span5,.uneditable-input.span5{width:276px}input.span4,textarea.span4,.uneditable-input.span4{width:214px}input.span3,textarea.span3,.uneditable-input.span3{width:152px}input.span2,textarea.span2,.uneditable-input.span2{width:90px}input.span1,textarea.span1,.uneditable-input.span1{width:28px}}@media(max-width:767px){body{padding-right:20px;padding-left:20px}.navbar-fixed-top,.navbar-fixed-bottom,.navbar-static-top{margin-right:-20px;margin-left:-20px}.container-fluid{padding:0}.dl-horizontal dt{float:none;width:auto;clear:none;text-align:left}.dl-horizontal dd{margin-left:0}.container{width:auto}.row-fluid{width:100%}.row,.thumbnails{margin-left:0}.thumbnails>li{float:none;margin-left:0}[class*="span"],.row-fluid [class*="span"]{display:block;float:none;width:100%;margin-left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.span12,.row-fluid .span12{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.input-large,.input-xlarge,.input-xxlarge,input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.input-prepend input,.input-append input,.input-prepend input[class*="span"],.input-append input[class*="span"]{display:inline-block;width:auto}.controls-row [class*="span"]+[class*="span"]{margin-left:0}.modal{position:fixed;top:20px;right:20px;left:20px;width:auto;margin:0}.modal.fade.in{top:auto}}@media(max-width:480px){.nav-collapse{-webkit-transform:translate3d(0,0,0)}.page-header h1 small{display:block;line-height:20px}input[type="checkbox"],input[type="radio"]{border:1px solid #ccc}.form-horizontal .control-label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-right:10px;padding-left:10px}.modal{top:10px;right:10px;left:10px}.modal-header .close{padding:10px;margin:-10px}.carousel-caption{position:static}}@media(max-width:979px){body{padding-top:0}.navbar-fixed-top,.navbar-fixed-bottom{position:static}.navbar-fixed-top{margin-bottom:20px}.navbar-fixed-bottom{margin-top:20px}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner{padding:5px}.navbar .container{width:auto;padding:0}.navbar .brand{padding-right:10px;padding-left:10px;margin:0 0 0 -5px}.nav-collapse{clear:both}.nav-collapse .nav{float:none;margin:0 0 10px}.nav-collapse .nav>li{float:none}.nav-collapse .nav>li>a{margin-bottom:2px}.nav-collapse .nav>.divider-vertical{display:none}.nav-collapse .nav .nav-header{color:#777;text-shadow:none}.nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:9px 15px;font-weight:bold;color:#777;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.nav-collapse .dropdown-menu li+li a{margin-bottom:2px}.nav-collapse .nav>li>a:hover,.nav-collapse .dropdown-menu a:hover{background-color:#f2f2f2}.navbar-inverse .nav-collapse .nav>li>a:hover,.navbar-inverse .nav-collapse .dropdown-menu a:hover{background-color:#111}.nav-collapse.in .btn-group{padding:0;margin-top:5px}.nav-collapse .dropdown-menu{position:static;top:auto;left:auto;display:block;float:none;max-width:none;padding:0;margin:0 15px;background-color:transparent;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none}.nav-collapse .dropdown-menu .divider{display:none}.nav-collapse .nav>li>.dropdown-menu:before,.nav-collapse .nav>li>.dropdown-menu:after{display:none}.nav-collapse .navbar-form,.nav-collapse .navbar-search{float:none;padding:10px 15px;margin:10px 0;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1)}.navbar-inverse .nav-collapse .navbar-form,.navbar-inverse .nav-collapse .navbar-search{border-top-color:#111;border-bottom-color:#111}.navbar .nav-collapse .nav.pull-right{float:none;margin-left:0}.nav-collapse,.nav-collapse.collapse{height:0;overflow:hidden}.navbar .btn-navbar{display:block}.navbar-static .navbar-inner{padding-right:10px;padding-left:10px}}@media(min-width:980px){.nav-collapse.collapse{height:auto!important;overflow:visible!important}} -------------------------------------------------------------------------------- /tests/test_blackberry.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Browser Selector Tester: BLACKBERRY 6 | 7 | 8 | 9 | 10 | 11 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |
3 |

CSS Browser Selector +

4 |

A Cross-browser Responsive Design Helper

5 | 6 |

7 | CSS Browser Selector + is a very small javascript which empowers CSS selectors. 8 |

9 | 10 |

11 | http://ridjohansen.github.com/css_browser_selector/ 12 |

13 | 14 |

See an example:

15 | 
 16 | <html lang="pt-br" class="webkit chrome chrome46 win win10 js retina_2x hidpi minw_1200 orientation_landscape datauri">
 17 |
18 | 19 |
20 |
21 |
22 |

23 | 25 | CSS Browser Selector Download 26 | 27 |

28 |
29 |
30 |
31 |
    32 | 33 |
  • 34 |

    Best part

    35 | 36 |
      37 |
    • no more hacks
      • 38 |
    • all compliant code
      • 39 |
    40 |
    • 41 |
  • 42 |

    Cross-browser Media Queries like helper

    43 | 44 |

    Alternative method of mediaqueries for developing responsive design for older browsers.

    45 |
    • 46 |
  • 47 |

    You can now write code for

    48 | 49 |
      50 |
    • browser
      • 51 |
    • browser version
      • 52 |
    • platform
      • 53 |
    • platform version
      • 54 |
    • device
      • 55 |
    • device version
      • 56 |
    • min-width and
      • 57 |
    • max-width screen detection
      • 58 |
    • HiDPI (Retina) screen detection and Pixel Ratio detection
      • 59 |
    • orientation screen detection (landscape or portrait).
      • 60 |
    61 |
    • 62 |
  • 63 |

    Optional namespace

    64 | 65 |

    Add a name space like 'ns-webkit' to all class names by defining 'var css_browser_selector_ns = "ns-";' before loading script.

    66 | 67 |
    • 68 |
69 |
70 |
71 | 72 |

73 | More info: 74 |
(http://rafael.adm.br/css_browser_selector) 75 |

76 | 77 |

78 | beta/experimental versions: 79 |
(https://github.com/delka/css_browser_selector/) 80 |
(https://github.com/verbatim/css_browser_selector/) 81 |

82 |
83 | 84 | 85 |
86 |
87 | 88 |

Identifies

89 |
    90 |
  • browsers: Firefox; IE; Edge; Opera; Safari; Chrome, Konqueror, Iron
    • 91 |
  • browser versions: (like chrome46, firefox41, ie6, ie7, ie8, ie9, ie10, ie11, ie edge, …)
    • 92 |
  • rendering engines: Webkit; Mozilla; Gecko
    • 93 |
  • platforms/OSes: Mac; Win: Win10, Win8.1, Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11
    • 94 |
  • devices: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; Windows Phone; J2me; RIM Playbook; mobile (generic)
    • 95 |
  • viewport: min-width/max-width screen detection 96 |
  • retina: HiDPI (Retina) screen detection and Pixel Ratio detection 97 |
  • orientation: landscape or portrait 98 |
  • enabled technology: JS (use in conjunction with <html class="no-js"> for even more granular 99 | control) 100 |
    • 101 |
  • language detection
    • 102 |
103 | 104 |

Recent contributors to 0.5, 0.6, 0.7, 0.8:

105 | 106 |
    107 |
  • 108 | improve and update features for cross-browser development 109 |
    https://github.com/ridjohansen/css_browser_selector/ 110 |
    • 111 |
  • 112 | new Win OS, Browsers and WinPhone detection, save existing html classes: 113 |
    https://github.com/delka/css_browser_selector/ 114 |
    • 115 |
  • 116 | more detailed IE detection: 117 |
    https://github.com/kevingessner/css_browser_selector/ 118 |
    • 119 |
  • 120 | more detailed WIN detection: 121 |
    https://github.com/saar/css_browser_selector 122 |
    • 123 | 124 |
  • 125 | no-js to js: 126 |
    paul irish: http://paulirish.com/2009/avoiding-the-fouc-v3/ 127 |
    • 128 | 129 |
  • 130 | mac versioning 131 |
    https://github.com/haraldmartin/css_browser_selector 132 |
    • 133 |
134 | 135 |

Version History

136 |
    137 |
  • 138 | v0.81 2015-10-30 139 |
    Fix IE8 error 140 |
    • 141 |
  • 142 | v0.8 2015-10-29 143 |
    Add support for Windows 8.1 and Windows 10 144 |
    Add support for Windows Phone OS 7,8,10. 145 |
    Add IE Edge Support 146 |
    Save existing html classes 147 |
    Prevent global variables - wrap code into anonymous function 148 |
    • 149 |
  • 150 | v0.71 2014-01-23 151 |
    Add IE11 detection 152 |
    • 153 |
  • 154 | v0.7 2013-04-01 155 |
    Add support to Hi-dpi displays Selector 156 |
    Add Pixel Ratio support for 1.5 and 2 157 |
    Add support to dataURI's Selector 158 |
    • 159 |
  • 160 | v0.6.2 2012-09-10 161 |
    add new features for cross-browser development 162 |
    update the commons devices width (based on Twitter Bootstrap) 163 |
    improve continuously evaluates browser max-width and min-width (helper for mediaqueries-like screen 164 | width classes) 165 |
    improve continuously evaluates browser orientation (helper for mediaqueries-like orientation 166 | classes) 167 |
    • 168 |
  • 169 | v0.6.1 2012-03-14 170 |
    iOS version detection 171 |
    beta: detect if being run in iPad app. 172 |
    (from: http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript) 173 |
    • 174 |
  • 175 | v0.6.0 2012-01-24 176 |
    more detailed support for Opera, Chrome, Safari (and revised support for Firefox) 177 |
    versioning for Chrome, Blackberry, Android, Mac 178 |
    Android device detection 179 |
    altered how 'mobile' is deterimed to be added to the class string 180 |
    language detection 181 |
    RIM Playbook added 182 |
    continuously evaluates browser max width (in case of resizing) 183 |
    continuously evaluates browser orientation (portrait vs. landscape) 184 |
    • 185 |
  • 186 | v0.5.0 2011-08-24 187 |
    any version of Firefox 188 |
    more versions of Windows (Win8 [tentative], Win7, Vista, XP, Win2k) 189 |
    more versions of IE under unique conditions 190 |
    if "no-js" in HTML class: removes and replaces with "js" (<html class="no-js">) 191 |
    • 192 |
193 | 194 |

Resources

195 | 196 |
    197 |
  • 198 | navigator.userAgent strings: 199 |
    http://en.wikipedia.org/wiki/User_agent 200 |
    http://www.useragentstring.com/pages/useragentstring.php 201 |
    http://www.user-agents.org 202 |
    http://www.zytrax.com/tech/web/mobile_ids.html 203 |
    • 204 |
  • 205 | history of the user agent string: 206 |
    http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/ 207 |
    • 208 |
  • 209 | language list: 210 |
    http://msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx 211 |
    • 212 |
  • 213 | windows nt list 214 |
    http://en.wikipedia.org/wiki/Windows_NT 215 |
    • 216 |
  • 217 | blackberry user agent string interpertation: 218 |
    http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-detect-the-BlackBerry-Browser/ta-p/559862 219 |
    • 220 |
  • 221 | javascript compression: 222 |
    http://minifyjavascript.com 223 |
    • 224 |
  • 225 | screen resolutions: 226 |
    http://cartoonized.net/cellphone-screen-resolution.php 227 |
    • 228 |
  • 229 | aspect ratio: 230 |
    http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm 231 |
    • 232 |
  • 233 | iOS detection: 234 |
    http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript 235 |
    • 236 |
237 | 238 |

Other Versions

239 |
    240 |
  • 241 | Ruby on Rails Plugin by Reid MacDonald 242 |
    http://latimes.rubyforge.org/svn/plugins/css_browser_selector/ 243 |
    • 244 |
  • 245 | PHP CSS Browser Selector by Bastian Allgeier 246 |
    http://bastian-allgeier.de/css_browser_selector/ 247 |
  • 248 | Wordpress Plugin by Adrian hanft 249 |
    http://wordpress.org/extend/plugins/browser-specific-css/ 250 |
    • 251 |
252 | 253 |

Example

254 |
255 |
256 |
257 |

Browser, Device, OS and Javascript detection

258 | 
259 | <style>
260 | .ie .example { background-color: yellow; }
261 | .ie7 .example { background-color: orange }
262 | .gecko .example { background-color: gray; }
263 | .win.gecko .example { background-color: red; }
264 | .linux.gecko .example { background-color: pink; }
265 | .opera .example { background-color: green; }
266 | .konqueror .example { background-color: blue; }
267 | .webkit .example { background-color: black; }
268 | .chrome .example { background-color: cyan; }
269 | .example { width: 100px; height: 100px; }
270 | .no-js, .no_js, .nojs { display: block; }
271 | .js { display: none; }
272 | </style>
273 |
274 |
275 | 276 |
277 |

dataURI Selector

278 | 
279 | <style>
280 | .datauri .example_bg {
281 |     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC');
282 | }
283 | .no-datauri .example_bg {
284 |     background-image: url('bg_default.png');
285 | }
286 | .datauri .img_default, .no-datauri .img_uri {
287 |     display: none !important;
288 | }
289 | </style>
290 | 
291 | <div class="example_bg">
292 |   <img class="img_uri" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC" alt="with dataURI" />
293 |   <img class="img_default" src="img_default.png" alt="without dataURI" />
294 | </div>
295 |
296 |
297 | 298 |
299 |

Hi-dpi and Pixel-Ratio Selector

300 | 
301 | <style>
302 | .img_hidpi {
303 |     display: none;
304 | }
305 | .no-hidpi .example_bg {
306 |     background-image: url('bg_default.png');
307 | }
308 | .hidpi .img_default, .no-hidpi .img_hidpi {
309 |     display: none !important;
310 | }
311 | .retina_1x .example_bg {
312 |     background-image: url('bg_hidpi_1x.png');
313 | }
314 | .retina_2x .example_bg {
315 |     background-image: url('bg_hidpi_2x.png');
316 | }
317 | .retina_2x .img_default, .retina_2x .x1 {
318 |     display: none !important;
319 | }
320 | .retina_1x .img_default, .retina_1x .x2 {
321 |     display: none !important;
322 | }
323 | 
324 | or /* http://bjango.com/articles/min-device-pixel-ratio/ */
325 | 
326 | @media
327 | only screen and (min--moz-device-pixel-ratio: 1.5),
328 | only screen and (-o-min-device-pixel-ratio: 3/2),
329 | only screen and (-webkit-min-device-pixel-ratio: 1.5),
330 | only screen and (min-device-pixel-ratio: 1.5) {
331 |     .example_bg {
332 |         background-image: url('bg_hidpi_1x.png');
333 |     }
334 |     .img_default, .x2 {
335 |         display: none;
336 |     }
337 | }
338 | 
339 | @media
340 | only screen and (-webkit-min-device-pixel-ratio: 2),
341 | only screen and (   min--moz-device-pixel-ratio: 2),
342 | only screen and (     -o-min-device-pixel-ratio: 2/1),
343 | only screen and (        min-device-pixel-ratio: 2),
344 | only screen and (                min-resolution: 192dpi),
345 | only screen and (                min-resolution: 2dppx) {
346 |     .example_bg {
347 |         background-image: url('bg_hidpi_2x.png');
348 |     }
349 |     .img_default, .x1 {
350 |         display: none;
351 |     }
352 | }
353 | </style>
354 | 
355 | <div class="example_bg">
356 |     <img class="img_hidpi x2" src="img_hidpi_2x.png" alt="with pixel-ratio >= 2" />
357 |     <img class="img_hidpi x1" src="img_hidpi_1x.png" alt="with pixel-ratio > 1 and < 2" />
358 |     <img class="img_default" src="img_default.png" alt="with pixel-ratio 1 or default" />
359 | </div>
360 |
361 |
362 | 363 |
364 |

Media Queries (Screen Width)

365 | 
366 | <style>
367 | @media (max-width: 767px) {
368 | .example {
369 | border: 2px solid purple!important;
370 | }
371 | }
372 | /* or */
373 | .minw_0 .example, .maxw_767 .example {
374 | border: 2px solid purple!important;
375 | }
376 | 
377 | @media (min-width: 768px) and (max-width: 979px) {
378 | .example {
379 | border: 2px solid green!important;
380 | }
381 | }
382 | /* or */
383 | .minw_768.maxw_979 .example {
384 | border: 2px solid green!important;
385 | }
386 | 
387 | @media (min-width: 1200px) {
388 | .example {
389 | border: 2px solid orange!important;
390 | }
391 | }
392 | /* or */
393 | .minw_1200 .example {
394 | border: 2px solid orange!important;
395 | }
396 | </style>
397 |
398 |
399 |
400 |

Media Queries (Orientation)

401 | 
402 | <style>
403 | @media (orientation: landscape) {
404 | .example {
405 | border: 2px solid red!important;
406 | }
407 | }
408 | /* or */
409 | .orientation_landscape .example {
410 | border: 2px solid red!important;
411 | }
412 | 
413 | @media (orientation: portrait) {
414 | .example {
415 | border: 2px solid blue!important;
416 | }
417 | }
418 | /* or */
419 | .orientation_portrait .example {
420 | border: 2px solid blue!important;
421 | }
422 | </style>
423 |
424 |
425 |
426 |
427 | 428 | 429 |

License

430 | 431 |

http://creativecommons.org/licenses/by/2.5/

432 | 433 |

Original Author

434 | 435 |

436 | Rafael Lima 437 | http://rafael.adm.br 438 |

439 | 440 |

Based on idea by 37signals

441 | 442 |

http://37signals.com/svn/archives2/browser_selectors_in_css.php

443 | 444 |

Contributors

445 |
    446 |
  • Richard Duchatsch Johansen @ridjohansen (http://github.com/ridjohansen)
    • 447 |
  • William Bruno (http://github.com/wbruno)
    • 448 |
  • Ihor Zenich (http://github.com/delka)
    • 449 |
  • Niyaz (http://github.com/niyazpk)
    • 450 |
  • Marcio Trindade (http://github.com/marciotrindade)
    • 451 |
  • rbottarelli (http://github.com/rbottarelli)
    • 452 |
  • Bryan Chow (http://github.com/bryanchow)
    • 453 |
  • Derek Lio (http://github.com/dereklio)
    • 454 |
  • Paul Irish (http://github.com/paulirish)
    • 455 |
  • Preston Badeer
    • 456 |
  • Upekshapriya
    • 457 |
  • André Lopes
    • 458 |
  • Tazio Mirandola - copiaincolla pubblicità
    • 459 |
  • Reid MacDonald (http://geminstallthat.wordpress.com)
    • 460 |
  • Vinicius Braga (http://viniciusbraga.com)
    • 461 |
  • Chris Preece (http://www.mmtdigital.co.uk)
    • 462 |
  • Dominykas
    • 463 |
  • M@ McCray
    • 464 |
  • Daniel Westermann-Clark
    • 465 |
  • Steve Clay (http://mrclay.org/)
    • 466 |
  • Jeff Bellsey
    • 467 |
  • Jean Pierre
    • 468 |
  • Micah Snyder
    • 469 |
  • Derek (http://amphibian.info)
    • 470 |
  • Jesse Scott
    • 471 |
  • Moises Kirsch (http://www.moiblog.com/)
    • 472 |
  • Alex Wiltschko
    • 473 |
  • Chris Warren and Tony Nelson (http://www.imagetrend.com)
    • 474 |
  • glasser
    • 475 |
476 |
477 |
478 | -------------------------------------------------------------------------------- /js/vendor/modernizr-2.6.1-respond-1.1.0.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.1 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+";")+(b||""))}function F(a,b){return typeof a===b}function G(a,b){return!!~(""+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,"function")?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return F(b,"string")||F(b,"undefined")?H(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d',a,""].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return y("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=F(e[d],"function"),F(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),B={}.hasOwnProperty,C;!F(B,"undefined")&&!F(B.call,"undefined")?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&&F(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!F(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J("indexedDB",a)},s.hashchange=function(){return A("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return D("background-color:rgba(150,255,150,.5)"),G(j.backgroundColor,"rgba")},s.hsla=function(){return D("background-color:hsla(120,40%,100%,.5)"),G(j.backgroundColor,"rgba")||G(j.backgroundColor,"hsla")},s.multiplebgs=function(){return D("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J("backgroundSize")},s.borderimage=function(){return J("borderImage")},s.borderradius=function(){return J("borderRadius")},s.boxshadow=function(){return J("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return E("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J("animationName")},s.csscolumns=function(){return J("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return D((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,"gradient")},s.cssreflections=function(){return J("boxReflect")},s.csstransforms=function(){return!!J("transform")},s.csstransforms3d=function(){var a=!!J("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return J("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(['#modernizr:after{content:"',l,'";visibility:hidden}'].join(""),function(b){a=b.offsetHeight>=1}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var L in s)C(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)C(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},D(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return o.call(a)=="[object Function]"}function e(a){return typeof a=="string"}function f(){}function g(a){return!a||a=="loaded"||a=="complete"||a=="uninitialized"}function h(){var a=p.shift();q=1,a?a.t?m(function(){(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){a!="img"&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l={},o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return o.call(a)=="[object Array]"},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f #mq-test-1 { width: 42px; }';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document); 9 | 10 | /*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */ 11 | (function(e){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(respond.mediaQueriesSupported){return}var w=e.document,s=w.documentElement,i=[],k=[],q=[],o={},h=30,f=w.getElementsByTagName("head")[0]||s,g=w.getElementsByTagName("base")[0],b=f.getElementsByTagName("link"),d=[],a=function(){var D=b,y=D.length,B=0,A,z,C,x;for(;B-1,minw:F.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:F.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}}j()},l,r,v=function(){var z,A=w.createElement("div"),x=w.body,y=false;A.style.cssText="position:absolute;font-size:1em;width:1em";if(!x){x=y=w.createElement("body");x.style.background="none"}x.appendChild(A);s.insertBefore(x,s.firstChild);z=A.offsetWidth;if(y){s.removeChild(x)}else{x.removeChild(A)}z=p=parseFloat(z);return z},p,j=function(I){var x="clientWidth",B=s[x],H=w.compatMode==="CSS1Compat"&&B||w.body[x]||B,D={},G=b[b.length-1],z=(new Date()).getTime();if(I&&l&&z-l-1?(p||v()):1)}if(!!J){J=parseFloat(J)*(J.indexOf(y)>-1?(p||v()):1)}if(!K.hasquery||(!A||!L)&&(A||H>=C)&&(L||H<=J)){if(!D[K.media]){D[K.media]=[]}D[K.media].push(k[K.rules])}}for(var E in q){if(q[E]&&q[E].parentNode===f){f.removeChild(q[E])}}for(var E in D){var M=w.createElement("style"),F=D[E].join("\n");M.type="text/css";M.media=E;f.insertBefore(M,G.nextSibling);if(M.styleSheet){M.styleSheet.cssText=F}else{M.appendChild(w.createTextNode(F))}q.push(M)}},n=function(x,z){var y=c();if(!y){return}y.open("GET",x,true);y.onreadystatechange=function(){if(y.readyState!=4||y.status!=200&&y.status!=304){return}z(y.responseText)};if(y.readyState==4){return}y.send(null)},c=(function(){var x=false;try{x=new XMLHttpRequest()}catch(y){x=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return x}})();a();respond.update=a;function t(){j(true)}if(e.addEventListener){e.addEventListener("resize",t,false)}else{if(e.attachEvent){e.attachEvent("onresize",t)}}})(this); -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | # Apache configuration file 2 | # httpd.apache.org/docs/2.2/mod/quickreference.html 3 | 4 | # Note .htaccess files are an overhead, this logic should be in your Apache 5 | # config if possible: httpd.apache.org/docs/2.2/howto/htaccess.html 6 | 7 | # Techniques in here adapted from all over, including: 8 | # Kroc Camen: camendesign.com/.htaccess 9 | # perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/ 10 | # Sample .htaccess file of CMS MODx: modxcms.com 11 | 12 | 13 | # ---------------------------------------------------------------------- 14 | # Better website experience for IE users 15 | # ---------------------------------------------------------------------- 16 | 17 | # Force the latest IE version, in various cases when it may fall back to IE7 mode 18 | # github.com/rails/rails/commit/123eb25#commitcomment-118920 19 | # Use ChromeFrame if it's installed for a better experience for the poor IE folk 20 | 21 | 22 | Header set X-UA-Compatible "IE=Edge,chrome=1" 23 | # mod_headers can't match by content-type, but we don't want to send this header on *everything*... 24 | 25 | Header unset X-UA-Compatible 26 | 27 | 28 | 29 | 30 | # ---------------------------------------------------------------------- 31 | # Cross-domain AJAX requests 32 | # ---------------------------------------------------------------------- 33 | 34 | # Serve cross-domain Ajax requests, disabled by default. 35 | # enable-cors.org 36 | # code.google.com/p/html5security/wiki/CrossOriginRequestSecurity 37 | 38 | # 39 | # Header set Access-Control-Allow-Origin "*" 40 | # 41 | 42 | 43 | # ---------------------------------------------------------------------- 44 | # CORS-enabled images (@crossorigin) 45 | # ---------------------------------------------------------------------- 46 | 47 | # Send CORS headers if browsers request them; enabled by default for images. 48 | # developer.mozilla.org/en/CORS_Enabled_Image 49 | # blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html 50 | # hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ 51 | # wiki.mozilla.org/Security/Reviews/crossoriginAttribute 52 | 53 | 54 | 55 | # mod_headers, y u no match by Content-Type?! 56 | 57 | SetEnvIf Origin ":" IS_CORS 58 | Header set Access-Control-Allow-Origin "*" env=IS_CORS 59 | 60 | 61 | 62 | 63 | 64 | # ---------------------------------------------------------------------- 65 | # Webfont access 66 | # ---------------------------------------------------------------------- 67 | 68 | # Allow access from all domains for webfonts. 69 | # Alternatively you could only whitelist your 70 | # subdomains like "subdomain.example.com". 71 | 72 | 73 | 74 | Header set Access-Control-Allow-Origin "*" 75 | 76 | 77 | 78 | 79 | # ---------------------------------------------------------------------- 80 | # Proper MIME type for all files 81 | # ---------------------------------------------------------------------- 82 | 83 | # JavaScript 84 | # Normalize to standard type (it's sniffed in IE anyways) 85 | # tools.ietf.org/html/rfc4329#section-7.2 86 | AddType application/javascript js jsonp 87 | AddType application/json json 88 | 89 | # Audio 90 | AddType audio/ogg oga ogg 91 | AddType audio/mp4 m4a f4a f4b 92 | 93 | # Video 94 | AddType video/ogg ogv 95 | AddType video/mp4 mp4 m4v f4v f4p 96 | AddType video/webm webm 97 | AddType video/x-flv flv 98 | 99 | # SVG 100 | # Required for svg webfonts on iPad 101 | # twitter.com/FontSquirrel/status/14855840545 102 | AddType image/svg+xml svg svgz 103 | AddEncoding gzip svgz 104 | 105 | # Webfonts 106 | AddType application/vnd.ms-fontobject eot 107 | AddType application/x-font-ttf ttf ttc 108 | AddType font/opentype otf 109 | AddType application/x-font-woff woff 110 | 111 | # Assorted types 112 | AddType image/x-icon ico 113 | AddType image/webp webp 114 | AddType text/cache-manifest appcache manifest 115 | AddType text/x-component htc 116 | AddType application/xml rss atom xml rdf 117 | AddType application/x-chrome-extension crx 118 | AddType application/x-opera-extension oex 119 | AddType application/x-xpinstall xpi 120 | AddType application/octet-stream safariextz 121 | AddType application/x-web-app-manifest+json webapp 122 | AddType text/x-vcard vcf 123 | AddType application/x-shockwave-flash swf 124 | AddType text/vtt vtt 125 | 126 | 127 | # ---------------------------------------------------------------------- 128 | # Allow concatenation from within specific js and css files 129 | # ---------------------------------------------------------------------- 130 | 131 | # e.g. Inside of script.combined.js you could have 132 | # 133 | # 134 | # and they would be included into this single file. 135 | 136 | # This is not in use in the boilerplate as it stands. You may 137 | # choose to use this technique if you do not have a build process. 138 | 139 | # 140 | # Options +Includes 141 | # AddOutputFilterByType INCLUDES application/javascript application/json 142 | # SetOutputFilter INCLUDES 143 | # 144 | 145 | # 146 | # Options +Includes 147 | # AddOutputFilterByType INCLUDES text/css 148 | # SetOutputFilter INCLUDES 149 | # 150 | 151 | 152 | # ---------------------------------------------------------------------- 153 | # Gzip compression 154 | # ---------------------------------------------------------------------- 155 | 156 | 157 | 158 | # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/ 159 | 160 | 161 | SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding 162 | RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding 163 | 164 | 165 | 166 | # Compress all output labeled with one of the following MIME-types 167 | 168 | AddOutputFilterByType DEFLATE application/atom+xml \ 169 | application/javascript \ 170 | application/json \ 171 | application/rss+xml \ 172 | application/vnd.ms-fontobject \ 173 | application/x-font-ttf \ 174 | application/xhtml+xml \ 175 | application/xml \ 176 | font/opentype \ 177 | image/svg+xml \ 178 | image/x-icon \ 179 | text/css \ 180 | text/html \ 181 | text/plain \ 182 | text/x-component \ 183 | text/xml 184 | 185 | 186 | 187 | 188 | 189 | # ---------------------------------------------------------------------- 190 | # Expires headers (for better cache control) 191 | # ---------------------------------------------------------------------- 192 | 193 | # These are pretty far-future expires headers. 194 | # They assume you control versioning with filename-based cache busting 195 | # Additionally, consider that outdated proxies may miscache 196 | # www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/ 197 | 198 | # If you don't use filenames to version, lower the CSS and JS to something like 199 | # "access plus 1 week". 200 | 201 | 202 | ExpiresActive on 203 | 204 | # Perhaps better to whitelist expires rules? Perhaps. 205 | ExpiresDefault "access plus 1 month" 206 | 207 | # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5) 208 | ExpiresByType text/cache-manifest "access plus 0 seconds" 209 | 210 | # Your document html 211 | ExpiresByType text/html "access plus 0 seconds" 212 | 213 | # Data 214 | ExpiresByType text/xml "access plus 0 seconds" 215 | ExpiresByType application/xml "access plus 0 seconds" 216 | ExpiresByType application/json "access plus 0 seconds" 217 | 218 | # Feed 219 | ExpiresByType application/rss+xml "access plus 1 hour" 220 | ExpiresByType application/atom+xml "access plus 1 hour" 221 | 222 | # Favicon (cannot be renamed) 223 | ExpiresByType image/x-icon "access plus 1 week" 224 | 225 | # Media: images, video, audio 226 | ExpiresByType image/gif "access plus 1 month" 227 | ExpiresByType image/png "access plus 1 month" 228 | ExpiresByType image/jpeg "access plus 1 month" 229 | ExpiresByType video/ogg "access plus 1 month" 230 | ExpiresByType audio/ogg "access plus 1 month" 231 | ExpiresByType video/mp4 "access plus 1 month" 232 | ExpiresByType video/webm "access plus 1 month" 233 | 234 | # HTC files (css3pie) 235 | ExpiresByType text/x-component "access plus 1 month" 236 | 237 | # Webfonts 238 | ExpiresByType application/x-font-ttf "access plus 1 month" 239 | ExpiresByType font/opentype "access plus 1 month" 240 | ExpiresByType application/x-font-woff "access plus 1 month" 241 | ExpiresByType image/svg+xml "access plus 1 month" 242 | ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 243 | 244 | # CSS and JavaScript 245 | ExpiresByType text/css "access plus 1 year" 246 | ExpiresByType application/javascript "access plus 1 year" 247 | 248 | 249 | 250 | 251 | # ---------------------------------------------------------------------- 252 | # Prevent mobile network providers from modifying your site 253 | # ---------------------------------------------------------------------- 254 | 255 | # The following header prevents modification of your code over 3G on some 256 | # European providers. 257 | # This is the official 'bypass' suggested by O2 in the UK. 258 | 259 | # 260 | # Header set Cache-Control "no-transform" 261 | # 262 | 263 | 264 | # ---------------------------------------------------------------------- 265 | # ETag removal 266 | # ---------------------------------------------------------------------- 267 | 268 | # FileETag None is not enough for every server. 269 | 270 | Header unset ETag 271 | 272 | 273 | # Since we're sending far-future expires, we don't need ETags for 274 | # static content. 275 | # developer.yahoo.com/performance/rules.html#etags 276 | FileETag None 277 | 278 | 279 | # ---------------------------------------------------------------------- 280 | # Stop screen flicker in IE on CSS rollovers 281 | # ---------------------------------------------------------------------- 282 | 283 | # The following directives stop screen flicker in IE on CSS rollovers - in 284 | # combination with the "ExpiresByType" rules for images (see above). 285 | 286 | # BrowserMatch "MSIE" brokenvary=1 287 | # BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1 288 | # BrowserMatch "Opera" !brokenvary 289 | # SetEnvIf brokenvary 1 force-no-vary 290 | 291 | 292 | # ---------------------------------------------------------------------- 293 | # Set Keep-Alive Header 294 | # ---------------------------------------------------------------------- 295 | 296 | # Keep-Alive allows the server to send multiple requests through one 297 | # TCP-connection. Be aware of possible disadvantages of this setting. Turn on 298 | # if you serve a lot of static content. 299 | 300 | # 301 | # Header set Connection Keep-Alive 302 | # 303 | 304 | 305 | # ---------------------------------------------------------------------- 306 | # Cookie setting from iframes 307 | # ---------------------------------------------------------------------- 308 | 309 | # Allow cookies to be set from iframes (for IE only) 310 | # If needed, specify a path or regex in the Location directive. 311 | 312 | # 313 | # Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"" 314 | # 315 | 316 | 317 | # ---------------------------------------------------------------------- 318 | # Start rewrite engine 319 | # ---------------------------------------------------------------------- 320 | 321 | # Turning on the rewrite engine is necessary for the following rules and 322 | # features. FollowSymLinks must be enabled for this to work. 323 | 324 | # Some cloud hosting services require RewriteBase to be set: goo.gl/HOcPN 325 | # If using the h5bp in a subdirectory, use `RewriteBase /foo` instead where 326 | # 'foo' is your directory. 327 | 328 | # If your web host doesn't allow the FollowSymlinks option, you may need to 329 | # comment it out and use `Options +SymLinksOfOwnerMatch`, but be aware of the 330 | # performance impact: http://goo.gl/Mluzd 331 | 332 | 333 | Options +FollowSymlinks 334 | # Options +SymLinksIfOwnerMatch 335 | RewriteEngine On 336 | # RewriteBase / 337 | 338 | 339 | 340 | # ---------------------------------------------------------------------- 341 | # Suppress or force the "www." at the beginning of URLs 342 | # ---------------------------------------------------------------------- 343 | 344 | # The same content should never be available under two different URLs - 345 | # especially not with and without "www." at the beginning, since this can cause 346 | # SEO problems (duplicate content). That's why you should choose one of the 347 | # alternatives and redirect the other one. 348 | 349 | # By default option 1 (no "www.") is activated. 350 | # no-www.org/faq.php?q=class_b 351 | 352 | # If you'd prefer to use option 2, just comment out all option 1 lines 353 | # and uncomment option 2. 354 | 355 | # IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME! 356 | 357 | # ---------------------------------------------------------------------- 358 | 359 | # Option 1: 360 | # Rewrite "www.example.com -> example.com". 361 | 362 | 363 | RewriteCond %{HTTPS} !=on 364 | RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] 365 | RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L] 366 | 367 | 368 | # ---------------------------------------------------------------------- 369 | 370 | # Option 2: 371 | # Rewrite "example.com -> www.example.com". 372 | # Be aware that the following rule might not be a good idea if you use "real" 373 | # subdomains for certain parts of your website. 374 | 375 | # 376 | # RewriteCond %{HTTPS} !=on 377 | # RewriteCond %{HTTP_HOST} !^www\..+$ [NC] 378 | # RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 379 | # 380 | 381 | 382 | # ---------------------------------------------------------------------- 383 | # Built-in filename-based cache busting 384 | # ---------------------------------------------------------------------- 385 | 386 | # If you're not using the build script to manage your filename version revving, 387 | # you might want to consider enabling this, which will route requests for 388 | # /css/style.20110203.css to /css/style.css 389 | 390 | # To understand why this is important and a better idea than all.css?v1231, 391 | # read: github.com/h5bp/html5-boilerplate/wiki/cachebusting 392 | 393 | # 394 | # RewriteCond %{REQUEST_FILENAME} !-f 395 | # RewriteCond %{REQUEST_FILENAME} !-d 396 | # RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L] 397 | # 398 | 399 | 400 | # ---------------------------------------------------------------------- 401 | # Prevent SSL cert warnings 402 | # ---------------------------------------------------------------------- 403 | 404 | # Rewrite secure requests properly to prevent SSL cert warnings, e.g. prevent 405 | # https://www.example.com when your cert only allows https://secure.example.com 406 | 407 | # 408 | # RewriteCond %{SERVER_PORT} !^443 409 | # RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L] 410 | # 411 | 412 | 413 | # ---------------------------------------------------------------------- 414 | # Prevent 404 errors for non-existing redirected folders 415 | # ---------------------------------------------------------------------- 416 | 417 | # without -MultiViews, Apache will give a 404 for a rewrite if a folder of the 418 | # same name does not exist. 419 | # webmasterworld.com/apache/3808792.htm 420 | 421 | Options -MultiViews 422 | 423 | 424 | # ---------------------------------------------------------------------- 425 | # Custom 404 page 426 | # ---------------------------------------------------------------------- 427 | 428 | # You can add custom pages to handle 500 or 403 pretty easily, if you like. 429 | # If you are hosting your site in subdirectory, adjust this accordingly 430 | # e.g. ErrorDocument 404 /subdir/404.html 431 | ErrorDocument 404 /404.html 432 | 433 | 434 | # ---------------------------------------------------------------------- 435 | # UTF-8 encoding 436 | # ---------------------------------------------------------------------- 437 | 438 | # Use UTF-8 encoding for anything served text/plain or text/html 439 | AddDefaultCharset utf-8 440 | 441 | # Force UTF-8 for a number of file formats 442 | AddCharset utf-8 .atom .css .js .json .rss .vtt .xml 443 | 444 | 445 | # ---------------------------------------------------------------------- 446 | # A little more security 447 | # ---------------------------------------------------------------------- 448 | 449 | # To avoid displaying the exact version number of Apache being used, add the 450 | # following to httpd.conf (it will not work in .htaccess): 451 | # ServerTokens Prod 452 | 453 | # "-Indexes" will have Apache block users from browsing folders without a 454 | # default document Usually you should leave this activated, because you 455 | # shouldn't allow everybody to surf through every folder on your server (which 456 | # includes rather private places like CMS system folders). 457 | 458 | Options -Indexes 459 | 460 | 461 | # Block access to "hidden" directories or files whose names begin with a 462 | # period. This includes directories used by version control systems such as 463 | # Subversion or Git. 464 | 465 | RewriteCond %{SCRIPT_FILENAME} -d [OR] 466 | RewriteCond %{SCRIPT_FILENAME} -f 467 | RewriteRule "(^|/)\." - [F] 468 | 469 | 470 | # Block access to backup and source files. These files may be left by some 471 | # text/html editors and pose a great security danger, when anyone can access 472 | # them. 473 | 474 | Order allow,deny 475 | Deny from all 476 | Satisfy All 477 | 478 | 479 | # If your server is not already configured as such, the following directive 480 | # should be uncommented in order to set PHP's register_globals option to OFF. 481 | # This closes a major security hole that is abused by most XSS (cross-site 482 | # scripting) attacks. For more information: http://php.net/register_globals 483 | # 484 | # IF REGISTER_GLOBALS DIRECTIVE CAUSES 500 INTERNAL SERVER ERRORS: 485 | # 486 | # Your server does not allow PHP directives to be set via .htaccess. In that 487 | # case you must make this change in your php.ini file instead. If you are 488 | # using a commercial web host, contact the administrators for assistance in 489 | # doing this. Not all servers allow local php.ini files, and they should 490 | # include all PHP configurations (not just this one), or you will effectively 491 | # reset everything to PHP defaults. Consult www.php.net for more detailed 492 | # information about setting PHP directives. 493 | 494 | # php_flag register_globals Off 495 | 496 | # Rename session cookie to something else, than PHPSESSID 497 | # php_value session.name sid 498 | 499 | # Disable magic quotes (This feature has been DEPRECATED as of PHP 5.3.0 and REMOVED as of PHP 5.4.0.) 500 | # php_flag magic_quotes_gpc Off 501 | 502 | # Do not show you are using PHP 503 | # Note: Move this line to php.ini since it won't work in .htaccess 504 | # php_flag expose_php Off 505 | 506 | # Level of log detail - log all errors 507 | # php_value error_reporting -1 508 | 509 | # Write errors to log file 510 | # php_flag log_errors On 511 | 512 | # Do not display errors in browser (production - Off, development - On) 513 | # php_flag display_errors Off 514 | 515 | # Do not display startup errors (production - Off, development - On) 516 | # php_flag display_startup_errors Off 517 | 518 | # Format errors in plain text 519 | # Note: Leave this setting 'On' for xdebug's var_dump() output 520 | # php_flag html_errors Off 521 | 522 | # Show multiple occurrence of error 523 | # php_flag ignore_repeated_errors Off 524 | 525 | # Show same errors from different sources 526 | # php_flag ignore_repeated_source Off 527 | 528 | # Size limit for error messages 529 | # php_value log_errors_max_len 1024 530 | 531 | # Don't precede error with string (doesn't accept empty string, use whitespace if you need) 532 | # php_value error_prepend_string " " 533 | 534 | # Don't prepend to error (doesn't accept empty string, use whitespace if you need) 535 | # php_value error_append_string " " 536 | 537 | # Increase cookie security 538 | 539 | php_value session.cookie_httponly true 540 | 541 | -------------------------------------------------------------------------------- /tests/tester.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Browser Selector Tester: ANDROID 6 | 7 | 8 | 9 | 10 | 11 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | -------------------------------------------------------------------------------- /index_en.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Browser Selector + | A Cross-browser Responsive Design Helper 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 59 | 60 |
61 |
62 |
63 | 64 | 65 | 66 | 67 | 68 | CSS Browser Selector + 69 | 70 | 80 | 81 |
82 |
83 |
84 | 85 |
86 | 87 | 88 |
89 |

CSS Browser Selector +

90 | 91 | 99 | 100 |

101 | 102 | Hi-dpi screen 103 | 104 | 105 | Pixel-ratio > 1 and < 2 106 | 107 | 108 | Pixel-ratio >= 2 109 | 110 |

111 | 112 |

A Cross-browser Responsive Design Helper

113 | 114 |

115 | CSS Browser Selector + is a very small javascript which empowers CSS selectors. 116 |

117 | 118 |

See an example:

119 | 
120 | <html lang="pt-br" class="">
121 |
122 | 128 | 129 |
130 |
131 |
132 |

133 | 135 | CSS Browser Selector Download 136 | 137 |

138 |

139 | 141 | Github 142 | 143 |

144 |
145 |
146 |
147 |
    148 | 149 |
  • 150 |

    Best part

    151 | 152 |
      153 |
    • no more hacks
      • 154 |
    • all compliant code
      • 155 |
    156 |
    • 157 |
  • 158 |

    Cross-browser Media Queries like helper

    159 | 160 |

    Alternative method of mediaqueries for developing responsive design for older browsers.

    161 |
    • 162 |
  • 163 |

    You can now write code for

    164 | 165 |
      166 |
    • browser
      • 167 |
    • browser version
      • 168 |
    • platform
      • 169 |
    • platform version
      • 170 |
    • device
      • 171 |
    • device version
      • 172 |
    • min-width and
      • 173 |
    • max-width screen detection
      • 174 |
    • HiDPI (Retina) screen detection and Pixel Ratio detection
      • 175 |
    • orientation screen detection (landscape or portrait).
      • 176 |
    177 |
    • 178 |
179 |
180 |
181 | 182 |

183 | More info: 184 |
(http://rafael.adm.br/css_browser_selector) 185 |

186 | 187 |

188 | beta/experimental versions: 189 |
(https://github.com/delka/css_browser_selector/) 190 |
(https://github.com/verbatim/css_browser_selector/) 191 |

192 |
193 | 194 | 195 |
196 |
197 | 198 |

Identifies

199 |
    200 |
  • browsers: Firefox; IE; Edge; Opera; Safari; Chrome, Konqueror, Iron
    • 201 |
  • browser versions: (like chrome46, firefox41, ie6, ie7, ie8, ie9, ie10, ie11, ie edge, …)
    • 202 |
  • rendering engines: Webkit; Mozilla; Gecko
    • 203 |
  • platforms/OSes: Mac; Win: Win10, Win8.1, Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11
    • 204 |
  • devices: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; Windows Phone; J2me; RIM Playbook; mobile (generic)
    • 205 |
  • viewport: min-width/max-width screen detection 206 |
  • retina: HiDPI (Retina) screen detection and Pixel Ratio detection 207 |
  • orientation: landscape or portrait 208 |
  • enabled technology: JS (use in conjunction with <html class="no-js"> for even more granular 209 | control) 210 |
    • 211 |
  • language detection
    • 212 |
213 | 214 |

Recent contributors to 0.5, 0.6, 0.7, 0.8:

215 | 216 |
    217 |
  • 218 | improve and update features for cross-browser development 219 |
    https://github.com/ridjohansen/css_browser_selector/ 220 |
    • 221 |
  • 222 | new Win OS, Browsers and WinPhone detection, save existing html classes: 223 |
    https://github.com/delka/css_browser_selector/ 224 |
    • 225 |
  • 226 | more detailed IE detection: 227 |
    https://github.com/kevingessner/css_browser_selector/ 228 |
    • 229 |
  • 230 | more detailed WIN detection: 231 |
    https://github.com/saar/css_browser_selector 232 |
    • 233 | 234 |
  • 235 | no-js to js: 236 |
    paul irish: http://paulirish.com/2009/avoiding-the-fouc-v3/ 237 |
    • 238 | 239 |
  • 240 | mac versioning 241 |
    https://github.com/haraldmartin/css_browser_selector 242 |
    • 243 |
244 | 245 |

Version History

246 |
    247 |
  • 248 | v0.81 2015-10-30 249 |
    Fix IE8 error 250 |
    • 251 |
  • 252 | v0.8 2015-10-29 253 |
    Add support for Windows 8.1 and Windows 10 254 |
    Add support for Windows Phone OS 7,8,10. 255 |
    Add IE Edge Support 256 |
    Save existing html classes 257 |
    Prevent global variables - wrap code into anonymous function 258 |
    • 259 |
  • 260 | v0.71 2014-01-23 261 |
    Add IE11 detection 262 |
    • 263 |
  • 264 | v0.7 2013-04-01 265 |
    Add support to Hi-dpi displays Selector 266 |
    Add Pixel Ratio support for 1.5 and 2 267 |
    Add support to dataURI's Selector 268 |
    • 269 |
  • 270 | v0.6.2 2012-09-10 271 |
    add new features for cross-browser development 272 |
    update the commons devices width (based on Twitter Bootstrap) 273 |
    improve continuously evaluates browser max-width and min-width (helper for mediaqueries-like screen 274 | width classes) 275 |
    improve continuously evaluates browser orientation (helper for mediaqueries-like orientation 276 | classes) 277 |
    • 278 |
  • 279 | v0.6.1 2012-03-14 280 |
    iOS version detection 281 |
    beta: detect if being run in iPad app. 282 |
    (from: http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript) 283 |
    • 284 |
  • 285 | v0.6.0 2012-01-24 286 |
    more detailed support for Opera, Chrome, Safari (and revised support for Firefox) 287 |
    versioning for Chrome, Blackberry, Android, Mac 288 |
    Android device detection 289 |
    altered how 'mobile' is deterimed to be added to the class string 290 |
    language detection 291 |
    RIM Playbook added 292 |
    continuously evaluates browser max width (in case of resizing) 293 |
    continuously evaluates browser orientation (portrait vs. landscape) 294 |
    • 295 |
  • 296 | v0.5.0 2011-08-24 297 |
    any version of Firefox 298 |
    more versions of Windows (Win8 [tentative], Win7, Vista, XP, Win2k) 299 |
    more versions of IE under unique conditions 300 |
    if "no-js" in HTML class: removes and replaces with "js" (<html class="no-js">) 301 |
    • 302 |
303 | 304 |

Resources

305 | 306 |
    307 |
  • 308 | navigator.userAgent strings: 309 |
    http://en.wikipedia.org/wiki/User_agent 310 |
    http://www.useragentstring.com/pages/useragentstring.php 311 |
    http://www.user-agents.org 312 |
    http://www.zytrax.com/tech/web/mobile_ids.html 313 |
    • 314 |
  • 315 | history of the user agent string: 316 |
    http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/ 317 |
    • 318 |
  • 319 | language list: 320 |
    http://msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx 321 |
    • 322 |
  • 323 | windows nt list 324 |
    http://en.wikipedia.org/wiki/Windows_NT 325 |
    • 326 |
  • 327 | blackberry user agent string interpertation: 328 |
    http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-detect-the-BlackBerry-Browser/ta-p/559862 329 |
    • 330 |
  • 331 | javascript compression: 332 |
    http://minifyjavascript.com 333 |
    • 334 |
  • 335 | screen resolutions: 336 |
    http://cartoonized.net/cellphone-screen-resolution.php 337 |
    • 338 |
  • 339 | aspect ratio: 340 |
    http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm 341 |
    • 342 |
  • 343 | iOS detection: 344 |
    http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript 345 |
    • 346 |
347 | 348 |

Other Versions

349 |
    350 |
  • 351 | Ruby on Rails Plugin by Reid MacDonald 352 |
    http://latimes.rubyforge.org/svn/plugins/css_browser_selector/ 353 |
    • 354 |
  • 355 | PHP CSS Browser Selector by Bastian Allgeier 356 |
    http://bastian-allgeier.de/css_browser_selector/ 357 |
  • 358 | Wordpress Plugin by Adrian hanft 359 |
    http://wordpress.org/extend/plugins/browser-specific-css/ 360 |
    • 361 |
362 | 363 |

Example

364 | 365 |
366 |
367 |
368 |

Browser, Device, OS and Javascript detection

369 | 
370 | <style>
371 | .ie .example { background-color: yellow; }
372 | .ie7 .example { background-color: orange }
373 | .gecko .example { background-color: gray; }
374 | .win.gecko .example { background-color: red; }
375 | .linux.gecko .example { background-color: pink; }
376 | .opera .example { background-color: green; }
377 | .konqueror .example { background-color: blue; }
378 | .webkit .example { background-color: black; }
379 | .chrome .example { background-color: cyan; }
380 | .example { width: 100px; height: 100px; }
381 | .no-js, .no_js, .nojs { display: block; }
382 | .js { display: none; }
383 | </style>
384 |
385 |
386 | 387 |
388 |

dataURI Selector

389 | 
390 | <style>
391 | .datauri .example_bg {
392 |     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC');
393 | }
394 | .no-datauri .example_bg {
395 |     background-image: url('bg_default.png');
396 | }
397 | .datauri .img_default, .no-datauri .img_uri {
398 |     display: none !important;
399 | }
400 | </style>
401 | 
402 | <div class="example_bg">
403 |   <img class="img_uri" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC" alt="with dataURI" /> 
404 |   <img class="img_default" src="img_default.png" alt="without dataURI" /> 
405 | </div>
406 |
407 |
408 | 409 |
410 |

Hi-dpi and Pixel-Ratio Selector

411 | 
412 | <style>
413 | .img_hidpi {
414 |     display: none;
415 | }
416 | .no-hidpi .example_bg {
417 |     background-image: url('bg_default.png');
418 | }
419 | .hidpi .img_default, .no-hidpi .img_hidpi {
420 |     display: none !important;
421 | }
422 | .retina_1x .example_bg {
423 |     background-image: url('bg_hidpi_1x.png');
424 | }
425 | .retina_2x .example_bg {
426 |     background-image: url('bg_hidpi_2x.png');
427 | }
428 | .retina_2x .img_default, .retina_2x .x1 {
429 |     display: none !important;
430 | }
431 | .retina_1x .img_default, .retina_1x .x2 {
432 |     display: none !important;
433 | }
434 | 
435 | or /* http://bjango.com/articles/min-device-pixel-ratio/ */
436 | 
437 | @media 
438 | only screen and (min--moz-device-pixel-ratio: 1.5),
439 | only screen and (-o-min-device-pixel-ratio: 3/2),
440 | only screen and (-webkit-min-device-pixel-ratio: 1.5),
441 | only screen and (min-device-pixel-ratio: 1.5) {
442 |     .example_bg {
443 |         background-image: url('bg_hidpi_1x.png');
444 |     }
445 |     .img_default, .x2 {
446 |         display: none;
447 |     }
448 | }
449 | 
450 | @media
451 | only screen and (-webkit-min-device-pixel-ratio: 2),
452 | only screen and (   min--moz-device-pixel-ratio: 2),
453 | only screen and (     -o-min-device-pixel-ratio: 2/1),
454 | only screen and (        min-device-pixel-ratio: 2),
455 | only screen and (                min-resolution: 192dpi),
456 | only screen and (                min-resolution: 2dppx) { 
457 |     .example_bg {
458 |         background-image: url('bg_hidpi_2x.png');
459 |     }
460 |     .img_default, .x1 {
461 |         display: none;
462 |     }
463 | }
464 | </style>
465 | 
466 | <div class="example_bg">
467 |     <img class="img_hidpi x2" src="img_hidpi_2x.png" alt="with pixel-ratio >= 2" />
468 |     <img class="img_hidpi x1" src="img_hidpi_1x.png" alt="with pixel-ratio > 1 and < 2" /> 
469 |     <img class="img_default" src="img_default.png" alt="with pixel-ratio 1 or default" /> 
470 | </div>
471 |
472 |
473 | 474 |
475 |

Media Queries (Screen Width)

476 | 
477 | <style>
478 | @media (max-width: 767px) {
479 | .example {
480 | border: 2px solid purple!important;
481 | }
482 | }
483 | /* or */
484 | .minw_0 .example, .maxw_767 .example {
485 | border: 2px solid purple!important;
486 | }
487 | 
488 | @media (min-width: 768px) and (max-width: 979px) {
489 | .example {
490 | border: 2px solid green!important;
491 | }
492 | }
493 | /* or */
494 | .minw_768.maxw_979 .example {
495 | border: 2px solid green!important;
496 | }
497 | 
498 | @media (min-width: 1200px) {
499 | .example {
500 | border: 2px solid orange!important;
501 | }
502 | }
503 | /* or */
504 | .minw_1200 .example {
505 | border: 2px solid orange!important;
506 | }
507 | </style>
508 |
509 |
510 |
511 |

Media Queries (Orientation)

512 | 
513 | <style>
514 | @media (orientation: landscape) {
515 | .example {
516 | border: 2px solid red!important;
517 | }
518 | }
519 | /* or */
520 | .orientation_landscape .example {
521 | border: 2px solid red!important;
522 | }
523 | 
524 | @media (orientation: portrait) {
525 | .example {
526 | border: 2px solid blue!important;
527 | }
528 | }
529 | /* or */
530 | .orientation_portrait .example {
531 | border: 2px solid blue!important;
532 | }
533 | </style>
534 |
535 |
536 |
537 |
538 | 539 | 540 |

License

541 | 542 |

http://creativecommons.org/licenses/by/2.5/

543 | 544 |

Original Author:

545 | 546 |

547 | Rafael Lima: 548 | http://rafael.adm.br 549 |

550 | 551 |

Based on idea by 37signals

552 | 553 |

http://37signals.com/svn/archives2/browser_selectors_in_css.php

554 | 555 |

Contributors

556 |
    557 |
  • Richard Duchatsch Johansen @ridjohansen (http://github.com/ridjohansen)
    • 558 |
  • William Bruno (http://github.com/wbruno)
    • 559 |
  • Ihor Zenich (http://github.com/delka)
    • 560 |
  • Niyaz (http://github.com/niyazpk)
    • 561 |
  • Marcio Trindade (http://github.com/marciotrindade)
    • 562 |
  • rbottarelli (http://github.com/rbottarelli)
    • 563 |
  • Bryan Chow (http://github.com/bryanchow)
    • 564 |
  • Derek Lio (http://github.com/dereklio)
    • 565 |
  • Paul Irish (http://github.com/paulirish)
    • 566 |
  • Preston Badeer
    • 567 |
  • Upekshapriya
    • 568 |
  • André Lopes
    • 569 |
  • Tazio Mirandola - copiaincolla pubblicità
    • 570 |
  • Reid MacDonald (http://geminstallthat.wordpress.com)
    • 571 |
  • Vinicius Braga (http://viniciusbraga.com)
    • 572 |
  • Chris Preece (http://www.mmtdigital.co.uk)
    • 573 |
  • Dominykas
    • 574 |
  • M@ McCray
    • 575 |
  • Daniel Westermann-Clark
    • 576 |
  • Steve Clay (http://mrclay.org/)
    • 577 |
  • Jeff Bellsey
    • 578 |
  • Jean Pierre
    • 579 |
  • Micah Snyder
    • 580 |
  • Derek (http://amphibian.info)
    • 581 |
  • Jesse Scott
    • 582 |
  • Moises Kirsch (http://www.moiblog.com/)
    • 583 |
  • Alex Wiltschko
    • 584 |
  • Chris Warren and Tony Nelson (http://www.imagetrend.com)
    • 585 |
  • glasser
    • 586 |
587 |
588 |
589 | 590 |
591 | 592 | 593 |
594 | 595 | 605 | 620 | 621 | 622 | -------------------------------------------------------------------------------- /index_pt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Browser Selector + | Um Auxiliador no Desenvovimento Responsivo Cross-Browser 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 65 | 66 |
67 |
68 |
69 | 70 | 71 | 72 | 73 | 74 | CSS Browser Selector + 75 | 76 | 86 | 87 |
88 |
89 |
90 | 91 |
92 | 93 | 94 |
95 |

CSS Browser Selector +

96 | 97 | 105 | 106 |

107 | 108 | Hi-dpi screen 109 | 110 | 111 | Pixel-ratio > 1 and < 2 112 | 113 | 114 | Pixel-ratio >= 2 115 | 116 |

117 | 118 |

Um Auxiliador no Desenvovimento Responsivo Cross-Browser

119 | 120 |

121 | CSS Browser Selector + é um javascript muito pequeno, que habilita seletores CSS. 122 |

123 |

Veja o exemplo:

124 | 
125 | <html lang="pt-br" class="">
126 |
127 | 133 |
134 |
135 |
136 |

137 | 139 | CSS Browser Selector Download 140 | 141 |

142 |

143 | 145 | Github 146 | 147 |

148 |
149 |
150 |
151 |
    152 | 153 |
  • 154 |

    Melhor parte

    155 | 156 |
      157 |
    • chega de sujeira (hacks)
      • 158 |
    • todo o código compatível.
      • 159 |
    160 |
    • 161 |
  • 162 |

    Auxiliador parecido com Media Queries (CSS3)

    163 | 164 |

    Método alternativo de Media Queries para o desenvolvimento de projeto ágil para navegadores mais 165 | antigos.

    166 |
    • 167 |
  • 168 |

    Agora você pode escrever código para

    169 | 170 |
      171 |
    • navegador
      • 172 |
    • versão do navegador
      • 173 |
    • plataforma
      • 174 |
    • versão de plataforma
      • 175 |
    • dispositivos
      • 176 |
    • versão do dispositivo
      • 177 |
    • min-width e max-width
      • 178 |
    • retina
      • 179 |
    • detecção de orientação da tela (paisagem ou retrato)
      • 180 |
    181 |
    • 182 |
183 |
184 |
185 | 186 |

187 | Mais Informações: 188 |
(http://rafael.adm.br/css_browser_selector) 189 |

190 | 191 |

192 | Versões Experimentais: 193 |
(http://github.com/delka/css_browser_selector/) 194 |
(http://github.com/verbatim/css_browser_selector/) 195 |

196 |
197 | 198 | 199 |
200 |
201 | 202 |

Ele identifica

203 |
    204 |
  • Navegadores: Firefox; IE; Edge; Opera; Safari; Chrome, Konqueror, Iron
    • 205 |
  • Versões dos navegadores: (like chrome46, firefox41, ie6, ie7, ie8, ie9, ie10, ie11, ie edge, …)
    • 206 |
  • Motores de renderização: Webkit; Mozilla; Gecko
    • 207 |
  • Sistemas Operacionais/Plataformas: Mac; Win: Win10, Win8.1, Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11
    • 208 |
  • Dispositivos: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; Windows Phone; J2me; RIM Playbook; mobile (generic)
    • 209 |
  • Tecnologia habilitada: JS (usado em conjunto com <html class="no-js"> para ainda ter mais controle)
    • 210 |
  • detecção de max-width e min-width (Método alternativo de Media Queries para o detecçãode largura)
    • 211 |
  • detecção de retina
    • 212 |
  • detecção da orientação navegador (Método alternativo de Media Queries para a detecçãode da orientação)
    • 213 |
  • Detecção de idioma
    • 214 |
215 | 216 |

Contribuidores recentes to 0.5, 0.6, 0.6.2:

217 | 218 |
    219 |
  • 220 | melhorar e atualizar recursos para o desenvolvimento cross-browser 221 |
    https://github.com/ridjohansen/css_browser_selector/ 222 |
    • 223 |
  • 224 | Detecção IE mais detalhada 225 |
    https://github.com/kevingessner/css_browser_selector/ 226 |
    • 227 |
  • 228 | Detecção do Windows mais detalhada 229 |
    https://github.com/saar/css_browser_selector 230 |
    • 231 | 232 |
  • 233 | no-js para js: 234 |
    http://paulirish.com/2009/avoiding-the-fouc-v3/ 235 |
    • 236 | 237 |
  • 238 | Detecção do Mac mais detalhada 239 |
    https://github.com/haraldmartin/css_browser_selector 240 |
    • 241 |
242 | 243 |

Histórico de versões

244 |
    245 |
  • 246 | v0.81 2015-10-30 247 |
    Fix IE8 error 248 |
    • 249 |
  • 250 | v0.8 2015-10-29 251 |
    Add support for Windows 8.1 and Windows 10 252 |
    Add support for Windows Phone OS 7,8,10. 253 |
    Add IE Edge Support 254 |
    Save existing html classes 255 |
    Prevent global variables - wrap code into anonymous function 256 |
    • 257 |
  • 258 | v0.71 2014-01-23 259 |
    Add IE11 detection 260 |
    • 261 |
  • 262 | v0.7 2013-04-01 263 |
    Add support to Hi-dpi displays Selector 264 |
    Add Pixel Ratio support for 1.5 and 2 265 |
    Add support to dataURI's Selector 266 |
    • 267 |
  • 268 | v0.6.2 2012-09-10 269 |
    adicionar novos recursos para o desenvolvimento cross-browser 270 |
    atualizar a largura dispositivos comuns (com base em Bootstrap Twitter) 271 |
    melhorar continuamente avalia navegador max-width e min-width (auxiliar para mediaqueries-como tela aulas 272 | de largura) 273 |
    melhorar continuamente avalia orientação navegador (auxiliar para mediaqueries-como orientação classes) 274 |
    • 275 |
  • 276 | v0.6.1 2012-03-14 277 |
    iOS versão detecção 278 |
    beta: detectar se está sendo executado em aplicativo para iPad. 279 |
    (de: http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript) 280 |
    • 281 |
  • 282 | v0.6.0 2012-01-24 283 |
    apoio mais detalhada para o Opera, Chrome, Safari (e revisão no suporte ao Firefox) 284 |
    versão para o Chrome, Blackberry, Android, Mac 285 |
    detecção de dispositivos Android 286 |
    alterado como 'mobile' é deterimed para ser adicionado à classe String 287 |
    detecção de idioma 288 |
    suporte ao RIM Playbook 289 |
    avalia continuamente largura do navegador max (em caso de redimensionamento) 290 |
    avalia continuamente orientação navegador (retrato ou paisagem) 291 |
    • 292 |
  • 293 | v0.5.0 2011-08-24 294 |
    qualquer versão do Firefox 295 |
    mais versões do Windows (Win8 [provisória], Win2k Win7, Vista, XP,) 296 |
    mais versões do IE em condições únicas 297 |
    se "não-js" na aula de HTML: remove e substitui por "js" (<html class="no-js">) 298 |
    • 299 |
300 | 301 |

Recursos

302 | 303 |
    304 |
  • 305 | navigator.userAgent strings: 306 |
    http://en.wikipedia.org/wiki/User_agent 307 |
    http://www.useragentstring.com/pages/useragentstring.php 308 |
    http://www.user-agents.org 309 |
    http://www.zytrax.com/tech/web/mobile_ids.html 310 |
    • 311 |
  • 312 | história da userAgent string: 313 |
    http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/ 314 |
    • 315 |
  • 316 | lista de idiomas: 317 |
    http://msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx 318 |
    • 319 |
  • 320 | Lista dos windows nt 321 |
    http://en.wikipedia.org/wiki/Windows_NT 322 |
    • 323 |
  • 324 | interpretação do userAgent string do blackberry: 325 |
    http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-detect-the-BlackBerry-Browser/ta-p/559862 326 |
    • 327 |
  • 328 | compressão do javascript: 329 |
    http://minifyjavascript.com 330 |
    • 331 |
  • 332 | resoluções de tela 333 |
    http://responsinator.com/ 334 |
    • 335 |
  • 336 | aspect ratio: 337 |
    http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm 338 |
    • 339 |
  • 340 | Detecção do iOS: 341 |
    http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript 342 |
    • 343 |
344 | 345 |

Other Versions

346 |
    347 |
  • 348 | Ruby on Rails Plugin por Reid MacDonald 349 |
    http://latimes.rubyforge.org/svn/plugins/css_browser_selector/ 350 |
    • 351 |
  • 352 | PHP CSS Browser Selector por Bastian Allgeier 353 |
    http://bastian-allgeier.de/css_browser_selector/ 354 |
  • 355 | Wordpress Plugin por Adrian hanft 356 |
    http://wordpress.org/extend/plugins/browser-specific-css/ 357 |
    • 358 |
359 | 360 |

Exemplo

361 | 362 |
363 |
364 |
365 |

Navegador, dispositivo, sistema operacional e detecção de 366 | Javascript

367 | 
368 | <style>
369 | .ie .exemplo { background-color: yellow; }
370 | .ie7 .exemplo { background-color: orange }
371 | .gecko .exemplo { background-color: gray; }
372 | .win.gecko .exemplo { background-color: red; }
373 | .linux.gecko .exemplo { background-color: pink; }
374 | .opera .exemplo { background-color: green; }
375 | .konqueror .exemplo { background-color: blue; }
376 | .webkit .exemplo { background-color: black; }
377 | .chrome .exemplo { background-color: cyan; }
378 | .exemplo { width: 100px; height: 100px; }
379 | .no-js, .no_js, .nojs { display: block; }
380 | .js { display: none; }
381 | </style>
382 |
383 |
384 | 385 |
386 |

dataURI Selector

387 | 
388 | <style>
389 | .datauri .example_bg {
390 |     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC');
391 | }
392 | .no-datauri .example_bg {
393 |     background-image: url('bg_default.png');
394 | }
395 | .datauri .img_default, .no-datauri .img_uri {
396 |     display: none !important;
397 | }
398 | </style>
399 | 
400 | <div class="example_bg">
401 |   <img class="img_uri" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC" alt="with dataURI" /> 
402 |   <img class="img_default" src="img_default.png" alt="without dataURI" /> 
403 | </div>
404 |
405 |
406 | 407 |
408 |

Hi-dpi and Pixel-Ratio Selector

409 | 
410 | <style>
411 | .img_hidpi {
412 |     display: none;
413 | }
414 | .no-hidpi .example_bg {
415 |     background-image: url('bg_default.png');
416 | }
417 | .hidpi .img_default, .no-hidpi .img_hidpi {
418 |     display: none !important;
419 | }
420 | .retina_1x .example_bg {
421 |     background-image: url('bg_hidpi_1x.png');
422 | }
423 | .retina_2x .example_bg {
424 |     background-image: url('bg_hidpi_2x.png');
425 | }
426 | .retina_2x .img_default, .retina_2x .x1 {
427 |     display: none !important;
428 | }
429 | .retina_1x .img_default, .retina_1x .x2 {
430 |     display: none !important;
431 | }
432 | 
433 | or /* http://bjango.com/articles/min-device-pixel-ratio/ */
434 | 
435 | @media 
436 | only screen and (min--moz-device-pixel-ratio: 1.5),
437 | only screen and (-o-min-device-pixel-ratio: 3/2),
438 | only screen and (-webkit-min-device-pixel-ratio: 1.5),
439 | only screen and (min-device-pixel-ratio: 1.5) {
440 |     .example_bg {
441 |         background-image: url('bg_hidpi_1x.png');
442 |     }
443 |     .img_default, .x2 {
444 |         display: none;
445 |     }
446 | }
447 | 
448 | @media
449 | only screen and (-webkit-min-device-pixel-ratio: 2),
450 | only screen and (   min--moz-device-pixel-ratio: 2),
451 | only screen and (     -o-min-device-pixel-ratio: 2/1),
452 | only screen and (        min-device-pixel-ratio: 2),
453 | only screen and (                min-resolution: 192dpi),
454 | only screen and (                min-resolution: 2dppx) { 
455 |     .example_bg {
456 |         background-image: url('bg_hidpi_2x.png');
457 |     }
458 |     .img_default, .x1 {
459 |         display: none;
460 |     }
461 | }
462 | </style>
463 | 
464 | <div class="example_bg">
465 |     <img class="img_hidpi x2" src="img_hidpi_2x.png" alt="with pixel-ratio >= 2" />
466 |     <img class="img_hidpi x1" src="img_hidpi_1x.png" alt="with pixel-ratio > 1 and < 2" /> 
467 |     <img class="img_default" src="img_default.png" alt="with pixel-ratio 1 or default" /> 
468 | </div>
469 |
470 |
471 | 472 |
473 |

Media Queries (Largura da tela)

474 | 
475 | <style>
476 | @media (max-width: 767px) {
477 | .exemplo {
478 | border: 2px solid purple!important;
479 | }
480 | }
481 | /* or */
482 | .minw_0 .exemplo, .maxw_767 .exemplo {
483 | border: 2px solid purple!important;
484 | }
485 | 
486 | @media (min-width: 768px) and (max-width: 979px) {
487 | .exemplo {
488 | border: 2px solid green!important;
489 | }
490 | }
491 | /* or */
492 | .minw_768.maxw_979 .exemplo {
493 | border: 2px solid green!important;
494 | }
495 | 
496 | @media (min-width: 1200px) {
497 | .exemplo {
498 | border: 2px solid orange!important;
499 | }
500 | }
501 | /* or */
502 | .minw_1200 .exemplo {
503 | border: 2px solid orange!important;
504 | }
505 | </style>
506 |
507 |
508 |
509 |

Media Queries (Orientação)

510 | 
511 | <style>
512 | @media (orientation: landscape) {
513 | .exemplo {
514 | border: 2px solid red!important;
515 | }
516 | }
517 | /* or */
518 | .orientation_landscape .exemplo {
519 | border: 2px solid red!important;
520 | }
521 | 
522 | @media (orientation: portrait) {
523 | .exemplo {
524 | border: 2px solid blue!important;
525 | }
526 | }
527 | /* or */
528 | .orientation_portrait .exemplo {
529 | border: 2px solid blue!important;
530 | }
531 | </style>
532 |
533 |
534 |
535 |
536 | 537 | 538 |

Licença

539 | 540 |

http://creativecommons.org/licenses/by/2.5/

541 | 542 |

Autor original:

543 | 544 |

545 | Rafael Lima: 546 | http://rafael.adm.br 547 |

548 | 549 |

Com base na idéia do site 37signals

550 | 551 |

http://37signals.com/svn/archives2/browser_selectors_in_css.php

552 | 553 |

Contribuidores

554 |
    555 |
  • Richard Duchatsch Johansen @ridjohansen (http://github.com/ridjohansen)
    • 556 |
  • William Bruno (http://github.com/wbruno)
    • 557 |
  • Ihor Zenich (http://github.com/delka)
    • 558 |
  • Niyaz (http://github.com/niyazpk)
    • 559 |
  • Marcio Trindade (http://github.com/marciotrindade)
    • 560 |
  • rbottarelli (http://github.com/rbottarelli)
    • 561 |
  • Bryan Chow (http://github.com/bryanchow)
    • 562 |
  • Derek Lio (http://github.com/dereklio)
    • 563 |
  • Paul Irish (http://github.com/paulirish)
    • 564 |
  • Preston Badeer
    • 565 |
  • Upekshapriya
    • 566 |
  • André Lopes
    • 567 |
  • Tazio Mirandola - copiaincolla pubblicità
    • 568 |
  • Reid MacDonald (http://geminstallthat.wordpress.com)
    • 569 |
  • Vinicius Braga (http://viniciusbraga.com)
    • 570 |
  • Chris Preece (http://www.mmtdigital.co.uk)
    • 571 |
  • Dominykas
    • 572 |
  • M@ McCray
    • 573 |
  • Daniel Westermann-Clark
    • 574 |
  • Steve Clay (http://mrclay.org/)
    • 575 |
  • Jeff Bellsey
    • 576 |
  • Jean Pierre
    • 577 |
  • Micah Snyder
    • 578 |
  • Derek (http://amphibian.info)
    • 579 |
  • Jesse Scott
    • 580 |
  • Moises Kirsch (http://www.moiblog.com/)
    • 581 |
  • Alex Wiltschko
    • 582 |
  • Chris Warren and Tony Nelson (http://www.imagetrend.com)
    • 583 |
  • glasser
    • 584 |
585 |
586 |
587 | 588 |
589 | 590 | 591 |
592 | 593 | 603 | 618 | 619 | 620 | -------------------------------------------------------------------------------- /js/vendor/bootstrap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap.js by @fat & @mdo 3 | * Copyright 2012 Twitter, Inc. 4 | * http://www.apache.org/licenses/LICENSE-2.0.txt 5 | */ 6 | !function(e){e(function(){"use strict";e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()},e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e(function(){e("body").on("click.alert.data-api",t,n.prototype.close)})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")},e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e(function(){e("body").on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=n,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},to:function(t){var n=this.$element.find(".item.active"),r=n.parent().children(),i=r.index(n),s=this;if(t>r.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){s.to(t)}):i==t?this.pause().cycle():this.slide(t>i?"next":"prev",e(r[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f=e.Event("slide",{relatedTarget:i[0]});this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u]();if(i.hasClass("active"))return;if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}},e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e(function(){e("body").on("click.carousel.data-api","[data-slide]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=!i.data("modal")&&e.extend({},i.data(),n.data());i.carousel(s),t.preventDefault()})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning)return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning)return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=typeof n=="object"&&n;i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e(function(){e("body").on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})})}(window.jQuery),!function(e){"use strict";function r(){i(e(t)).removeClass("open")}function i(t){var n=t.attr("data-target"),r;return n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,"")),r=e(n),r.length||(r=t.parent()),r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||(s.toggleClass("open"),n.focus()),!1},keydown:function(t){var n,r,s,o,u,a;if(!/(38|40|27)/.test(t.keyCode))return;n=e(this),t.preventDefault(),t.stopPropagation();if(n.is(".disabled, :disabled"))return;o=i(n),u=o.hasClass("open");if(!u||u&&t.keyCode==27)return n.click();r=e("[role=menu] li:not(.divider) a",o);if(!r.length)return;a=r.index(r.filter(":focus")),t.keyCode==38&&a>0&&a--,t.keyCode==40&&a').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,e.proxy(this.removeBackdrop,this)):this.removeBackdrop()):t&&t()}},e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e(function(){e("body").on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})})})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,this.options.trigger=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):this.options.trigger!="manual"&&(i=this.options.trigger=="hover"?"mouseenter":"focus",s=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this))),this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,t,this.$element.data()),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);if(!n.options.delay||!n.options.delay.show)return n.show();clearTimeout(this.timeout),n.hoverState="in",this.timeout=setTimeout(function(){n.hoverState=="in"&&n.show()},n.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var e,t,n,r,i,s,o;if(this.hasContent()&&this.enabled){e=this.tip(),this.setContent(),this.options.animation&&e.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,e[0],this.$element[0]):this.options.placement,t=/in/.test(s),e.remove().css({top:0,left:0,display:"block"}).appendTo(t?this.$element:document.body),n=this.getPosition(t),r=e[0].offsetWidth,i=e[0].offsetHeight;switch(t?s.split(" ")[1]:s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}e.css(o).addClass(s).addClass("in")}},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function r(){var t=setTimeout(function(){n.off(e.support.transition.end).remove()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.remove()})}var t=this,n=this.tip();return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?r():n.remove(),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(t){return e.extend({},t?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'
',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content > *")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-content")||(typeof n.content=="function"?n.content.call(t[0]):n.content),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'

'})}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var t=e(this),n=t.data("target")||t.attr("href"),r=/^#\w/.test(n)&&e(n);return r&&r.length&&[[r.position().top,n]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}},e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active a").last()[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}},e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e(function(){e("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=e(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:t.top+t.height,left:t.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length"+t+""})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),(e.browser.chrome||e.browser.webkit||e.browser.msie)&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this))},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=!~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},blur:function(e){var t=this;setTimeout(function(){t.hide()},150)},click:function(e){e.stopPropagation(),e.preventDefault(),this.select()},mouseenter:function(t){this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")}},e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'
    ',item:'
    • ',minLength:1},e.fn.typeahead.Constructor=t,e(function(){e("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;t.preventDefault(),n.typeahead(n.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))},e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery); --------------------------------------------------------------------------------