IE11의 호환성 변경
http://msdn.microsoft.com/ko-kr/library/ie/bg182625(v=vs.85).aspx
Internet Explorer 11에서는 웹 표준, 다른 브라우저, 실제 웹 사이트와의 호환성이 개선됩니다. 인기 있는 웹 표준과 이전 웹 사이트가 잘못 표시되지 않도록 방지하는 변경 내용에 대한 업데이트된 지원이 있습니다.
해당 변경 내용은 다음과 같습니다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
- 사용자 에이전트 문자열 변경
- 문서 모드 변경
- 레거시 API 추가, 변경 및 제거
- URL 문자 인코딩
- 사용자 지정 데이터 특성
- SVG "pointer-events" 속성에 대한 HTML 지원
- 표준 기반 사양의 변경 내용을 반영하는 업데이트
사용자 에이전트 문자열 변경
많은 레거시 웹 사이트와 관련해서 IE11의 가장 두드러진 업데이트 중 일부는 사용자 에이전트 문자열과 관련된 것입니다. Windows 8.1에서 IE11에 보고되는 문자열은 다음과 같습니다.
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
사용자 에이전트 문자열의 특정 값은 브라우저를 실행하는 운영 체제, 브라우저를 실행하는 장치, 웹 사이트가 호환성 보기로 표시되는지 여부 등 다양한 요인에 따라 달라집니다. 자세한 내용은 사용자 에이전트 문자열 변경을 참조하세요.
이전 버전의 Internet Explorer에서는 사용자 에이전트 문자열의 부분이 환경에 따라 달라집니다. Windows 7에서 IE11에 대한 문자열은 다음과 같습니다.
Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko
이러한 문자열을 이전 버전의 Internet Explorer에서 보고된 문자열과 비교하면 다음과 같은 변경 내용을 확인할 수 있습니다.
- 호환 가능("compatible") 및 브라우저("MSIE") 토큰이 제거되었습니다.
- "like Gecko" 토큰이 추가되었습니다(다른 브라우저와의 일관성을 위해).
- 이제 브라우저 버전이 새 수정("rv") 토큰에 의해 보고됩니다.
이러한 변경 내용은 IE11이 이전 버전으로 잘못 식별되지 않도록 합니다.
일반적으로 특정 브라우저 또는 브라우저 버전을 검색하면 안 됩니다. 이러한 테스트의 기본 가정은 브라우저를 업데이트할 때 가양성 결과를 초래하는 경향이 있습니다. 대신 필요할 때 기능을 검색하고 점진적 기능 향상을 통해 필요한 기능을 지원하지 않는 브라우저나 장치를 위해 간소화된 환경을 제공합니다.
드물긴 하지만 IE11을 고유하게 식별해야 하는 경우도 있습니다. 이렇게 하려면 Trident 토큰을 사용합니다.
문서 모드 변경
Windows Internet Explorer 8에서는 이전 버전의 브라우저에서 지원된 기능을 최신 표준 및 다른 브라우저에 지정된 기능으로 전환하는 데 도움이 되도록 문서 모드가 소개되었습니다. 이후 Windows Internet Explorer 릴리스에서는 이전 버전에서 지원된 기능을 에뮬레이트한 새 문서 모드를 소개하는 동시에 산업 표준에 정의된 기능에 대한 지원을 도입하여 이러한 전환을 계속했습니다.
많은 웹 사이트가 다른 브라우저에 보다 풍부한 환경을 제공하도록 업데이트되었지만 일부 웹 사이트는 레거시 기능 지원의 현재 상태를 계속 사용하여 Internet Explorer에 레거시 환경을 제공했습니다. 최신 버전의 브라우저는 다른 브라우저에 표시되는 환경을 지원했습니다.
IE11부터는 에지 모드가 기본 문서 모드입니다. 이 모드는 브라우저에서 사용할 수 있는 최신 표준에 대한 최고의 지원을 나타냅니다.
에지 모드를 사용하도록 설정하려면 HTML5 문서 형식 선언을 사용합니다.
<!doctype html>
에지 모드는 Internet Explorer 8에 도입되었으며 이후 각 릴리스에서 사용할 수 있게 되었습니다. 에지 모드에서 지원되는 기능은 콘텐츠를 렌더링하는 특정 버전의 브라우저에서 지원되는 기능으로 제한됩니다.
IE11부터는 문서 모드가 사용되지 않으며 일시적인 경우를 제외하고 더 이상 사용하면 안 됩니다. 최신 표준을 반영하도록 레거시 기능 및 문서 모드를 사용하는 사이트를 업데이트해야 합니다.
최신 표준 및 기능을 지원하도록 수정하는 동시에 사이트가 작동할 수 있도록 특정 문서 모드를 대상으로 지정해야 하는 경우 이후 버전에서 사용할 수 없는 전환 기능을 사용하는 것입니다.
현재 레거시 문서 모드를 대상으로 지정하는 데 x-ua-compatible 헤더를 사용하는 경우에는 사이트가 IE11에서 사용 가능한 최상의 환경을 반영하지 못할 수 있습니다. 자세한 내용은 modern.ie를 참조하세요.
레거시 API 추가, 변경 및 제거
많은 웹 사이트는 이전 브라우저에 최적화된 환경을 제공하기 위해 레거시(HTML4) 기능을 지원하는 브라우저를 찾습니다. 이 경우 레거시 기능과 HTML5, CSS3 등의 최신 표준을 지원하는 브라우저에서 문제가 발생할 수 있습니다. 사이트에서 최신 표준 지원을 검색하기 전에 레거시 기능을 검색하는 경우 최신 표준과 보다 풍부한 환경을 지원하는 브라우저에 레거시 환경을 제공할 수 있습니다.
따라서 IE11에서는 기본적으로 다양한 레거시 기능을 추가, 변경 및 제거합니다.
- 이제 navigator.appName 속성은 HTML5 표준을 반영하고 다른 브라우저의 동작과 일치시키기 위해 "Netscape"를 반환합니다.
- 이제 navigator.product 속성은 HTML5 표준을 반영하고 다른 브라우저의 동작과 일치시키기 위해 "Gecko"를 반환합니다.
- XDomainRequest 개체는 XMLHttpRequest에 대한 CORS로 바뀌었습니다.
- __proto__에 대한 지원이 추가되었습니다.
- dataset 속성이 추가되었습니다.
또한 몇 가지 레거시 API 기능이 제거되고 최신 표준에 지정된 기능이 사용되었습니다.
| 제거된 API 기능 | 대체 기능 |
| attachEvent | addEventListener |
| window.execScript | eval |
| window.doScroll | window.scrollLeft, window.scrollTop |
| document.all | document.getElementById |
| document.fileSize, img.fileSize | XMLHttpRequest를 사용하여 원본 가져오기 |
| script.onreadystatechange 및script.readyState | script.onload |
| document.selection | window.getSelection |
| document.createStyleSheet | document.createElement("style") |
| style.styleSheet | style.sheet |
| window.createPopup | div 또는 iframe을 높은 zIndex 값과 함께 사용합니다. |
| 이진 동작 | 다양하며 canvas, SVG 또는 CSS3 애니메이션 같은 표준 기반 동작을 사용합니다. |
| 레거시 데이터 바인딩 | WinJS 같은 프레임워크의 데이터 바인딩을 사용합니다. |
부분적으로, 이러한 변경 내용은 잘못 작성된 사용자 에이전트 검색 메커니즘이 Internet Explorer를 이전 버전으로 잘못 식별하지 않도록 방지하는 데 도움이 됩니다. 결과적으로 최신 표준을 사용하는 사이트가 의도한 대로 표시됩니다.
URL 문자 인코딩
IE11에서는 URL에 대한 문자 인코딩을 변경합니다. 특히, 이제 쿼리 문자열과 XHR 요청이 UTF-8 문자 인코딩을 사용하여 인코딩됩니다.
이 변경 내용은 다음을 제외하고 모든 URL에 영향을 줍니다.
- 앵커 이름 구성 요소(조각이라고도 함)
- 사용자 이름 및 암호 구성 요소
- file:// 또는 ftp:// 프로토콜 링크
이러한 변경 내용은 다른 브라우저의 동작과 일치하고 브라우저 간 XHR 코드를 간소화합니다.
사용자 지정 데이터 특성
IE11에서는 HTML5 사용자 지정 데이터 특성 및 이러한 특성에 대한 프로그래밍 방식 액세스를 제공하는 dataset 속성을 지원합니다. data- 접두사 다음에 특성 이름을 사용하여 요소에 데이터 특성을 할당할 수 있습니다.
<div data-example-data="Some data here"></div>
데이터 특성의 값을 가져오거나 설정하려면 다음 구문을 사용합니다.
// to get var myData = element.dataset.exampleData; // to set element.dataset.exampleData = "something new";
'프로그래밍 > Web' 카테고리의 다른 글
| [framework] Kickoff: A responsive, scalable front-end framework (0) | 2014.05.30 |
|---|---|
| [Responsive] Responsive Tables: A great solution for responsive tables (0) | 2014.04.29 |
| [HTML5] Quintus: An HTML5 game engine (0) | 2014.04.15 |
| [JSON] Peroxide: Simple, configurable proxy server (0) | 2014.04.15 |
| [Framework] Framework7: An HTML framework for building iOS7 apps (0) | 2014.04.01 |
