'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

댓글을 달아 주세요

  1. mariah 2013.03.15 22:06  댓글주소  수정/삭제  댓글쓰기

    Modernizr 같은 라이브러리 쓰면 더 편하지 않나요?
    브라우저 버전까지는 알아낼 수 없는지..

  2. Favicon of https://leechwin.tistory.com BlogIcon leechwin 2013.03.16 02:25 신고  댓글주소  수정/삭제  댓글쓰기

    Modernizr 는 브라우져의 종류를 알아내는 기능보다는 사용하고자하는 HTML,CSS 의 특정 피쳐의 호환 여부에 더 촛점을 맞춘 라이브러리 입니다.

    위의 포스팅을 참고하면 흔하지는 않지만 특정브라우져에만 국한되는 기능을 구현할 때 유용할 듯 합니다.

    하지만 특정 HTML5 나 CSS3 의 특정 피쳐 기능을 모든 브라우져에 호환을 고려할때에는 위의 포스팅 내용을 사용하기 보다는 Modernizr 와 같은 라이브러리를 쓰는게 정신건강에 좋겠죠? ^^;

크롬 브라우져를 실행할 때 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

댓글을 달아 주세요

  1. 옵션 2013.05.06 23:02  댓글주소  수정/삭제  댓글쓰기

    꼭 저 속성 경로에 추가해야되나요?
    다 적기에는 한계가 있는듯하네요...
    옵션종류는 많은데...

    • Favicon of https://leechwin.tistory.com BlogIcon leechwin 2013.05.07 10:21 신고  댓글주소  수정/삭제

      일단 크롬내부메뉴로 추가 옵션관리같은 기능이 없기때문에 저렇게 쓸수 밖에 없는것 같네요.
      필요하다면 스크립트로 batch 화해서 링크로 연결해 쓸 수 도 있을것 같습니다.

  2. 옵션 2013.05.07 13:40  댓글주소  수정/삭제  댓글쓰기

    바쁘 신데 답변감사드립니다.
    .bat 파일 작성은 한번 검색해서 공부해야겠습니다 ㅎㅎ

  3. 그림문자어려워 2017.07.22 13:40  댓글주소  수정/삭제  댓글쓰기

    크롬 속성 클릭하면 "크롬속성"이 안뜨고 "크롬 등록정보"가 뜨는데요