웹디자인 (HTML,JS)
CSS로 특정 브라우저를 선택하는 방법
날으는물고기
2021. 1. 21. 01:15
반응형 웹을 만들다보면 다양한 OS와 브라우저에 따라 표시되는 모습이 달라질 수 있어서
특정 OS나 브라우저를 CSS로 선택할 수 있는 방법을 정리합니다.
다양한 OS와 브라우저에 적합하게 일반적인 CSS 속성만으로는 다소 어려움이 있다.
선택자와 가상선택자
브라우저 선택자 (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