What’s new in IE11

2013.10.18

박재성

이 문서는 나눔글꼴로 작성되었습니다. 다운받기

Contents

1. 호환성
2. 디스플레이 및 방향
3. 개발자 도구
4. 그래픽
5. 자바스크립트
6. 네트워킹
7. 보안
8. 동영상
9. 고정된 사이트 알림
10. 기타
호환성
userAgent
MSIE 가 제거되고, 다른 모던 브라우저들과의 일관성을 위해 'like Gecko'가 포함된 형태로 변경

IE 10 : Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64;; Trident/6.0)

IE 11 : Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

navigator 객체의 appName과 product 속성도 HTML5 표준과 다른 브라우저와의 일관성을 위해 아래와 같이 값을 반환합니다.

navigator.appName --> "Netscape"

navigator.product --> "Gecko"
호환성
legacy API 삭제
IE 에서만 사용되었던 다음의 레거시 API 들이 제거 :

document.all
attachEvent/detachEvent
window.execScript()
window.doScroll()
script.onreadystatechange
script.readyState
document.selection
document.createStyleSheet
style.styleSheet
디스플레이 및 방향
Screen Orientation API
화면의 현재 방향을 감지하고, 방향 변경 시 알림을 받고, 방향을 특정 상태로 잠글 수 있음 (windows 7 IE11은 지원되지 않음)

screen.msOrientation; // 현재 방향

화면 잠금 :
screen.msLockOrientation("portrait-primary", "portrait-secondary");

해제 :
screen.msUnlockOrientation();

이벤트 :
object.addEventListener(“MSOrientationChange”,
handler,
false);

* 화면잠금은 전체 화면 모드일때만 사용가능

디스플레이 및 방향
deviceorientation/deivcemotion 이벤트
화면의 현재 방향을 감지하고, 방향 변경 시 알림을 받고, 방향을 특정 상태로 잠글 수 있음 (windows 7 IE11은 지원되지 않음)

window.addEventListener("deviceorientation", findNorth);

function findNorth(evt) {
var directions = document.getElementById("directions");
if (evt.alpha < 5 || evt.alpha > 355) {
directions.innerHTML = "North!";
} else if (evt.alpha < 180) {
directions.innerHTML = "Turn Left";
} else {
directions.innerHTML = "Turn Right";
}
}
디스플레이 및 방향
fullscreen API
전체 화면 API를 사용하여 사용자가 동영상, 이미지, 기타 콘텐츠에 집중하도록 할 수 있도록 처리

사용자가 시작한 이벤트에서 호출해야만 실행

document.body.addEventListener(“click”, function(e) {
e.target.msRequestFullscreen();
e.preventDefault();
});
개발자 도구
http://msdn.microsoft.com/library/ie/bg182326(v=vs.85)

• 새롭게 개발된 개발자 도구

• 새로운 사용자 인터페이스
• UI 응답성, 메모리, 탭 추가
• 에뮬레이션 기능 추가 :
- userAgent 변경
- 디스플레이 방향 및 해상도
- GPS (위도/경도 값 설정)

• 페이지 내에서 컨텍스트 메뉴를 통한 요소 선택

그래픽
캔버스 향상
Canvas 2D Context, Level 2 의 새로운 기능을 지원

• msImageSmoothingEnabled
비트맵 형식의 이미지 데이터를 불러와 페인팅될때 스케일이 변경된
이미지에 필터링 알고리즘을 적용해 부드럽게 표현하도록 처리

ctx.msImageSmoothingEnabled = true | false;

• Even-odd Fill rule (짝수-홀수 채우기 규칙)

Path로 작성된 닫혀있는 형태의 도형에 적용

ctx.fill(nonzero | evenodd);

• Dashed lines “nonzero” “evenodd”

다양한 형태의 점선을 생성

ctx.setLineDash([5,5,1,1]);
ctx.setLineDash([3,3]);
ctx.setLineDash([4, 2, 2, 4]);
그래픽
높은 DPI 지원
디바이스의 실제 DPI와 논리 픽셀의 비율 확인 속성 추가

window.devicePixelRatio; // 1:1인 경우 반환 값은 1

이전 버전의 IE(6+)에서는 아래와 같은 계산식을 수행 :

window.devicePixelRatio = window.screen.deviceXDPI / window.screen.logicalXDPI;
그래픽
WebGL 지원
자바스크립트
• 더 많은 코드가 JIT 컴파일러는 다형 캐싱 및 함수 호출 인라인을 포함한 다양한 최적화를 지원, JavaScript 수행 시간을 단축
• 가비지 컬렉션 수행시 효율적인 백그라운드 쓰레드 활용을 통해 UI 쓰레드 차단 주기와 시간을 대폭 감소
• ECMAScript 6 기능 일부 지원
자바스크립트
let, const keyword
블록 범위의 변수
let (로컬)및 const(상수) 키워드를 사용하여, 선언된 블록으로 범위가 제한되는 변수를 선언

var a = 5;
let(a = 6) alert(a); // 6
alert(a); // 5

var l = 10;
{ let l = 2; } // l == 2
// l == 10
자바스크립트
Collection Object : Set, Map, WeakMap
컨테이너 개체
Set Object 개체를 사용하여 고유한 개체의 컬렉션을 만들고, Map Object 또는 WeakMap Object를 사용하여 키/값 쌍의
컬렉션을 만들 수 있음

1. Set object : 데이터 컬렉션 2. Map object : key/value 형태의 컬렉션

var m = new Map();

var s = new Set();
m.set(1, "black");
m.set(2, "red");
s.add(1);
s.add({ “a” : “test” }); m.forEach(function (item, key, mapObj) {
console.log(item.toString());
s.add(“naver”);
});

s.forEach(function(item) {
console.log(item.toString());
})
3. WeakMap : key/value 형태로, 객체의 레퍼런스를 키로 갖는 컬렉션
var dog = { breed: "yorkie" }
var wm = new WeakMap();
wm.set(dog, "Sam");

wm.get(dog); // Sam
dog.breed; // yorkie
자바스크립트
ECMAScript Internationalization API
국제화 API
ECMAScript 국제화 API 사양을 따르는 국제화 API를 통해 로캘별 날짜/시간 서식, 숫자 서식 및 비교가 제공

1. 날짜와 시간
new Intl.DateTimeFormat("en-US").format(); // "‎10‎/‎17‎/‎2013“
new Intl.DateTimeFormat("ja-JP").format(); // "‎2013‎年‎10‎月‎17‎日“
new Intl.DateTimeFormat("ko-KR").format(); // "‎2013‎년 ‎10‎월 ‎17‎일“
new Intl.DateTimeFormat("ar-SA").format(); // "‎١٢‎/‎١٢‎/١٤٣٤“‎

2. 숫자 포맷
new Intl.NumberFormat("ko-KR").format(1234567890); // "1,234,567,890"
new Intl.NumberFormat("ar-SA").format(1234567890); // "١,٢٣٤,٥٦٧,٨٩٠"
new Intl.NumberFormat("hi-IN").format(1234567890); // "1,23,45,67,890“

3. 문자열 비교
var co1 = new Intl.Collator(["de-DE-u-co-phonebk"]);
var co2 = new Intl.Collator(["en-US"]);

var arr = ["ä", "ad", "af", "a"];

arr.sort(co1.compare); // a,ad,ä,af
arr.sort(co2.compare); // a,ä,ad,af
자바스크립트
__proto__ 속성

객체의 내부 프로토타입 레퍼런스 속성

var proto = { y: 2 };
var obj = { x: 10 };
obj.__proto__ = proto;

proto.y = 20;
proto.z = 40;

obj.x; // 10
obj.y; // 20
obj.z; // 40
 네트워킹
lazyload 속성
다음의 요소들에 사용가능하며, true로 설정되면 높은 우선 순위의 요소들보다 로딩의 우선순위가 뒤로 미뤄지게 된다.
--> audio, img, link, script, svg, video

<img src="example.jpg" lazyload="1 | 0" />

• 타입에 따른 로딩 우선순위
1. The root document of the webpage
2. CSS stylesheets
3. WOFF fonts
4. Script libraries
5. Images loaded using onload event handlers
6. Synchronous XMLHttpRequest (XHR) requests
7. Asynchronous script requests (such as indexedDB, Web Workers, File API, and others)
8. Asynchronous XHR requests
9. HTML5 audio and video
10. Microsoft ActiveX and other controls loaded using the object element
11. Deferred JavaScript (defer="true")

• 컨텍스트에 따른 우선순위
1. Requests made by the webpage in the foreground tab
2. Requests made by content loaded in iframe elements in the foreground tab
3. Requests made by webpages in background tabs
4. Requests for pre-rendered content
 네트워킹
prerendering, prefetch 지원
1. prerendering

<link rel="prerender" href="http://example.com/nextpage.html" />

IE11 Preview는 백그라운드에서 한 페이지를 미리 렌더링 할 수 있다. 두 번째 미리 렌더링 요청이 발생되면 첫 번째 요청을 대
체. 추가 미리 렌더링 요청은 무시

2. prefetch

<link rel="prefetch" href="http://example.com/style.css" />

캐시에 다운로드. 최대 10개까지 지원하며 추가요청은 무시됨

3. dns-prefetch

<link rel="dns-prefetch" href="http://example.com/"/>

요청이 더 빠르게 발생할 수 있도록 백그라운드를 확인하기 위해 DNS 쿼리를 식별

 네트워킹
back navigation caching, SPDY 지원

1. 다음의 조건을 충족시키면 이전 페이지에 대한 캐싱이 이뤄지고, 뒤로 가기 시 보다 빠르게 페이지를 로딩하게 된다.

- HTTP: 프로토콜을 사용하여 제공됩니다(HTTPS 페이지는 보안상 캐시되지 않음).

- 페이지에 beforeunload 이벤트 처리기가 정의되어 있지 않습니다.
- 모든 load 및 pageshow 이벤트가 완료되었습니다.
- 페이지에 다음 중 하나가 없습니다.
- 보류 중인 indexedDB 트랜잭션
- 열려 있거나 활성 상태인 웹 소켓 연결
- 실행 중인 웹 작업자
- Microsoft ActiveX 컨트롤, 도구 모음 또는 BHO(브라우저 도우미 개체)가 로드되어 있습니다.
- F12 개발자 도구 창이 열려 있지 않은 상태

2. 단일 TCP 커넥션을 통해 여러 개의 HTTP 요청을 수행할 수 있는 SPDY(draft 3)를 지원

SPDY draft 3 : http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft3
 보안
Web Cryptography API
var generation = windows.msCrypto.subtle.generateKey(
{ name: "RSASSA-PKCS1-v1_5", params: { modulusLength: 2048, publicExponent: new Uint8Array([0x01, 0x00,
0x01]) } },
false,
["encrypt", "decrypt"]
);
var pubKey, privKey;

generation.oncomplete = function (e) {

pubKey = e.target.result.publicKey;
privKey = e.target.result.privateKey;
}
 동영상 - SDP(Simple Delivery Profile)

HTML5 동영상에 캡션을 배치하고 스타일을 지정

TTML(Timed Text Markup Language)을 통한 :

- 텍스트 색을 변경
- 단색 배경 생성
- 글꼴, 글꼴 크기 및 글꼴 스타일을 변경
- 화면의 텍스트에 애니메이션 효과 적용

HTML :
<video id="videoElement" src="Complete 90s Video_VO_1_35.mp4" controls autoplay width="800">
<track src="Pop-up.ttml" id="popupCaptions" label="Pop-up Caption Style" default/>
<track src="Roll-up.ttml" id="rollupCaptions" label="Roll-up Caption Style"/>
<track src="Paint-on.ttml" id="paintonCaptions" label="Paint-on Caption Style"/>
</video>
 동영상 - SDP(Simple Delivery Profile)

TTML file :
<?xml version="1.0" encoding="utf-8"?>
<tt>
<head>
<styling>
<style xml:id="rollupStyle" s:fontSize="100%" s:textAlign="left" s:textOutline="#000000ff 10%"
s:backgroundColor="#00000000" s:color="#ffffffff" s:origin='10% 55%' s:extent='80% 35%'/>
</styling>
<layout>
<region xml:id="rollup" begin='00:00:00.000' end='00:01:35.000' style="rollupStyle"/>
</layout>
</head>
<body>
<p region='rollup' begin='00:00:01.000' end='00:00:10.000'>
<span s:backgroundColor="#000000ff" begin='00:00:00.000'>You </span>
<span s:backgroundColor="#000000ff" begin='00:00:00.250'>might </span>
<span s:backgroundColor="#000000ff" begin='00:00:00.500'>not </span>
<span s:backgroundColor="#000000ff" begin='00:00:00.750'>remember </span>
<span s:backgroundColor="#000000ff" begin='00:00:01.000'>us.</span>
</p>
</body>
</tt>
 동영상
Streaming XHR cache control
XHR로 전송받은 스트림 데이터를 디스크에 캐시될 지 여부를 설정할 수 있다.

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);
xhr.msCaching = 'enabled';
xhr.responseType = 'stream';
xhr.send();

XMLHttpRequest.msCachingEnabled(); // 캐싱 여부 반환 (true | false)

- msCaching 속성은 XHR이 open 된 상태에서 수행되어야 함

- 노트북 또는 태블릿의 경우에는 캐싱하지 않는 것이 배터리 성능을 더 오래 유지시킬 수 있다.
 고정된 사이트 알림
Pinned site notification
윈도우 8.1의 시작화면에 고정된 사이트에 주기적으로 알림을 줄 수 있는 방법

• meta 태그 이용
• JavaScript를 사용
• xml 설정파일 사용
 고정된 사이트 알림
Pinned site notification
HTML :
<meta name="application-name" content=" Contoso" />
<meta name="msapplication-TileColor" content=" #009900" />
<meta name="msapplication-square70x70logo" content="images/smalltile.png" />
<meta name="msapplication-square150x150logo" content="images/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="images/widetile.png" />
<meta name="msapplication-square310x310logo" content="images/largetile.png" />
<meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml;
polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml" />

XML :
<tile>
<visual lang="en-US" version="2">
<binding template="TileSquare150x150PeekImageAndText04" branding="name">
<image id="1" src="http://samples.msdn.microsoft.com/iedevcenter/PinnedSites/images/1.jpg"/>
<text id="1">Serving Today: Tacos</text>
</binding>
</title>
 기타
data-* 속성 지원
 http://msdn.microsoft.com/en-us/library/ie/dn254940(v=vs.85).aspx

Flexible box (“Flexbox”) 레이아웃 벤더 프리픽스 제거

 http://msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx

Pointer events 벤더 프리픽스 제거

 http://msdn.microsoft.com/en-us/library/ie/dn304886(v=vs.85).aspx

DOM 노드의 변경을 모니터링 할수 있는 Mutation observer 지원

 http://msdn.microsoft.com/en-us/library/ie/dn265034(v=vs.85).aspx

window.event 객체 변경 - MSEventObj 타입이 아닌 Event 객체가 전달됨

 http://msdn.microsoft.com/en-us/library/ie/dn384058(v=vs.85).aspx

문서 모드 제거 – IE8에서 호환성을 위해 도입되었던 문서 모드가 제거되며, IE11은 에지(Edge)모드로 처리

 http://www.modern.ie/en-us/f12
 http://msdn.microsoft.com/en-us/library/ie/dn384051(v=vs.85).aspx

checkbox 및 radio 버튼 기본 레이아웃 값 변경

padding : 0px
margin : 3px (marginLeft는 4px)
box-sizing : “border-box”
 http://msdn.microsoft.com/en-us/library/ie/dn384054(v=vs.85).aspx
 기타

터치 시 링크 하이라이팅 적용 제어 (Windows 7 IE11은 미적용)

<meta name="msapplication-tap-highlight" content="no" />

살짝 밀기 제스처로 '뒤로/앞으로' 탐색
모던 UI 실행에서만 동작

터치를 이용한 d&d

기존 마우스를 사용한 HTML5 d&d가 적용되어 있는 페이지도 별다른 설정 변경 없이 적용

* Windows 7 IE11에서 미 적용 기능 목록
 http://msdn.microsoft.com/en-US/library/ie/dn394063(v=vs.85)

* 다양한 버전의 IE가 설치된 가상머신 다운로드

 http://www.modern.ie/ko-kr/virtualization-tools
고맙습니다.

이 문서는 나눔글꼴로 작성되었습니다. 다운받기