ie8 web develope guide 1in1
DESCRIPTION
TRANSCRIPT
웹 표준 개발자의 IE 8 고려사항
NHN 오픈UI기술팀 정 찬 명
목 차
1. 지구촌 IE 버전별 점유율2. 한국의 IE 버전별 점유율3. 국내외 IE 통계의 시사점4. IE의 버전별 웹 표준 지원 현황5. IE 8과 낡은 웹 사이트의 호환성 문제6. 낡은 웹 사이트를 IE 8 에서 깨지 않기7. DTD가 없는 웹 사이트 대응법8. DTD가 있는 웹 사이트 대응법9. DTD가 혼재되어 있는 웹 사이트 대응법
10. Meta 호환 코드를 서버측 응답 헤더에 적용하는 방법
11. 웹 표준 사이트와 낡은 브라우저의 호환성 문제12. IE 조건부 주석을 사용하여 호환성 문제를 해결13. 조건부 주석의 이해14. 조건부 주석의 적절한 사용법15. CSS Hack을 사용하여 호환성 문제를 해결16. IE 8의 향상된 웹 표준 활용하기
지구촌 IE 버전별 점유율2009년 2월 Net Applications 보고서 기준
IE8 IE7 IE6 IE5 etc
1.17% 47.32% 18.85% 0.08% 32.58%
한국의 IE 버전별 점유율2009년 2월 Internet Trend 보고서 기준
IE8 IE7 IE6 IE5 etc
0.34% 38.86% 59.36% 0.03% 1.41%
국내외 IE 통계의 시사점
IE 6, 7, 8 버전에 모두 대응할 필요가 있다.
한편,
0.1% 미만의 IE 5.x 점유율을 어떻게 받아들일 것인가?
0.1%
미만의 점유율을 의미있게 받아들이는 경우이 문제를 해결할 방법이 전혀 없는 것은 아니지만되도록 운영체제를 업그레이드 하도록 권장하는 것이 '현실적인 타협점'.
0.1%
미만의 장애인을 정상인으로 만드는 것은불가능 하기 때문에 인권 보호 차원에서 '윤리적/법적' 으로'반드시' 대응할 책임이 있다.
그러나,
0.1%
미만의 장애 환경은사용자의 의지에 따라 인위적으로 개선할 수 있는 환경이므로'가능하다면' 돕는것이 좋겠다.
Microsoft가
0.1% 고객의 장애환경을 개선하는데 도움이 되었으면 좋겠다.
IE의 버전별 웹 표준 지원 현황Acid2 / Acid3 Test 기준
Acid2 TestHTML/CSS/PNG...
Acid3 TestHTML/CSS/DOM/SVG...
IE 6 = "absolutely bad"
Acid2 Acid3
IE 7 = "so bad"
Acid2 Acid3
IE 8 = "so good"
Acid2 Acid3
IE 9 = "absolutely good"
IE 10 = "excellent"
IE 8과 낡은 웹 사이트의 호환성 문제
IE 8이 웹 표준 준수율을
극도로 개선함으로써 미래의 웹 개발자는 자연스럽게 표준을 준수하게 될 것이고 웹 브라우저의 호환성 문제는 점차 사라질 것이다.
그러나,과거에 작성된 낡은 페이지들은오래된 브라우저에최적화 되어 있기 때문에 IE 8 브라우저에서는 오히려깨질 것이다.
"언젠가는 넘어야 할 산"
낡은 웹 사이트를 IE 8에서 깨지 않기
낡은 웹 사이트라고 해서 모두 같은 것은 아니다.
낡은 웹 사이트는 크게세 가지 유형으로 나뉜다.
첫째,DTD가 없는 웹 사이트.
둘째,DTD가 있는 웹 사이트.
셋째,DTD 없는 페이지와DTD 있는 페이지가웹 사이트에 혼재되어 있는 경우.
DTD가 없는 웹 사이트 대응법
DTD가 없는 페이지는아무 대응을 할 필요가 없다.
IE 8은 DTD가 없는 페이지를여전히 Quirks Mode로 렌더링 하기 때문에웹 사이트는 깨지지 않는다.
DTD가 있는 웹 사이트 대응법
DTD가 있는 페이지라고 해서 모두 같은것은 아니다.
첫째, IE 5에 최적화 된 페이지.
둘째, IE 6에 최적화 된 페이지.
셋째, IE 7에 최적화 된 페이지.
IE 5에 최적화 된 페이지 대응법.
<meta http-equiv="X-UA-Compatible" content="IE=5" />
IE 6에 최적화 된 페이지는완전히 개편해야 한다.
적어도 IE 7에 최적화 시켜야 하는데그렇지 않으면 구제할 방법이 없다.
IE 8 브라우저에 IE 6 렌더링 엔진이 없기 때문이다.
IE 6에 최적화된 페이지를 IE 7에 최적화 하는 것은 어렵지 않다.
IE 6에 최적화 된 페이지는IE 7에 최적화 작업 후 다음 코드로 대응한다.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
IE 7에 최적화 된 페이지 대응법.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
DTD가 혼재되어 있는 웹 사이트 대응법
DTD가 혼재되어 있는 웹 사이트는
DTD가 없는 페이지와DTD가 있는 페이지를 구분하여각각 다른 방법으로 대응해야 한다.
DTD가 없는 페이지는 아무런 대응을 하지 않는다.
IE 8은 DTD가 없는 페이지를 Quirks Mode로 렌더링 하기 때문에페이지는 깨지지 않는다.
DTD가 있는 페이지는 IE 7에 최적화 시킨 후 다음 코드 적용.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
만약, X-UA-Compatable 호환 코드를 DTD가 있는 페이지에만 별도로 적용하는 것이 어렵다면
모든 페이지에 호환 코드를 추가하는 방법도 있다.
DTD가 있는 페이지만 IE 7에 최적화 시킨 후모든 페이지에 다음 코드를 적용한다.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
DTD가 없는 페이지는 여전히 Quirks Mode로,DTD가 있는 페이지는 IE 7 표준 모드로렌더링 할 것이다.
Meta 호환 코드를서버측 응답 헤더에 적용하는 방법
Implementing the META Switch on IIS.<?xml version="1.0" encoding="utf-8"?><configuration> <system.webServer> <httpProtocol> <customHeaders> <clear /> <add name="X-UA-Compatible" value="IE=EmulateIE7" /> </customHeaders> </httpProtocol> </system.webServer></configuration>
Implementing the META Switch on Apache.X-UA-Compatible:IE=EmulateIE7
웹 표준 사이트와 낡은 브라우저의 호환성 문제
웹 표준사이트는
IE 8에 별도로 대응할 필요가 없다.
IE 8이
웹 표준을 잘 지원하고 있기 때문에.
그러나,웹 표준을 잘 지킨 사이트는낡은 브라우저에서 깨질 것이다.
낡은 브라우저는 웹 표준을 완전히 지원하지 않기 때문이다.
또한,낡은 브라우저라고 해서 다 같은 브라우저가 아니다.
IE 7, IE 6, IE 5세 가지 버전의 브라우저 엔진은지원하는 표준의 범위가 다르기 때문에렌더링도 각각 다르다.
렌더링이
제각기 다르기 때문에각각의 브라우저에 대응하는 CSS 코드도 달라야 한다.
IE 조건부 주석을 사용하여 호환성 문제를 해결
조건부 주석이란,
IE를 제외한 브라우저는 주석으로 처리하나IE 브라우저는 버전에 따라실제 콘텐츠로 인식하는 주석.
조건부 주석을
활용하면 IE 7, IE 6, IE 5각각의 브라우저에 최적화된 코드를각각 다르게 적용할 수 있다.
UI 개발자는
IE 7, IE 6, IE 5 브라우저에 각각 대응하는별도의 CSS 코드를 작성하고각각을 파일로 분리한다.
default.cssie7.cssie6.cssie5.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]-->
CSS Hack을 사용하여 호환성 문제를 해결
CSS Hack은
브라우저의 버그를 이용하여 문제를 해결하는 방법이다.
버전별로 CSS 파일을 각각 작성하지 않아도 간편하게 낡은 브라우저에 대응할 수 있지만CSS 문법 규격에 맞지 않는것이 흠이다.
CSS Hack은
미래의 다른 브라우징 장치에서 오류로 취급하지 않는다는 보장이 없기 때문에항상 주의가 필요하다.
IE 5 ~ IE 7 대응#selector { property:value; *property:value; }
문서의 DTD와 무관하게 작용함.
IE 5 ~ IE 6 대응#selector { property:value; _property:value; }
DTD가 없는 문서는 IE 7에도 작용함.
IE 5 대응#selector { property:value; _property /**/:value; }
DTD가 표준모드인 경우에만 작용함.
IE 8의 향상된 웹 표준 활용하기
IE 8이
등장 했지만 낡은 브라우저와의 호환성을유지하기 위하여 향상된 표준 코드를 사용하지 않는 것은바보같은 짓이다.
IE 8이
지원하는 표준 CSS 코드를얼마든지 사용할 수 있다.
향상된브라우저에 향상된 스타일을 제공하고더 나은 사용자 경험을 제공 해야 한다.
단,표준 코드가 낡은 브라우저에 대하여콘텐츠를 차별하는 형태로 구현되어서는 안된다.
참 고Internet Explorer Developer Center Internet Explorer 8 Readness Toolkit IE 8 Compatibility Test Suites CSS Selector Test Suites
