낡은 웹 사이트를 IE8에서 깨지 않기
낡은 웹 사이트라고 해서 모두 같은 것은 아닙니다. 낡은 웹 사이트는 크게 세 가지 유형으로 나뉩니다.
- 첫째, DTD가 없는 웹 사이트.
- 둘째, DTD가 있는 웹 사이트.
- 셋째, DTD 없는 페이지와 DTD 있는 페이지가 웹 사이트에 혼재되어 있는 경우.
DTD가 없는 웹 사이트 대응법
DTD가 없는 페이지는 아무 대응을 할 필요가 없습니다. IE8은 DTD가 없는 페이지를 여전히 Quirks Mode로 렌더링 하기 때문에 웹 사이트는 깨지지 않습니다.
DTD가 있고 IE5에 최적화 된 페이지 대응법
< meta http-equiv="X-UA-Compatible" content="IE=5" />
DTD가 있고 IE6에 최적화 된 페이지 대응법
IE6에 최적화 된 페이지는 개편해야 합니다. 적어도 IE7에 최적화 시켜야 하는데 그렇지 않으면 구제할 방법이 없습니다. IE8 브라우저에 IE6 렌더링 엔진이 없기 때문입니다. IE6에 최적화된 페이지를 IE7에 최적화 하는 것은 그다지 어렵지 않습니다. IE6에 최적화 된 페이지는 IE7에 최적화 작업 후 다음 코드로 대응합니다.
< meta http-equiv="X-UA-Compatible" content="IE=7" />
DTD가 있고 IE7에 최적화 된 페이지 대응법
< meta http-equiv="X-UA-Compatible" content="IE=7" />
DTD가 혼재되어 있는 웹 사이트 대응법
DTD가 혼재 되어 있는 웹 사이트는 DTD가 없는 페이지와 DTD가 있는 페이지를 구분하여 각각 다른 방법으로 대응해야 합니다. DTD가 없는 페이지는 아무런 대응을 하지 않습니다. IE8은 DTD가 없는 페이지를 Quirks Mode로 렌더링 하기 때문에 페이지는 깨지지 않습니다. DTD가 있는 페이지는 IE7에 최적화 시킨 후 다음 코드를 적용 합니다.
< meta http-equiv="X-UA-Compatible" content="IE=7" />
만약, X-UA-Compatable 호환 코드를 DTD가 있는 페이지에만 별도로 적용하는 것이 어렵다면 모든 페이지에 호환 코드를 추가하는 방법도 있습니다. DTD가 있는 페이지만 IE7에 최적화 시킨 후 모든 페이지에 다음 코드를 적용합니다.
< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
DTD가 없는 페이지는 여전히 Quirks Mode로, DTD가 있는 페이지는 IE7 표준 모드로 렌더링 할 것입니다.
웹 표준 사이트와 낡은 브라우저의 호환성 문제
웹 표준 사이트는 IE8에 별도로 대응할 필요가 없습니다. IE8이 웹 표준을 잘 지원하고 있기 때문입니다. 그러나, 웹 표준을 잘 지킨 사이트는 낡은 브라우저에서 깨질 것입니다. 낡은 브라우저는 웹 표준을 완전히 지원하지 않기 때문입니다. 또한, 낡은 브라우저라고 해서 다 같은 브라우저가 아닙니다. IE7, IE6, IE5 세 가지 버전의 브라우저 엔진은 지원하는 표준의 범위가 다르기 때문에 렌더링도 각각 다릅니다. 렌더링이 제각기 다르기 때문에 각각의 브라우저에 대응하는 CSS 코드도 달라야 합니다.
IE 조건부 주석을 사용하여 호환성 문제를 해결
조건부 주석이란, IE를 제외한 브라우저는 주석으로 처리하나 IE 브라우저는 버전에 따라 실제 콘텐츠로 인식하는 주석 입니다. 조건부 주석을 활용하면 IE7, IE6, IE5 각각의 브라우저에 최적화된 코드를 각각 다르게 적용할 수 있습니다. UI 개발자는 IE7, IE6, IE5 브라우저에 각각 대응하는 별도의 CSS 코드를 작성하고 각각을 파일로 분리합니다.
- default.css
- ie7.css
- ie6.css
- ie5.css
IE 조건부 주석의 이해
조건부 주석은 다음과 같은 형식을 갖습니다.
<!--[if expression]> HTML <![endif]-->
IE를 제외한 브라우저는 ‘<!--‘ 부터 ‘-->‘ 까지를 모두 주석으로 처리 하고 IE는 ‘HTML’을 실제 콘텐츠로 인식하고 파싱합니다.
IE 조건부 주석의 적절한 사용법
<link rel="stylesheet" type="text/css" href="default.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /> <[endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /> <[endif]-->
<!--[if IE 5]><link rel="stylesheet" type="text/css" href="ie5.css" /> <[endif]-->
