마이크로소프트사가 Internet Explorer 8 정식 버전을 내놓으면서 IE7과의 호환성에 대한 가이드라인을 공개하였다. 현재 IE8은 웹표준에 맞추어졌다는 특징이 있지만, 이것 때문에 기존 IE7의 실행에 맞추어진 일부 사이트는 IE8과의 호환성 문제가 있다. 특히, 스크립트나 CSS 문제가 가장 크다.
IE8은 이런 문제를 대처하기 위해 표준 기반의 IE8 Standards mode과 이전 브라우저와 호환성을 생각하는 Compatibility view라는 2가지 종류가 있어 IE7에 맞추어진 사이트에 그대로 이용할 수 있도록 처리하고 있다. 그러나, 호환 모드도 일부 문제가 있는 경우가 있어, 이번에 IE8에 맞춘 사이트를 위한 재검토 포인트를 마이크로소프트 개발팀에서 공개한 내용을 정리해보고자 한다.
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
IE8 Compatibility View와 IE7가 다르다는 점이 가장 화두가 될 것 같다. 내가 얼마전 MSDN 세미나였던 IE8 개발자 세미나에서 질문받았던 내용 중에 IE7 호환모드로 처리하여도 똑같지 않게 나온다는 지적사항이 있었다. 실제로 마이크로소프트사에서는 새로운 기능 추가와 몇 가지 사양 변경 때문에 100% 호환성을 제공할 수 없다라는 답변을 하였다. 크게 문제가 되는 것들 것 정리해보면 다음과 같다.
l Cross Document Communication
보안상 이유로 크로스 도메인/크로스 문서 통신이 사용 못한다.
해결방법: Cross Document Messaging (XDM) 사용
l Event Object Properties
XDM등 특정 Ajax 기능을 추가 시 IE8에 새로운 속성이 추가된 문제로 인해 IE8 Compatibility View에 대한 특정 이벤트 객체로 속성명이 충돌이 난다.(source 속성 등)
|
event.source = myObject; // IE8 읽기전용 |
해결방법: 충돌나는 사용자지정 속성명을 변경한다.
|
event.mySource = myObject; |
l Attribute Ordering
속성의 우선 순위가 바뀌어 컬렉션이나 내외 HTML값에 영향을 받는다. 만약 속성의 순서에 의존하는 페이지가 있는 경우 정상적으로 표시되지 않는다.
|
attr = elm.attributes[1]; |
해결방법: 컬렉션 내 속성을 이름으로 명시한다.
|
attr = elm.attributes[“id”]; |
l Unsupported CSS Values
IE버전에 의해 CSS값 지원 유무가 존재하지만 이것을 이용하여 버전을 구분하는 경우 문제가 있다.
|
try { elm.style.display = “table-cell”; } catch(e) { // IE7 실행, IE8은 안됨 } |
해결방법: CSS에 의한 버전 구분을 하지 않는다. 어려운 문제지만 만약 페이지에 이에 대한 실행이 의존적이라면 IE8 Standards Mode로 실행되도록 변경하는 것이 좋다.
IE팀 블로그 내용을 보면 IE8 Standards Mode에서는 호환성 문제가 대부분 파악된 것으로 나와 있다. 이는 기존 사이트가 IE8에 지원 대상이 아닌 경우의 기능을 이용하는 경우를 생각한 것으로 장기적인 해결책으로 보면 IE8 Standards Mode로 실행되는 사이트로 변경하는 것이 좋다라는 결론이다. 하지만 잠장적인 해결책은 IE8의 IE7호환모드를 이용하는 것도 방법이며 이에 대해서는 IE팀 블로그의 포스팅 글을 참고하여 정리해보면 주의해야 할 것들이 몇 가지 있다.
l Version Detection
버전 구분 처리에 대한 오작동은 조건부 주석, 스크립트, 서버측에서의 처리가 원인으로 자주 발생하지만, 그 원인 대부분은 조건부 주석이며 많은 사이트에서 버전 구분 기술로서 이용되고 있다.
|
<!--[if IE]> <link rel=”stylesheet” type=”text/css” src=”ie.css” /> <![endif] --> |
해결방법: 정상적인 버전 구분을 할 수 있도록 사이트를 변경하던지, 가능하면 아래와 같은 오브젝트에 의한 구분 방법을 이용한다.
|
<!--[if lte IE 7]> <link rel=”stylesheet” type=”text/css” src=”ie.css” /> <![endif] --> |
l Object Detection
객체 검사를 할 때, 어느 기능 검사에 다른 기능 호출을 하는 경우, 양쪽 모두의 기능이 특정 버전으로 동시 지원하지 않으면 오작동하게 된다.
|
if(window.postMessage) { window.addEventListener ( “load”, myHnadler, false ); } |
해결방법: 코드끼리 의존관계를 없애고 알맞은 객체 검사용 코드를 추가한다.
|
if(window.addEventListener) { window.addEventListener ( “load”, myHandler, false ); } |
l Malformed HTML
HTML문법 오류 수정방법이 IE8 Standards Mode에서 변경되고 있다. 결과적으로 IE7 실행에 의존하던 페이지는 IE8로 실행에 문제를 초래한다.
|
<ul> <li>1.1 <ul> <li>1.1.1</li> </li> <li>1.1.2</li> </ul> </li> </ul> |
해결방법: 정확한 형태의 마크업 언어로 작성한다.
l Element’s Class
IE7은 속성명으로 className을 사용하는 경우, 같은 속성의 클래스를 추출할 수 있었지만, IE8 Standards Mode에서는 표준에 맞추어진 형태로 변하고 있다. 그렇기 때문에, IE8에서는 className사용하여도 원래 결과를 얻을 수 없다.
|
return elm.getAttribute(“className”); |
해결방법: className 대신 class 사용한다.
|
return elm.getAttribute(“class”); |
l GetElementById
같은 메소드는 Case Sensitive 즉, 알파벳의 대소문자를 구별하고 있어 이름 속성을 찾지 못한다.
|
<div id=”Test”></div> <script type=”text/javascript”> var test = document.getElementById(“test”); </script> |
해결방법: 대소문자를 정확하게 구분하여 작성하며 이름속성 검색에는 getElementsByName 메소드를 사용한다.
|
<div id=”Test”></div> <script type=”text/javascript”> var test = document.getElementById(“Test”); </script> |
l Generic CSS Prefix Selectors
CSS 구문 분석에 있어 표준에 맞춘 이유로 제네릭 CSS 프리픽스 선택기는 IE8 Standards Mode에서는 지원되지 않는다. 이것에 영향을 주는 것은 VML요소에 행동 부여 위해 페이지가 CSS를 읽어들일 때, 스크립트 오류를 발생하거나 CSS에 대한 하드코딩을 하고 있는 경우 실행이 오류가 난다. 궁극적으로는 VML이 페이지내에 표시되는 않는 등의 문제가 발생한다.
|
v\:* { behavior: url(#default#VML); } |
해결방법: CSS 프리픽스 선택기를 사용하는 경우 합치고 싶은 개별 이름태그를 명시한다.
|
v\:polyline, v\:line { behavior: url(#default#VML); } |
l CSS Expressions
CSS Expressions은 IE8 Standards Mode에서는 지원되지 않는다.
|
/* CSS */ #main { background-color: expression (new Date()). getHours()%2 ? "#000" : "#fff" ); } |
해결방법: 강화된 CSS지원 또는 DHTML든 이용한다.
|
/* Script */ var elm = document.getElementById("main"); if((new Date()). getHours()%2) { elm.style.backgroundColor = "#000"; } else { elm.style.backgroundColor = "#fff"; } |
l Native JSON Object
IE에서는 네이티브 JSON 객체를 지원한다. 이는 ES 3.1 Proposal Working Draft에 작성된 기준에 맞추어진 것으로 일부 페이지는 JSON객체를 인식하여 이를 비표준형태로 처리되는 경우가 있다. 이는 결과적으로 스크립트 오류를 발생하여 AJAX 요청순서를 망가트린다.
|
if(! window.JSON) JSON = myJSON; JSON.encode(obj); // Not part of the standard」 |
해결방법: 비표준 문법을 사용자지정 JSON객체로 정의하던가, 표준에 맞추어진 코드로 재작성한다.
|
JSON = myJSON; JSON.encode(obj); |
l Initial CSS Property Values
currentStyle 객체로 값 설정이 되어 있지 않은 속성은 현재 각각 가지고 있는 초기값을 리턴하게 된다. 만약, z-index 등 CSS속성이 기존 초기값 상태에 의존하고 있는 경우 문제를 발생시킨다. 이는 ASP.NET 메뉴 컨트롤의 트러블 원인이 된다.
|
var zIndex = elm.currentStyle.zIndex; if(zIndex == 0) { // custom code } |
해결방법: 기존과 호환성을 가지는 값과 표준에 맞추어진 초기값 양쪽 모두로 실행하도록 재
재검토한다.
|
var zIndex = elm.currentStyle.zIndex; if(zIndex == 0 || zIndex == "auto") { // custom code } |
l Unspecified CSS Property Values
스타일 객체의 속성은 현재 DOM Level 2 Style Specification에 맞쳐 문자열을 리턴하게 된다.
정확하게는 정의되어 있는 않은 값을 가지는 z-index와 같은 CSS속성이 있는 경우에 문제가 발생한다.
|
var zIndex = elm.style.zIndex; if(zIndex === 0) { // custom code }」 |
해결방법: 기존과 호환성을 가지는 값이나 문자열 양쪽 모두의 값으로 실행하도록 재검토한다.
|
var zIndex = elm.style.zIndex; if(zIndex === 0 || zIndex === "") { // custom code } |
l Attributes Collection
속성 컬렉션에 대해서는 모든 속성의 구성이 IE에서는 인식되는 것은 아니다. 만약 IE7에서는 존재하던 속성에 의존하는 경우, 스크립트가 오류를 발생할 가능성이 있다.
|
var attr = elm.attributes["checked"]; // Potential script error in IE8 return attr.specified; |
해결방법: 속성 컬렉션에 모든 속성이 존재한다고 생각하지 말고, 우선 그 존재유무를 확인하다.
|
var attr = elm.attributes["checked"]; if(attr) return attr.specified; else return false; |
이상으로 IE팀블로그에 나온 내용을 토대로 정리해보았다. IE8이 나온지 얼마 안된 시점에서 점차 점유율이 높아지고 있는 상황에서 디자이너나 개발자들이라면 이에 대한 내용에 대해서 대처를 원활하게 처리하길 바란다.
'Web' 카테고리의 다른 글
| 64비트 Windows에 APM(Apache PHP MySQL) 설치하기 (0) | 2020.01.14 |
|---|---|
| 웹서버 속도 저하 문제 해결 (xp,Apache 2.2.X, XAMPP) (0) | 2012.01.30 |
| 각종 태그 사용법 (0) | 2011.12.15 |
| 웹페이지에서 MAC Address 구하는 컨트롤 (0) | 2011.07.01 |
| IE8을 IE7으로 강제 호환모드 적용 (0) | 2011.04.28 |
