├── LICENSE.md ├── README.md ├── composer.json ├── css_browser_selector.class.php ├── css_browser_selector.js ├── css_browser_selector.min.js └── test.php /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License 2 | =============== 3 | 4 | Copyright (c) 2009-2014 Stuart Knightley, David Duponchel, Franz Buchinger, António Afonso 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Browser Selector 2 | 3 | ## Now that IE is a thing of the past, this library is no longer needed. 4 | 5 | > no need css hack. html tag adding your browser info 6 | > fork this project from : http://rafael.adm.br/css_browser_selector/ 7 | 8 | ### if IE6 9 | ```html 10 | 11 | ``` 12 | - ie6 ie67 ie678 ie6789 13 | 14 | ### if IE10 15 | ```html 16 | 17 | ``` 18 | 19 | ### if EDGE 20 | ```html 21 | 22 | 23 | ``` 24 | 25 | ### if iPhone Safari 26 | ```html 27 | 28 | ``` 29 | 30 | ### if android retina tablet chrome 31 | ```html 32 | 33 | 34 | 35 | 36 | ``` 37 | 38 | ### using 39 | ```css 40 | .myText { margin-bottom:2px; } 41 | .ie6 .myText { margin-bottom:1px; } 42 | .opera .myText { margin-top:-1px; } 43 | ``` 44 | 45 | ### php version using 46 | ```php 47 | $className = css_browser_selector::getClassName($_SERVER['HTTP_USER_AGENT']); 48 | ``` 49 | 50 | ### more support types 51 | ```css 52 | .ie67, .ie678, .ie9m (IE9 and more) 53 | .ff4 ~ .ff11 and more 54 | ``` 55 | 56 | ### if jQuery && mobile support 57 | ```js 58 | width > height ? landscape : portrait 59 | ``` 60 | ```css 61 | .portrait .landscape 62 | .smartnarrow ( <= 360 ) 63 | .smartwide ( <= 640 ) 64 | .tabletnarrow ( <= 768 ) 65 | .tabletwide ( <= 1024 ) 66 | .pc ( > 1024 ) 67 | ``` 68 | 69 | example 70 | ```css 71 | #photo { float:left; } 72 | .iphone.portrait #photo { clear:both; } 73 | .smartwide #leftMenu, .tabletwide #leftMenu { float:left; width:120px; } 74 | .tabletwide #rightMenu { float:right; width:120px; } 75 | ``` 76 | 77 | - support retina : view test page. https://crucifyer.github.io/css-browser-selector/ 78 | 79 | ### mobile font zoom disable 80 | ```css 81 | body { 82 | -webkit-text-size-adjust: none; 83 | -moz-text-size-adjust: none; 84 | -ms-text-size-adjust: none; 85 | text-size-adjust: none; 86 | } 87 | ``` 88 | 89 | ### jquery 1.9 $.browser deprecated. 90 | ```js 91 | // window.CSSBS_* defined. 92 | if(window.CSSBS_ie) alert('MSIE'); 93 | if(window.CSSBS_ie6) alert('MSIE 6'); 94 | 95 | if MSIE define $.browser = {msie:1,version:msie version}; 96 | other browser $.browser = {}; 97 | ``` 98 | 99 | compressed 100 | - https://raw.githubusercontent.com/crucifyer/css-browser-selector/master/css_browser_selector.min.js 101 | 102 | source 103 | - https://raw.githubusercontent.com/crucifyer/css-browser-selector/master/css_browser_selector.js 104 | - https://raw.githubusercontent.com/crucifyer/css-browser-selector/master/css_browser_selector.class.php 105 | 106 | test page 107 | - https://crucifyer.github.io/css-browser-selector/ 108 | 109 | ## Now that IE is a thing of the past, this library is no longer needed. -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "crucifyer/css-browser-selector", 3 | "description": "CSS Browser Selector - no need css hack. html tag adding your browser info", 4 | "keywords": ["css", "css browser selector"], 5 | "homepage": "https://github.com/crucifyer/css-browser-selector/", 6 | "type": "library", 7 | "license": "MIT", 8 | "version": "0.0.3", 9 | "require": { 10 | "php": ">=5.2.4" 11 | }, 12 | "authors": [ 13 | { 14 | "name": "Song Hyo-Jin", 15 | "email": "shj@xenosi.de", 16 | "homepage": "https://github.com/crucifyer/" 17 | } 18 | ], 19 | "autoload": { 20 | "classmap": ["css_browser_selector.class.php"], 21 | "files": ["css_browser_selector.class.php"] 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /css_browser_selector.class.php: -------------------------------------------------------------------------------- 1 | 9) ? 44 | ' ie9m' : '')))) : 45 | /* EDGE */ 46 | (self::test('~edge/(\d+)\.(\d+)~') ? 47 | (self::is('chrome/') ? 'chrome edge' : 'ie ie' . self::$re[1] . ' ie' . self::$re[1] . '_' . self::$re[2] . ' ie9m edge') : 48 | /* IE 11 */ 49 | (self::test('~trident/\d+.*?;\s*rv:(\d+)\.(\d+)\)~') ? 50 | 'ie ie' . self::$re[1] . ' ie' . self::$re[1] . '_' . self::$re[2] . ' ie9m' : 51 | /* FF */ 52 | (self::test('~firefox/(\d+)\.(\d+)~') ? self::g . ' ff ff' . self::$re[1] . ' ff' . self::$re[1] . '_' . self::$re[2] : 53 | (self::is('gecko/') ? self::g : 54 | /* Opera */ 55 | (self::is(self::o) ? self::o . (self::test('~version/(\d+)~') ? ' ' . self::o . self::$re[1] : 56 | (self::test('~opera(\s|/)(\d+)~') ? ' ' . self::o . self::$re[2] : '')) : 57 | /* K */ 58 | (self::is('konqueror') ? 'konqueror' : 59 | /* Black Berry */ 60 | (self::is('blackberry') ? self::m . ' blackberry' : 61 | /* Chrome */ 62 | ((self::is(self::c) || self::is('crios')) ? self::w . ' ' . self::c : 63 | /* Iron */ 64 | (self::is('iron') ? self::w . ' iron' : 65 | /* Safari */ 66 | (! self::is('cpu os') && self::is('applewebkit/') ? self::w . ' ' . self::s : 67 | /* Mozilla */ 68 | (self::is('mozilla') ? self::g : ''))))))))))), 69 | /* Android */ 70 | (self::is('android') ? self::m . ' android' : ''), 71 | /* Tablet */ 72 | (self::is('tablet') ? 'tablet' : ''), 73 | /* Machine */ 74 | ($nomachine ? '' : (self::is('j2me') ? self::m . ' j2me' : 75 | (self::is('ipad; u; cpu os') ? self::m . ' chrome android tablet' : 76 | (self::is('ipad;u;cpu os') ? self::m . ' chromedef android tablet' : 77 | (self::is('iphone') ? self::m . ' ios iphone' : 78 | (self::is('ipod') ? self::m . ' ios ipod' : 79 | (self::is('ipad') ? self::m . ' ios ipad' : 80 | (self::is('mac') ? 'mac' : 81 | (self::is('darwin') ? 'mac' : 82 | (self::is('webtv') ? 'webtv' : 83 | (self::is('win') ? 'win' . (self::is('windows nt 6.0') ? ' vista' : '') : 84 | (self::is('freebsd') ? 'freebsd' : 85 | ((self::is('x11') || self::is('linux')) ? 'linux' : ''))))))))))))) 86 | ))); 87 | } 88 | } 89 | 90 | -------------------------------------------------------------------------------- /css_browser_selector.js: -------------------------------------------------------------------------------- 1 | /* 2 | CSS Browser Selector js v0.5.3 (July 2, 2013) 3 | 4 | -- original -- 5 | Rafael Lima (http://rafael.adm.br) 6 | http://rafael.adm.br/css_browser_selector 7 | License: http://choosealicense.com/licenses/mit/ 8 | Contributors: http://rafael.adm.br/css_browser_selector#contributors 9 | -- /original -- 10 | 11 | Fork project: http://code.google.com/p/css-browser-selector/ 12 | Song Hyo-Jin (shj at xenosi.de) 13 | */ 14 | function css_browser_selector(u) { 15 | var ua = u.toLowerCase(), 16 | is = function(t) { 17 | return ua.indexOf(t) > -1 18 | }, 19 | g = 'gecko', 20 | w = 'webkit', 21 | s = 'safari', 22 | c = 'chrome', 23 | o = 'opera', 24 | m = 'mobile', 25 | v = 0, 26 | r = window.devicePixelRatio ? (window.devicePixelRatio + '').replace('.', '_') : '1'; 27 | var res = [ 28 | /* IE */ 29 | (!(/opera|webtv/.test(ua)) && /msie\s(\d+)/.test(ua) && (v = RegExp.$1 * 1)) ? 30 | ('ie ie' + v + ((v == 6 || v == 7) ? 31 | ' ie67 ie678 ie6789' : (v == 8) ? 32 | ' ie678 ie6789' : (v == 9) ? 33 | ' ie6789 ie9m' : (v > 9 ) ? 34 | ' ie9m' : '')) : 35 | /* EDGE */ 36 | (/edge\/(\d+)\.(\d+)/.test(ua) && (v = [RegExp.$1, RegExp.$2])) ? 37 | (is('chrome/') ? 'chrome edge' : 'ie ie' + v[0] + ' ie' + v[0] + '_' + v[1] + ' ie9m edge') : 38 | /* IE 11 */ 39 | (/trident\/\d+.*?;\s*rv:(\d+)\.(\d+)\)/.test(ua) && (v = [RegExp.$1, RegExp.$2])) ? 40 | 'ie ie' + v[0] + ' ie' + v[0] + '_' + v[1] + ' ie9m' : 41 | /* FF */ 42 | (/firefox\/(\d+)\.(\d+)/.test(ua) && (re = RegExp)) ? 43 | g + ' ff ff' + re.$1 + ' ff' + re.$1 + '_' + re.$2 : 44 | is('gecko/') ? g : 45 | /* Opera - old */ 46 | is(o) ? 'old' + o + (/version\/(\d+)/.test(ua) ? ' ' + o + RegExp.$1 : 47 | (/opera(\s|\/)(\d+)/.test(ua) ? ' ' + o + RegExp.$2 : '')) : 48 | /* K */ 49 | is('konqueror') ? 'konqueror' : 50 | /* Black Berry */ 51 | is('blackberry') ? m + ' blackberry' : 52 | /* Chrome */ 53 | (is(c) || is('crios')) ? w + ' ' + c : 54 | /* Iron */ 55 | is('iron') ? w + ' iron' : 56 | /* Safari */ 57 | !is('cpu os') && is('applewebkit/') ? w + ' ' + s : 58 | /* Mozilla */ 59 | is('mozilla/') ? g : '', 60 | /* Android */ 61 | is('android') ? m + ' android' : '', 62 | /* Tablet */ 63 | is('tablet') ? 'tablet' : '', 64 | /* blink or webkit engine browsers */ 65 | /* Opera */ 66 | is('opr/') ? o : '', 67 | /* Yandex */ 68 | is('yabrowser') ? 'yandex' : '', 69 | /* Machine */ 70 | is('j2me') ? m + ' j2me' : 71 | is('ipad; u; cpu os') ? m + ' chrome android tablet' : 72 | is('ipad;u;cpu os') ? m + ' chromedef android tablet' : 73 | is('iphone') ? m + ' ios iphone' : 74 | is('ipod') ? m + ' ios ipod' : 75 | is('ipad') ? m + ' ios ipad tablet' : 76 | is('mac') ? 'mac' : 77 | is('darwin') ? 'mac' : 78 | is('webtv') ? 'webtv' : 79 | is('win') ? 'win' + (is('windows nt 6.0') ? ' vista' : '') : 80 | is('freebsd') ? 'freebsd' : 81 | (is('x11') || is('linux')) ? 'linux' : '', 82 | /* Ratio (Retina) */ 83 | (r != '1') ? ' retina ratio' + r : '', 84 | 'js portrait'].join(' '); 85 | if(window.jQuery && !window.jQuery.browser) { 86 | window.jQuery.browser = v ? {msie: 1, version: v} : {}; 87 | } 88 | return res; 89 | }; 90 | (function(d, w) { 91 | var _c = css_browser_selector(navigator.userAgent); 92 | var h = d.documentElement; 93 | h.className += ' ' + _c; 94 | var _d = _c.replace(/^\s*|\s*$/g, '').split(/ +/); 95 | w.CSSBS = 1; 96 | for(var i = 0; i < _d.length; i++) { 97 | w['CSSBS_' + _d[i]] = 1; 98 | } 99 | var _de = function(v) { 100 | return d.documentElement[v] || d.body[v]; 101 | } 102 | if(w.jQuery) { 103 | (function($) { 104 | var p = 'portrait', l = 'landscape'; 105 | var m = 'smartnarrow', mw = 'smartwide', t = 'tabletnarrow', tw = 'tabletwide', ac = m + ' ' + mw + ' ' + t + ' ' + tw + ' pc'; 106 | var $h = $(h); 107 | var to = 0, cw = 0; 108 | 109 | /* ie7 cpu 100% fix */ 110 | function CSSSelectorUpdateSize() { 111 | if(to != 0) return; 112 | try { 113 | var _cw = _de('clientWidth'), _ch = _de('clientHeight'); 114 | if(_cw > _ch) { 115 | $h.removeClass(p).addClass(l); 116 | } else { 117 | $h.removeClass(l).addClass(p); 118 | } 119 | if(_cw == cw) return; 120 | cw = _cw; 121 | //clearTimeout(to); 122 | } catch(e) { 123 | } 124 | to = setTimeout(CSSSelectorUpdateSize_, 100); 125 | } 126 | 127 | function CSSSelectorUpdateSize_() { 128 | try { 129 | $h.removeClass(ac); 130 | $h.addClass( 131 | (cw <= 360) ? m : 132 | (cw <= 640) ? mw : 133 | (cw <= 768) ? t : 134 | (cw <= 1024) ? tw : 'pc' 135 | ); 136 | } catch(e) { 137 | } 138 | to = 0; 139 | } 140 | 141 | if(w.CSSBS_ie) { 142 | setInterval(CSSSelectorUpdateSize, 1000); 143 | } else { 144 | $(w).on('resize orientationchange', CSSSelectorUpdateSize).trigger('resize'); 145 | } 146 | $(w).load(CSSSelectorUpdateSize); 147 | })(w.jQuery); 148 | } 149 | })(document, window); 150 | 151 | 152 | -------------------------------------------------------------------------------- /css_browser_selector.min.js: -------------------------------------------------------------------------------- 1 | function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g="gecko",w="webkit",s="safari",c="chrome",o="opera",m="mobile",v=0,r=window.devicePixelRatio?(window.devicePixelRatio+"").replace(".","_"):"1";var res=[!/opera|webtv/.test(ua)&&/msie\s(\d+)/.test(ua)&&(v=RegExp.$1*1)?"ie ie"+v+(v==6||v==7?" ie67 ie678 ie6789":v==8?" ie678 ie6789":v==9?" ie6789 ie9m":v>9?" ie9m":""):/edge\/(\d+)\.(\d+)/.test(ua)&&(v=[RegExp.$1,RegExp.$2])?is("chrome/")?"chrome edge":"ie ie"+v[0]+" ie"+v[0]+"_"+v[1]+" ie9m edge":/trident\/\d+.*?;\s*rv:(\d+)\.(\d+)\)/.test(ua)&&(v=[RegExp.$1,RegExp.$2])?"ie ie"+v[0]+" ie"+v[0]+"_"+v[1]+" ie9m":/firefox\/(\d+)\.(\d+)/.test(ua)&&(re=RegExp)?g+" ff ff"+re.$1+" ff"+re.$1+"_"+re.$2:is("gecko/")?g:is(o)?"old"+o+(/version\/(\d+)/.test(ua)?" "+o+RegExp.$1:/opera(\s|\/)(\d+)/.test(ua)?" "+o+RegExp.$2:""):is("konqueror")?"konqueror":is("blackberry")?m+" blackberry":is(c)||is("crios")?w+" "+c:is("iron")?w+" iron":!is("cpu os")&&is("applewebkit/")?w+" "+s:is("mozilla/")?g:"",is("android")?m+" android":"",is("tablet")?"tablet":"",is("opr/")?o:"",is("yabrowser")?"yandex":"",is("j2me")?m+" j2me":is("ipad; u; cpu os")?m+" chrome android tablet":is("ipad;u;cpu os")?m+" chromedef android tablet":is("iphone")?m+" ios iphone":is("ipod")?m+" ios ipod":is("ipad")?m+" ios ipad tablet":is("mac")?"mac":is("darwin")?"mac":is("webtv")?"webtv":is("win")?"win"+(is("windows nt 6.0")?" vista":""):is("freebsd")?"freebsd":is("x11")||is("linux")?"linux":"",r!="1"?" retina ratio"+r:"","js portrait"].join(" ");if(window.jQuery&&!window.jQuery.browser){window.jQuery.browser=v?{msie:1,version:v}:{}}return res}(function(d,w){var _c=css_browser_selector(navigator.userAgent);var h=d.documentElement;h.className+=" "+_c;var _d=_c.replace(/^\s*|\s*$/g,"").split(/ +/);w.CSSBS=1;for(var i=0;i<_d.length;i++){w["CSSBS_"+_d[i]]=1}var _de=function(v){return d.documentElement[v]||d.body[v]};if(w.jQuery){(function($){var p="portrait",l="landscape";var m="smartnarrow",mw="smartwide",t="tabletnarrow",tw="tabletwide",ac=m+" "+mw+" "+t+" "+tw+" pc";var $h=$(h);var to=0,cw=0;function CSSSelectorUpdateSize(){if(to!=0)return;try{var _cw=_de("clientWidth"),_ch=_de("clientHeight");if(_cw>_ch){$h.removeClass(p).addClass(l)}else{$h.removeClass(l).addClass(p)}if(_cw==cw)return;cw=_cw}catch(e){}to=setTimeout(CSSSelectorUpdateSize_,100)}function CSSSelectorUpdateSize_(){try{$h.removeClass(ac);$h.addClass(cw<=360?m:cw<=640?mw:cw<=768?t:cw<=1024?tw:"pc")}catch(e){}to=0}if(w.CSSBS_ie){setInterval(CSSSelectorUpdateSize,1e3)}else{$(w).on("resize orientationchange",CSSSelectorUpdateSize).trigger("resize")}$(w).load(CSSSelectorUpdateSize)})(w.jQuery)}})(document,window); 2 | -------------------------------------------------------------------------------- /test.php: -------------------------------------------------------------------------------- 1 | 8 | --------------------------------------------------------------------------------