조건부 주석문 스크립트
IE 버전의 크로스브라우징을 처리하기 위한 방법은 다양합니다.
대표적으로 조건부 주석문을 사용하거나 ie7.css, ie8.css 를 따로 관리하는 방법등이 있습니다.
여기서는 조건부 주석문에 사용되는 방법을 스크립트로 간단히 처리하는 방법에 대해 알아봅니다.
IE 조건부 주석문을 JS로 처리하기
일반적으로 조건부 주석문(Conditional Comment)을 아래와 같이 작성할 수 있습니다.
html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="ko-KR" class="no-js"> <!--<![endif]-->위와 같은 패턴을 사용하는 경우에는 HTML문서에 조건부 주석문을 모두 삽입해야하는 번거로움을 가지고 있습니다.
이를 스크립트로 처리하는 방법에 대해 알아봅니다.
JavaScript
/*
* --------------------------------
* @ Checked Ver.IE Cross Browser
* --------------------------------
*/
$(function(){
var UA = navigator.userAgent.toLocaleLowerCase();
if(UA.indexOf('msie') != -1 || UA.indexOf('trident')) {
var version = 11;
UA = /msie ([0-9]{1,}[\.0-9]{0,})/.exec(UA);
if(UA) version = parseInt(UA[1]);
}
var classNames = "";
if(version <= 11) {
classNames += ' ie';
classNames += ' ie' + version;
}
for(var i = version + 1; i <= 11; i++) {
classNames += ' lt-ie' + i;
}
document.getElementsByTagName('html')[0].className += classNames;
})
위의 방법은 IE11 이하에서 조건부 주석문에서 사용되는 클래스명이 IE 버전에 따라 html 태그에 클래스가 추가됩니다.
Jaehee's WebClub
'StyleSheet > CSS' 카테고리의 다른 글
| reset, default CSS (0) | 2016.05.20 |
|---|---|
| 효율적인 CSS 작성 방법 (0) | 2016.05.20 |
| CSS 이벤트 제어 속성 - pointer-events (0) | 2016.02.25 |
| CSS3 - Background Images (0) | 2016.01.07 |
| float 정렬에 이용된 트릭 사용 방법 (0) | 2016.01.07 |
