IE 버전별 CSS 적용하기

Development 의견 남기기

웹이 널리 보급된 이유를 개발자 입장에서 찾으라면 html, css와 같은 비교적 간단한 문법과 jsp, php, asp 같은 server-side 언어의 발전을 들 수 있을것이다. 하지만 이 모든것의 배경에는 제작과 사용을 간단하게 만든 플랫폼이 있고, 이것이 바로 웹브라우저이다. 하지만 이런 개방성 만큼 여러 종류의 브라우저가 발전하면서 호환성문제가 대두되었고 이는 다시 개발자로 하여금 양날의 칼로 머리를 쥐어짜게 만들었다.
크게 보면 1. 서로 다른 종류의 브라우저와의 호환성 2. 같은 브라우저의 버전별 호환성 으로 나눌 수 있는데 이 두가지 모두에 있어 최고의 골치는 두말할것 없이 Internet Explorer, IE 다. 특히 10살이나 먹은 IE6은 웹개발자에게는 “악마” 같은 존재이다.

이런 IE에서 버전별로 다르게 보여지는 문제를 해결하기 위한 가장 효율적인 방법은 문제가 있는 부분만 브라우저에 맞게 수정하는 방법이다.
즉, 페이지를 표준에 맞게 작성한 후 브라우저별로 테스트 한 후 특정 브라우저에서 문제가 발생하면 그 브라우저에서만 별도로 제작해둔 css를 읽어 재정의되어 수정하도록 하는 방법이다. 아래는 IE 특정 버전별로 파일을 로딩하는 방법이다.

모든 IE에서만 적용하려면

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

IE6 버전에서만 읽어들이도록

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-only.css" />
<![endif]-->

IE7 버전에서만 읽어들이도록

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-only.css" />
<![endif]-->

조금 더 정교하게.

IE7 버전보다 낮은 버전에서만 (7버전 제외)

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-less-than.css" />
<![endif]-->

IE7 버전보다 낮은 버전에서만 (7버전 포함)

<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-less-than-equal.css" />
<![endif]-->

IE7 버전보다 높은 버전에서만 (7버전 제외)

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-greater-than.css" />
<![endif]-->

IE7 버전보다 높은 버전에서만 (7버전 포함)

<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-greater-than-equal.css" />
<![endif]-->

기타 다음과 같은 문구도 가능하다.

IE가 아닌 다른 브라우저만

<!--[if !IE]>
	<link rel="stylesheet" type="text/css" href="not-sucks.css" />
<![endif]-->

IE6.5 버전에서만 읽어들이도록

<!--[if IE 6.5000]>
	<link rel="stylesheet" type="text/css" href="ie6.5-only.css" />
<![endif]-->

gt 는 greater than , gte 는 greater than or equal, lt 는 less than, lte 는 less than or equal 의 약자이다. 다음과 같이 스크립트도 삽입할 수 있다.

<!--[if IE 6]>
<script type="text/javascript">
    alert("아직 IE6을 쓰는거야?"); 
</script>
<![endif]-->

이정도면 대충 큼지막한 것들은 해결할 수 있으리라.

덧붙여 :
이 방법은 Conditional Comments라는 MS IE에서 제공하는 기능으로 흔희 CSS Hack이라고 부르는 브라우저의 버그를 이용하는 편법이 아니다. CSS Hack을 이용하면 다른 브라우저를 포함하여 보다 세밀하게 조작할 수 있으나 지금 적용한 것이 나중에 계속 바르게 적용될거라고 보장할 수는 없다. 물론 브라우저 벤더들도 이를 충분히 인지하고 있으므로 갑자기 동작하지 않거나 하지는 않을것 같지만..

의견을 남겨주세요

Trackback URL : http://blueruin.org/archives/459/trackback

WP Theme & Icons by N.Design Studio
Entries RSS Log in