[Browser] 사용중인 Web Browser 알아내기

웹 기술을 이용하여 개발을 하다보면, 각 브라우져별 호환성을 맞추기 위해 코딩을 다르게 해야 할 경우가 종종 생겨난다.

많은 자바스크립트 라이브러리들이 브라우져 호환성을 보장해주기도 하지만 때론 개발자의 손길이 필요 할 경우도 종종 생겨난다.

각 브라우져별로 지원하는 특이한 CSS, Javascript 특성으로 사용자가 사용중인 브라우져 종류를 알아내는 방법을 알아보자.

• Chrome
• Selector
view source
print?
1./* Chrome 24- and Safari 5- */
2.::made-up-pseudo-element, .selector {}
• Media Query
view source
print?
1./* Chrome, Safari 3+ */
2.@media screen and (-webkit-min-device-pixel-ratio:0) {}
• JavaScript
view source
print?
1./* Chrome */
2.var isChrome = !!window.chrome;

• Firefox
• Selector
view source
print?
1./* Firefox 1.5 */
2.body:empty .selector {} /* Firefox 2+ */
3..selector, x:-moz-any-link {} /* Firefox 3+ */
4..selector, x:-moz-any-link; x:default {} /* Firefox 3.5+ */
5.body:not(:-moz-handler-blocked) .selector {}
• Media Query
view source
print?
1./* Firefox 3.5+, IE 9/10, Opera */
2.@media screen and (min-resolution: +72dpi) {}
3. 
4./* Firefox 3.6+ */
5.@media screen and (-moz-images-in-menus:0) {}
6. 
7./* Firefox 4+ */
8.@media screen and (min--moz-device-pixel-ratio:0) {}
• JavaScript

view source
print?
01./* Firefox */
02.var isFF = !!navigator.userAgent.match(/firefox/i);
03. 
04./* Firefox 2 - 13 */
05.var isFF = !!window.globalStorage;
06. 
07./* Firefox 2/3 */
08.var isFF = /a/[-1]=='a';
09. 
10./* Firefox 3 */
11.var isFF = (function x(){})[-5]=='x';
• Miscellaneous
view source
print?
1./* Firefox 3+ */
2.@-moz-document url-prefix() {}

• Internet Explorer
• Selector
view source
print?
01./* IE 6 and below */
02.* html .selector  {}
03..suckyie6.selector {} /* .suckyie6 can be any unused class */
04. 
05./* IE 7 and below */
06..selector, {}
07. 
08./* IE 7 */
09.*:first-child+html .selector {}
10..selector, x:-IE7 {}
11.*+html .selector {}
12. 
13./* Everything but IE 6 */
14.html > body .selector {}
15. 
16./* Everything but IE 6/7 */
17.html > /**/ body .selector {}
18.head ~ /* */ body .selector {}
19. 
20./* Everything but IE 6/7/8 */
21.:root *> .selector {}
22.body:last-child .selector {}
23.body:nth-of-type(1) .selector {}
24.body:first-of-type .selector {}
• Property/Value
view source
print?
01./* IE 6 */
02..selector { _color: blue; }
03..selector { -color: blue; }
04. 
05./* IE 6/7 - any combination of these characters:
06. ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
07..selector { !color: blue; }
08..selector { $color: blue; }
09..selector { &color: blue; }
10..selector { *color: blue; }
11./* ... */
12. 
13./* IE 6/7 - acts as an !important */
14..selector { color: blue !ie; }
15./* string after ! can be anything */
16. 
17./* IE 8/9 */
18..selector { color: blue\0/; }
19./* must go at the END of all rules */
20. 
21./* IE 9/10 */
22..selector:nth-of-type(1n) { color: blue\9; }
23. 
24./* IE 6/7/8/9/10 */
25..selector { color: blue\9; }
26..selector { color/*\**/: blue\9; }
27. 
28./* Everything but IE 6 */
29..selector { color/**/: blue; }
• Media Query

view source
print?
01./* IE 6/7 */
02.@media screen\9 {}
03. 
04./* IE 6/7/8 */
05.@media \0screen\,screen\9 {}
06. 
07./* IE 8 */
08.@media \0screen {}
09. 
10./* IE 8/9/10 & Opera */
11.@media screen\0 {}
12. 
13./* IE 9/10, Firefox 3.5+, Opera */
14.@media screen and (min-resolution: +72dpi) {}
15. 
16./* IE 9/10 */
17.@media screen and (min-width:0\0) {}
18. 
19./* IE 10+ */
20.@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
21. 
22./* Everything but IE 6/7/8 */
23.@media screen and (min-width: 400px) {}
• JavaScript
view source
print?
01./* IE <= 8 */
02.var isIE = '\v'=='v';
03. 
04./* IE 6 */
05.(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 6]><i></i><![endif]-->";
06.var isIE = checkIE.getElementsByTagName("i").length == 1;
07. 
08./* IE 7 */
09.(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 7]><i></i><![endif]-->";
10.var isIE = checkIE.getElementsByTagName("i").length == 1;
11.navigator.appVersion.indexOf("MSIE 7.")!=-1
12. 
13./* IE 8 */
14.(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->";
15.var isIE = checkIE.getElementsByTagName("i").length == 1;
16. 
17./* IE 9 */
18.(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 9]><i></i><![endif]-->";
19.var isIE = checkIE.getElementsByTagName("i").length == 1;
20. 
21./* IE 10 */
22.var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;
23. 
24./* IE 10 */
25.var isIE = document.body.style.msTouchAction != undefined;

• Safari
• Selector
view source
print?
01./* Safari 2/3 */
02.html[xmlns*=""] body:last-child .selector {}
03.html[xmlns*=""]:root .selector  {}
04. 
05./* Safari 2/3.1, Opera 9.25 */
06.*|html[xmlns*=""] .selector {}
07. 
08./* Safari 5- and Chrome 24- */
09.::made-up-pseudo-element, .selector {}
• Media Query
view source
print?
1./* Safari 3+, Chrome */
2.@media screen and (-webkit-min-device-pixel-ratio:0) {}
• JavaScript

view source
print?
1./* Safari */
2.var isSafari = /a/.__proto__=='//';

• 출처: http://browserhacks.com/