웹디자인 (HTML,JS)

CSS로 특정 브라우저를 선택하는 방법

날으는물고기 2021. 1. 21. 01:15

반응형 웹을 만들다보면 다양한 OS와 브라우저에 따라 표시되는 모습이 달라질 수 있어서
특정 OS나 브라우저를 CSS로 선택할 수 있는 방법을 정리합니다.

다양한 OS와 브라우저

다양한 OS와 브라우저에 적합하게 일반적인 CSS 속성만으로는 다소 어려움이 있다.

 

선택자와 가상선택자

 

CSS로 특정 요소를 선택하는 방법 <선택자>

CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다.

blog.pages.kr

 

CSS로 특정 요소를 선택하는 방법 <가상선택자>

가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스, ::(콜론두개)을 붙인 가상 요소로 요소의 특정 부분을 선택합니다.

blog.pages.kr

 

브라우저 선택자 (CSS Browser Selector)

CSS Browser Selector는 CSS 선택자를 강화하는 단 한 줄의 아주 작은 자바 스크립트입니다. 각 운영체제 및 각 브라우저에 대한 특정 CSS 코드를 작성할 수 있는 기능을 제공합니다.

 

사용 방법

1. CSS Browser Selector 자바 스크립트 다운로드

  • https://raw.githubusercontent.com/rafaelp/css_browser_selector/master/css_browser_selector.js
  • git clone git : //github.com/rafaelp/css_browser_selector.git

 

2. <head> 와 </ head> 태그 사이에 자바 스크립트 추가

  • <script src="css_browser_selector.js" type="text/javascript"></script>
  • 아래 한줄짜리 전체 스크립트를 HTML 코드에 직접 넣을 수도 있음
/*
CSS Browser Selector v0.4.0 (Nov 02, 2010)
Rafael Lima (http://rafael.adm.br)
http://rafael.adm.br/css_browser_selector
License: http://creativecommons.org/licenses/by/2.5/
Contributors: http://rafael.adm.br/css_browser_selector#contributors
*/
function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':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':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);

 

3. 브라우저 선택자를 통해 브라우저별 CSS 속성값 설정


OS 선택자

  • win - Microsoft Windows (all versions)
  • vista - Microsoft Windows Vista
  • linux - Linux (x11 and linux)
  • mac - Mac OS
  • freebsd - FreeBSD
  • ipod - iPod Touch
  • iphone - iPhone
  • ipad - iPad
  • webtv - WebTV
  • j2me - J2ME Devices (ex: Opera mini)
  • blackberry - BlackBerry
  • android - Google Android
  • mobile - All mobile devices


브라우저 선택자

  • ie - Internet Explorer (All versions)
  • ie8 - Internet Explorer 8.x
  • ie7 - Internet Explorer 7.x
  • ie6 - Internet Explorer 6.x
  • ie5 - Internet Explorer 5.x
  • gecko - Mozilla, Firefox (all versions), Camino
  • ff2 - Firefox 2
  • ff3 - Firefox 3
  • ff3_5 - Firefox 3.5
  • ff3_6 - Firefox 3.6
  • opera - Opera (All versions)
  • opera8 - Opera 8.x
  • opera9 - Opera 9.x
  • opera10 - Opera 10.x
  • konqueror - Konqueror
  • webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 - Safari 3.x
  • chrome - Google Chrome
  • iron - SRWare Iron


예)

  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mac.ie .mylink { font-weight: bold; }
  • .[os].[browser] .mylink { font-weight: bold; } -> .[os] 와 .[browser] 사이 공백 없음


추가 옵션

  • js - 자바 스크립트 가능 여부에 따라 표시하거나 숨길 수 있음

 

브라우저 선택자 예시

<style type="text/css">
  .ie .example {
    background-color: yellow
  }
  .ie7 .example {
    background-color: orange
  }
  .gecko .example {
    background-color: gray
  }
  .win.gecko .example {
    background-color: red
  }
  .linux.gecko .example {
    background-color: pink
  }
  .opera .example {
    background-color: green
  }
  .konqueror .example {
    background-color: blue
  }
  .safari .example {
    background-color: black
  }
  .chrome .example {
    background-color: cyan
  }
  .example {
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
  .no_js {
    display: block
  }
  .has_js {
    display: none
  }
  .js .no_js {
    display: none
  }
  .js .has_js {
    display: block
  }
</style>

위와 같이 정의하고 class 속성에 example 값을 넣으면 해당 요소의 색상은 브라우저에 따라 다르게 표현됩니다.

  • Internet Explorer - yellow
  • Internet Explorer 7 - orange
  • Gecko Engine on Windows (Firefox, Mozilla, Camino) - red
  • Gecko Engine on Linux (Firefox, Mozilla, Camino) - pink
  • Gecko Engine on Other OS (Firefox, Mozilla, Camino) - gray
  • Opera - green
  • Konqueror - blue
  • Safari - black
  • Chrome - cyan
728x90
저작자표시 비영리 동일조건