IE 계열 대응을 위한 조건부 주석에 대해 알아봅니다.
조건부 주석문의 일반적인 사용 방법은 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
<!--[if IE 7]><html class="no-js ie7"><![endif]-->
<!--[if IE 8]><html class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<title>Document</title>
<style>
body {background:green;}
.ie6 body {background:red;}
.ie7 body {background:orange;}
.ie8 body {background:yellow;}
</style>
</head>
<body>
</body>
</html>
아직까지 대중적으로 이 방법을 사용하고 있으며 별다른 이슈를 접해보지 못하신 사용자도 있을 것입니다.
하지만 위의 관련 코드는 IE 8,9에서 호환성 보기에서 문제점을 드러내고 있습니다.
html 에 조건부 주석문을 삽입하는 위와 같은 방법을 제시했던 HTML5 Boilterplate 는 2015 현재 IE 8+ 이상 지원 정책으로 변경되었습니다.
Boilterplate 더 이상 IE 6, 7을 고려하지 않다보니 해당 주석문은 현재 삭제되어 더 이상 사용하고 있지 않고 있습니다.
더군다나 IE 10+ 은 더이상 조건부 주석문을 지원하지 않습니다.
그리고 관련 코드의 문제점이 IE 8 호환성 보기 개발자 모드에서 발견되었습니다.
메타 태그내의 http-equiv=”X-UA-Compatible” 이 코드가 IE8,9 버전의 호환성 보기에서 제대로 렌더링 되지 않는 문제점을 가지고 있습니다.
위 코드의 목적은 IE 브라우저의 호환성 보기 모드를 사용자의 브라우저를 최신 브라우저(설치된 브라우저 버전)로 만드는 것인데
html 코드에 작성한 조건부 주석문으로 인해 호환성 보기 모드의 IE 8 이상 브라우저에서 개발자 모드로 볼때 IE7로 랜더링 되거나 쿽스모드로 렌더링되는 문제점이 발생합니다.
이 문제에 대한 논의가 있었고 그에 대한 해결책을 제시해 주었습니다.
3가지 방법을 정리한 글을 보면 해당 내용을 볼 수 있습니다.
이 이슈에 대해 많은 토론이 있었던 것 같습니다.
해당글의 첫번째 방법이 기존이 많이 사용하고 예전 버전의 보일러 플레이트에서 사용되던 패턴이었는데 첫번째 패턴은 호환성 모드에서 문제가 발생합니다.
그리고 다음의 링크는 저명한 니콜라스(CSS 전문가)의 글입니다.
이 패턴중 2,3번째가 해결책으로 제시되고 있습니다.
다음의 2번째 패턴의 아래 코드는 http-equiv=”X-UA-Compatible” 에 대한 호환성 모드에서의 문제점이 발견되지 않습니다.
<!--[if IE]><![endif]-->
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js ie6" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<title>Document</title>
<style>
body {background:green;}
.ie6 body {background:red;}
.ie7 body {background:orange;}
.ie8 body {background:yellow;}
</style>
</head>
<body>
<!--
by @julienw : https://github.com/paulirish/html5-boilerplate/issues/378#issuecomment-1203093
IE drops into Quirks Mode if the X-UA-Compatible header isn't set.
Less DRY but no duplication of <html> tag in source
-->
</body>
</html>
호환성 모드에서도 잘 동작되지만 깔끔해 보이지는 않네요.
다음의 코드는 http-equiv=”X-UA-Compatible” 를 설정하지 않고 server config 파일에 호환성 메타코드를 설정한 것입니다.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns"
xmlns:fb="http://www.facebook.com/2008/fbml">
<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
<!--[if IE 7]><html class="no-js ie7"><![endif]-->
<!--[if IE 8]><html class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
body {background:green;}
.ie6 body {background:red;}
.ie7 body {background:orange;}
.ie8 body {background:yellow;}
</style>
</head>
<body>
</body>
</html>
Apache 서버의 경우 아래와 같이 설정해 주면 해당 조건 주석문은 물론 호환성 보기 모드에서도 이슈없이 개발을 진행할 수 있습니다.
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge"
# `mod_headers` cannot match based on the content-type, however,
# the `X-UA-Compatible` response header should be send only for
# HTML documents and not for the other resources.
<FilesMatch "\.(appcache|atom|bbaw|bmp|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|htc|ico|jpe?g|js|json(ld)?|m4[av]|manifest|map|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
위의 2가지 패턴 중 개발환경에 적당한 패턴을 사용해야 할 것으로 보입니다.
일반적으로 서버를 필요로 하기 때문에 마지막 패턴이 적당하지만 개발환경이 다를 수 있으므로 선택적으로 사용해야 하겠습니다.
그리고 현재 보일러플레이트 버전이 아닌 v4 버전의 보일러 플레이트 코드는 IE 6+ 을 지원하고 있어서 국내 환경에서는 v4 가 적당할 지도 모르겠습니다.
물론, v4 코드를 사용할 지 아니면 서버에 코드를 사용하여 조건 주석문을 사용하는 방법은 사용자들의 선택사항입니다.
더군다나 IE10+ 은 더이상 조건부 주석문을 지원하지 않고 있기 때문에 조건부 주석문의 이점이 아쉬울 수도 있습니다.
IE10+ 의 classes 가 필요하다면 개인적으로 Modernizr + Detectizr 를 사용한다면 이 문제 또한 해결 됩니다.
해당 조건부 주석문의 필요성도 없어질 뿐더러 html 코드 내에서 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″> 사용하여도 무방합니다.
서버 셋팅을 할 필요가 없어지는 것이죠.
간단히 Modernizr 와 Detectizr 에 대해 설명드리자면 모더나이저는 HTML5, CSS3 신 기술을 체크하는 라이브러리입니다.
예를 들어 HTML5 스토리지 기술을 사용하려고 하는데 이를 지원하지 않는 브라우저에서는 캐시로 대체하고 지원하는 브라우저에서는 스토리지 신기술을 사용하여 서비스 하는 것이죠.
CSS3의 경우는 트렌지션을 지원하는 브라우저에서는 CSS3 트렌지션을 사용하고 지원하지 않는 브라우저에서는 jQuery로 대체할 수 있습니다.
이처럼 우아한 기능 저하 철학을 추구하고 사용하는 해외에서는 모더나이저를 필수로 사용하고 있습니다.
그런데 국내는 환경이 단계적 기능 향상을 선호하는 경향이 있기 때문에 신기술 우선이 아닌 구형 기술 우선으로 일처리를 하고 있는 실정이다.
쉬운 예로 애니메이션을 실무에 활용하는 사례를 국내에서는 찾아보기가 쉽지 않습니다.
전보다는 많이 개선되고는 있지만 아직 갈 길이 먼 것 같습니다. (저 역시도^^;)
국내에서는 유명 포털이 그나마 신기술에 대한 우아한 기능 저하 철학을 추구하고 있는 것 같습니다.
그리고 모더나이저는 신기술만을 체크할 뿐 사용자의 운영체제나, 브라우저까지는 체크하지 않기 때문에 이에 대한 보안을 디텍타이저가 맡고 있습니다.
즉, Detectizr가 Modernizr 플러그인 같은 것입니다. 모더나이저의 확장인 셈이죠.
플래시를 지원하는지, 맥인지, 윈도우인지, IE 버전…
ㆍ 장치
ㆍ 장치 모델
ㆍ 장치 방향
ㆍ 화면 크기
ㆍ 운영체제
ㆍ 운영 체제 버전
ㆍ 운영 체제 전체 버전
ㆍ 브라우저
ㆍ 브라우저 버전
ㆍ 브라우저 엔진
ㆍ 브라우저 플러그인
등을 감지합니다.
하지만 디텍타이저도 ie 8 이하를 체크하지 않고 IE9+ ie 버전을 체크하기 때문에 IE8 이하는 사용자 스크립트로 대체해야 합니다.
아쉽긴 하지만 확실히 Detectizr 역시 우아한 기능 저하 철학을 추구하고 있나 봅니다.
아무튼 사용자 스크립트로 IE8 이하만 버전 체크를 하여 조건부 주석문을 사용한 것과 동일한 환경을 구성하게 할 수 있습니다.
이런 이유로 조건부 주석문을 사용하지 않고 IE 버전 체크를 할 수 있는 사용자 스크립트와 모더나이저 + 디텍타이저를 사용하는 편이 나을 듯싶습니다.
더군다나 소스도 깔끔해지고 우아한 기능 저하 철학을 추구할 수 있다고 생각합니다.
반응형에서도 유용하기 때문에 앞으로는 저는 이 플러그인을 필수로 사용해야 할 것 같습니다.
위의 여러 방법 중에 무엇이 최선인지는 개인 판단에 따라 사용하시면 되겠죠^^
다음에는 위에 언급했던 IeChecker 를 위한 사용자 스크립트를 간단히 포스팅해보겠습니다.
저희에겐 구글신이 있기 때문에 지금 당장 찾아봐도 나오겠죠?!
결론은 Modernizr + Detectizr + IE Check 를 위한 사용자 스크립트를 해본 결과 충돌없이 잘 동작합니다.
출처: http://webclub.tistory.com/133 [Web Club]