IE 조건부 주석 (Conditional Comment)

어딘가에 적어뒀다고 생각했는데 찾질 못해 새로 작성하는 글입니다. 아직도 크로스 브라우징을 위해 많이 사용되고 있습니다.

조건부 주석 소개

조건부 주석은 IE10 미만에서만 작동하는 조건문으로, 이를 이용하여 IE 브라우저별로 어떤 기능이나 파일, 디자인등을 삽입하는 용도로 자주 사용된다.

조건부 주석 기본 문법

아래와 같이 기본형에 알맞은 조건을 기입하고 이를 만족할 경우, HTML 코드를 렌더링하게 된다. 구문 처음의 <!-- 부분과 마지막 > 이 적용된 부분은 타브라우저에서 무시된다.

<!--[if condition]> 
HTML 코드
<![endif]-->

조건부

사용되는 기호는 :

! : 아니다(not) - 예) [if !ie] ie가 아니라면
lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면
lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면
gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면
gte : 크거나 같다(greater than equal) - 예) [if gte ie 7] ie7 보다 크거나 같다
() : 우선처리
& : 그리고(and) - 예) [if (gte ie 7)&(lt ie 9)] ie7 이상이고 ie9 미만이라면
| : 또는(or) - 예) [if (ie 7)|(ie 8)] ie7 이거나 ie8 이라면

조건부 주석 활용

브라우저 판별

과거 HTML5 Boilerplate에서 크로스 브라우징을 대비해 아래와 같은 조건부 주석을 사용했었다.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7" lang="ko"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8" lang="ko"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9" lang="ko"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ko"> <!--<![endif]-->

<html> 요소에 조건부 주석을 이용해 각각의 브라우저에 맞는 클래스명을 부여해서 이를 컨트롤하려는 방법이였다.
마지막줄의 구문은 기존 구문과는 좀 다른데 이는 원래 조건에 부합하는 IE 버전과 타 브라우저들도 읽어 들여야 하는 부분을 동시에 만족하기 위해 --> 를 조건부 뒤에 추가하는 부분이다. 다만 조건에 못미치는 IE들은 이 조건부가 끝나는 즉시 렌더링되어 --> 부분을 화면에 표시하게 되기 때문에 이 부분을 주석처리하기 위하여 --> 부분을 <!-->로 변경하게 된다. 마지막 부분도 이와 동일한 이유다.
유사한 방식으로, <body> 안에 특정 브라우저에 해당하는 문구만을 보여주기도 한다.

위 방식은 호환성보기에 대한 X-UA-Compatible 메타 태그에 오동작을 유발하기에 <head> 태그 이후에만 적용하는 것을 추천하고 있다.

스크립트의 분기

기능과 관련된 부분에서 구형 IE 브라우저에 필요한 기능을 대체하기 위한 방법으로도 자주 사용된다.

<!--[if lt IE 9]>
     <script src="js/html5shiv.min.js">
<![endif]-->

최근에는 IE8이하 버전에 대한 호환성이 제거되는 각종 라이브러리 및 프레임워크들이 증가하고 있다. 즉, IE9이상의 버전과 기타 최신 브라우저들만 지원하기에 구형 브라우저에선 오류를 발생시키거나 오작동을 유발하기에 이를 회피해야 한다.

<!--[if gte IE 9]><!-->
    <script src="js/iscroll.min.js"></script>
<!--<![endif]-->

스크립트의 경우, 문서의 상단뿐만이 아니라 원하는 위치 어느 곳에나 삽입될 수 있다.
스타일시트의 경우, <head> 안 쪽에 작성되어야 FOUC의 유발을 최소화 할 수 있다.

'웹코딩 > HTML' 카테고리의 다른 글

안드로이드용 크롬39 theme-color 속성 지원 (1)	2015.10.23
input type="submit" vs button 비교 (3)	2015.07.08
파비콘(Favicon)의 모든 것 (29)	2015.05.14
MIME 타입 (0)	2015.05.13
글로벌 이벤트(Global Event) - WINDOWS, FORM, KEYBOARD, MOUSE, MEDIA (0)	2015.05.13

WEBDIR