웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹표준 코드의 작성의 목표는 모든 환경에서 동일한 웹페이지를 보여주고 기능을 수행하는 것이겠죠. 이는 효과적인 크로스브라우징의 목표와 같습니다. 하지만 여러 브라우저와 환경에 동일한 웹사이트를 구축하는 것은 그리 쉬운 일이 아닙니다.
목표에 다다르는 효과적인 방법 중 하나로 현재 브라우저를 알아내는 자바스크립트 기법이 있습니다. 브라우저는 각각 다른 기능들을 가지고 있으며 브라우저에 내장된 함수나 속성등이 서로 다른 부분이 있으므로 이를 이용해 어떤 브라우저인지 확인할 수 있죠.
# 브라우저를 확인하는 것이 왜 중요한가
브라우저마다 실제 표현되는 인터페이스가 다르므로 어떤 브라우저인지 확인할 수 있다면 특정 브라우저에만 해당하는 스타일을 적용할 수 있게됩니다. 이를 사용하여 모든 브라우저에서 동일하게 보여주는 것이 가능할 것 입니다. 이는 브라우저핵을 사용하는 것과는 조금 다릅니다. 핵의 경우 너무 다양한 방법들이 존재하고 모든 브라우저를 맞추는 방법은 복잡하여 적용하기 쉽지 않습니다. 하지만 구버전의 IE를 목표로 하는 경우라면 이 방법도 괜찮은 방법입니다.어쨌든 가장 쉽고 간단한 방법으로 브라우저를 감지하여 특정 css를 적용하는 방법이겠죠. 이를 활용하는 방법을 프로세스로 나타내면 아래와 같습니다.
! 브라우저 감지 후 적용 프로세스
단계별로 나누어 알아보면 아래의 순서대로 적용하게 됩니다.- 특정 브라우저에만 존재하는 함수나 프로퍼티의 유무를 확인
- 존재하는 경우 해당 브라우저 환경을 html이나 body 태그의 클래스에 추가
- css에 해당 브라우저에만 적용하도록 스타일을 추가
- 브라우저 검증 및 완료
위 프로세스가 끝내면 모든 브라우저 환경에서 동일한 웹인퍼페이스를 볼 수 있겠죠. 그렇다면 가장 중요한 부분은 어떤 브라우저인지 알아내는 방법이겠죠... 아래의 스크립트 코드는 브라우저를 감지하고 해당 브라우저의 별칭을 html 태그의 클래스로 추가하는 스크립트입니다. 위 스크립트는 페이지 최상단에서 가장 먼저 수행되는 것이 좋겠죠.
@ detect_browser.js
!(function () {
var isChrome = !!window.chrome && !!window.chrome.webstore,
isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0,
isFirefox = typeof InstallTrigger !== 'undefined',
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification)),
isIE = /*@cc_on!@*/false || !!document.documentMode,
isEdge = !isIE && !!window.StyleMedia,
isBlink = (isChrome || isOpera) && !!window.CSS;
if (isChrome) {
document.querySelector('html').classList.add('chrome');
}
else if (isOpera) {
document.querySelector('opera').classList.add('opera');
}
else if (isIE) {
document.querySelector('html').classList.add('ie');
}
else if (isEdge) {
document.querySelector('html').classList.add('edge');
}
else if (isFirefox) {
document.querySelector('html').classList.add('firefox');
}
else if (isBlink) {
document.querySelector('html').classList.add('blink');
}
})();
var isChrome = !!window.chrome && !!window.chrome.webstore,
isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0,
isFirefox = typeof InstallTrigger !== 'undefined',
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification)),
isIE = /*@cc_on!@*/false || !!document.documentMode,
isEdge = !isIE && !!window.StyleMedia,
isBlink = (isChrome || isOpera) && !!window.CSS;
if (isChrome) {
document.querySelector('html').classList.add('chrome');
}
else if (isOpera) {
document.querySelector('opera').classList.add('opera');
}
else if (isIE) {
document.querySelector('html').classList.add('ie');
}
else if (isEdge) {
document.querySelector('html').classList.add('edge');
}
else if (isFirefox) {
document.querySelector('html').classList.add('firefox');
}
else if (isBlink) {
document.querySelector('html').classList.add('blink');
}
})();
이제 위 코드가 추가된 웹사이트는 현재 브라우저의 정보를 알 수 있게 되었습니다. 페이지 소스를 확인하면 각각의 브라우저에 따라 아래처럼 클래스가 적용되어 나타나게됩니다.
<html class="chrome">
그 외에도 ie, edge, safari 그리고 firefox 등 역시 아래처럼 각각 나타날 것입니다.
<html class="ie">
<html class="edge">
<html class="safari">
<html class="firefox">
<html class="edge">
<html class="safari">
<html class="firefox">
이제 특정 브라우저에만 적용가능한 CSS를 적용해봅니다. 만약 크롬에서만 margin값을 30px 주는 경우라면 아래처럼 사용하겠죠.
html.chrome div {
margin: 30px;
}
margin: 30px;
}
이처럼 원하는 브라우저에 쉽게 적용이 가능하게됩니다. 크로스브라우징 방법으로 가장 쉬운 해결법이라 생각됩니다. 스크립트 역시 매우 가볍고 빠르게 동작하죠.
# 마치면서
위와같은 브라우저 디텍팅 방법은 가장 효과적인 방법으로 매우 많은 웹사이트에서 이 방식을 사용하고 있습니다. 웹 전반에서 표준화가 많이 이루어지고 있지만 아직은 해야할 부분들이 매우 많이 존재합니다. 많은 유저들이 서로 다른 환경에서 다른 브라우저를 사용하기 때문이죠. 그래도 전체 페이지가 심각하게 깨지는 현상들은 근래에는 보기 힘든 부분이 되었죠.위 방식은 새로운 브라우저 환경에 따라 적용되는 속성, 함수가 달라질 것으로 코드 수정이 필요할 수도 있습니다.하지만 기 사용되던 속성, 함수가 바뀔 가능성은 매우 적으므로 꽤 안정하게 사용할 수 있을 것입니다.
아래의 글도 찾고 계시지 않나요?
