'Web'에 해당되는 글 22건

  1. 2013.03.14 [Browser] 사용중인 Web Browser 알아내기 (2)
  2. 2013.02.17 [Chrome] 크롬의 유용한 옵션들 (4)

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


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


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


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

  • Firefox
    • Selector
    • /* Firefox 1.5 */
      body:empty .selector {} /* Firefox 2+ */
      .selector, x:-moz-any-link {} /* Firefox 3+ */
      .selector, x:-moz-any-link; x:default {} /* Firefox 3.5+ */
      body:not(:-moz-handler-blocked) .selector {}
    • Media Query
    • /* Firefox 3.5+, IE 9/10, Opera */
      @media screen and (min-resolution: +72dpi) {}
      
      /* Firefox 3.6+ */
      @media screen and (-moz-images-in-menus:0) {}
      
      /* Firefox 4+ */
      @media screen and (min--moz-device-pixel-ratio:0) {}
    • JavaScript
      /* Firefox */
      var isFF = !!navigator.userAgent.match(/firefox/i);
      
      /* Firefox 2 - 13 */
      var isFF = !!window.globalStorage;
      
      /* Firefox 2/3 */
      var isFF = /a/[-1]=='a';
      
      /* Firefox 3 */
      var isFF = (function x(){})[-5]=='x';
      
    • Miscellaneous
    • /* Firefox 3+ */
      @-moz-document url-prefix() {}

  • Internet Explorer
    • Selector
    • /* IE 6 and below */
      * html .selector  {} 
      .suckyie6.selector {} /* .suckyie6 can be any unused class */
      
      /* IE 7 and below */
      .selector, {}
      
      /* IE 7 */
      *:first-child+html .selector {} 
      .selector, x:-IE7 {} 
      *+html .selector {} 
      
      /* Everything but IE 6 */
      html > body .selector {}
      
      /* Everything but IE 6/7 */
      html > /**/ body .selector {}
      head ~ /* */ body .selector {}
      
      /* Everything but IE 6/7/8 */
      :root *> .selector {} 
      body:last-child .selector {} 
      body:nth-of-type(1) .selector {} 
      body:first-of-type .selector {}
      
    • Property/Value
    • /* IE 6 */
      .selector { _color: blue; } 
      .selector { -color: blue; }
      
      /* IE 6/7 - any combination of these characters: 
       ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
      .selector { !color: blue; } 
      .selector { $color: blue; } 
      .selector { &color: blue; } 
      .selector { *color: blue; } 
      /* ... */
      
      /* IE 6/7 - acts as an !important */
      .selector { color: blue !ie; } 
      /* string after ! can be anything */
      
      /* IE 8/9 */
      .selector { color: blue\0/; } 
      /* must go at the END of all rules */
      
      /* IE 9/10 */
      .selector:nth-of-type(1n) { color: blue\9; }
      
      /* IE 6/7/8/9/10 */
      .selector { color: blue\9; } 
      .selector { color/*\**/: blue\9; }
      
      /* Everything but IE 6 */
      .selector { color/**/: blue; }
      
    • Media Query
      /* IE 6/7 */
      @media screen\9 {}
      
      /* IE 6/7/8 */
      @media \0screen\,screen\9 {}
      
      /* IE 8 */
      @media \0screen {}
      
      /* IE 8/9/10 & Opera */
      @media screen\0 {}
      
      /* IE 9/10, Firefox 3.5+, Opera */
      @media screen and (min-resolution: +72dpi) {}
      
      /* IE 9/10 */
      @media screen and (min-width:0\0) {}
      
      /* IE 10+ */
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
      
      /* Everything but IE 6/7/8 */
      @media screen and (min-width: 400px) {}
      
    • JavaScript
    • /* IE <= 8 */
      var isIE = '\v'=='v';
      
      /* IE 6 */
      (checkIE = document.createElement("b")).innerHTML = ""; 
      var isIE = checkIE.getElementsByTagName("i").length == 1;
      
      /* IE 7 */
      (checkIE = document.createElement("b")).innerHTML = ""; 
      var isIE = checkIE.getElementsByTagName("i").length == 1;
      navigator.appVersion.indexOf("MSIE 7.")!=-1
      
      /* IE 8 */
      (checkIE = document.createElement("b")).innerHTML = ""; 
      var isIE = checkIE.getElementsByTagName("i").length == 1;
      
      /* IE 9 */
      (checkIE = document.createElement("b")).innerHTML = ""; 
      var isIE = checkIE.getElementsByTagName("i").length == 1;
      
      /* IE 10 */
      var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;
      
      /* IE 10 */
      var isIE = document.body.style.msTouchAction != undefined;
      

  • Safari
    • Selector
    • /* Safari 2/3 */
      html[xmlns*=""] body:last-child .selector {} 
      html[xmlns*=""]:root .selector  {}
      
      /* Safari 2/3.1, Opera 9.25 */
      *|html[xmlns*=""] .selector {}
      
      /* Safari 5- and Chrome 24- */
      ::made-up-pseudo-element, .selector {}
      
    • Media Query
    • /* Safari 3+, Chrome */
      @media screen and (-webkit-min-device-pixel-ratio:0) {}
    • JavaScript
      /* Safari */
      var isSafari = /a/.__proto__=='//';
      



Posted by leechwin

크롬 브라우져를 실행할 때 option 등을 주어서 실행할 수 있다.

크롬에 옵션을 주어 실행하는 방법과 유용한 옵션에 대해 알아보도록 하자.


크롬에 옵션을 주어 실행하는 방법.


보통 바로가기로 크롬을 실행하는데 다음과 같이 바로가기 옵션을 수정하는 방법이 있다.


1. 다음과 같이 크롬의 바로가기버튼에 대고 마우스 우클릭후, 속성을 연다.

   


2. 바로가기 탭에서 대상(T): 에 원하는 옵션을 chrome.exe 뒤에 추가해준다.

   다음의 예제는 --allow-file-access-from-files 속성을 추가한 예제이다.

   옵션을 추가 후 크롬을 재시작하면 해당 속성이 반영된 크롬이 시작된다.

   



크롬의 유용한 옵션

  • --allow-file-access-from-files

    • 로컬에서 html 파일을 수정한 후 크롬으로 확인하고 싶을때 크롬에서 file:// 프로토콜을읽지 못하는 경우가 있다. 이옵션으로 수행하면 로컬의 파일을 크롬에서 읽을 수 있다.
  • --disable-web-security
    • AJAX 의 cross-domain 문제를 피해갈 수 있다.
  • --disable-translate
    • 국가별 언어에 따른 크롬 자동번역 팝업을 안뜨게 한다.
  • --window-size=w,h
    • 크롬이 뜰때 사이즈를 조절 할 수 있다.
    • ex) --window-size=300,700


더많은 크롬 옵션 : http://peter.sh/experiments/chromium-command-line-switches/


Posted by leechwin