Chrome의 거의 모든 버전에서 제품, 성능, 웹 플랫폼 기능에 대한 상당한 수의 업데이트와 개선사항이 확인됩니다.
Chrome 49 (2016년 2월 2일 베타)에서 예상 안정화 날짜: 2016년 3월) Chrome에
getComputedStyle(e).cssX에서 'css' 접두사 사용이 지원 중단됨
요약: getComputedStyle(e)에서 'css' 접두사를 사용하는 것은 공식 사양의 일부가 아니므로 지원 중단되었습니다.
getComputedStyle은 아주 유용한 함수입니다. 렌더링 엔진에서 계산된 DOM 요소 스타일의 모든 CSS 값을 반환합니다. 예를 들어 getComputedStyle(_someElement_).height를 실행하면 현재 표시된 요소의 높이가 224.1px이므로 224.1px이 반환될 수 있습니다.
매우 유용한 API인 것 같습니다. 변경되는 내용은 다음과 같습니다.
Chrome의 렌더링 엔진이 Blink로 변경되기 전에는 WebKit이 사용되었으며, 이를 통해 속성의 시작 부분에 'css'를 접두사로 지정할 수 있었습니다. 예를 들어 getComputedStyle(e).height 대신 getComputedStyle(e).cssHeight입니다.
두 경우 모두 동일한 기본 값에 매핑되므로 동일한 데이터를 반환하지만 'css' 접두사를 사용하는 것은 비표준이며 지원 중단되고 삭제되었습니다.
참고 - cssFloat는 표준 속성이므로 이번 지원 중단의 영향을 받지 않습니다.
Chrome 49에서 이 방식으로 속성에 액세스하면 undefined가 반환되므로 코드를 수정해야 합니다.
initTouchEvent 사용이 지원 중단됨
TL;DR:
initTouchEvent은 사양 준수를 개선하기 위해 TouchEvent
constructor으로 대체되어 지원 중단되었으며 Chrome 54에서 완전히 삭제될 예정입니다.
삭제 의도 Chromestatus 추적기 CRBug 문제
오랫동안 Chrome에서 initTouchEvent API를 사용하여 합성 터치 이벤트를 만들 수 있었습니다. 이러한 이벤트는 테스트를 위해 또는 사이트에서 일부 UI를 자동화하기 위해 터치 이벤트를 시뮬레이션하는 데 자주 사용됩니다. Chrome 49에서 이 API가 지원 중단되었으며 Chrome 53에서 완전히 삭제될 예정이므로 다음 경고가 표시됩니다.
이 변경사항이 좋은 데는 여러 가지 이유가 있습니다.
터치 이벤트 사양에도 없습니다. Chrome의 initTouchEvent 구현은 Safari의 initTouchEvent API와 전혀 호환되지 않았으며 Android의 Firefox와도 달랐습니다. 마지막으로 TouchEvent 생성자를 훨씬 쉽게 사용할 수 있습니다.
사양을 따르지 않고 다른 구현과도 호환되지 않는 API를 유지하는 대신 사양을 따르는 것이 좋다고 결정했습니다.
따라서 먼저 initTouchEvent 함수를 지원 중단한 후 삭제하고 개발자가 TouchEvent 생성자를 사용하도록 요구합니다.
웹에서 이 API가 사용되고 있지만 상대적으로 적은 수의 사이트에서 사용되는 것으로 파악되므로 평소보다 빠르게 삭제하지는 않습니다. 사이트에서 Chrome 버전의 서명을 처리하지 않아 일부 사용이 중단된 것으로 보입니다.
initTouchEvent API의 iOS 및 Android/Chrome 구현이 매우 다르기 때문에 다음과 같은 코드를 사용하는 경우가 많았습니다 (Firefox를 자주 잊음).
var event = document.createEvent('TouchEvent');
if(ua === 'Android') {
event.initTouchEvent(touchItem, touchItem, touchItem, "touchstart", window,
300, 300, 200, 200, false, false, false, false);
} else {
event.initTouchEvent("touchstart", false, false, window, 0, 300, 300, 200,
200, false, false, false, false, touches, targetTouches, changedTouches, 0, 0);
}
document.body.dispatchEvent(touchEvent);
첫째, 사용자 에이전트에서 'Android'를 찾기 때문에 Android의 Chrome이 일치하여 이 지원 중단에 도달합니다. 하지만 당분간 Android에는 다른 WebKit 및 이전 Blink 기반 브라우저가 있으므로 이전 API를 계속 지원해야 하므로 아직 삭제할 수는 없습니다.
웹에서 TouchEvents를 올바르게 처리하려면 window 객체에서 TouchEvent의 존재를 확인하여 Firefox, IE Edge, Chrome을 지원하도록 코드를 변경해야 합니다. TouchEvent에 양수 'length' (인수를 사용하는 생성자임을 나타냄)가 있는 경우 이를 사용해야 합니다.
if('TouchEvent' in window && TouchEvent.length > 0) {
var touch = new Touch({
identifier: 42,
target: document.body,
clientX: 200,
clientY: 200,
screenX: 300,
screenY: 300,
pageX: 200,
pageY: 200,
radiusX: 5,
radiusY: 5
});
event = new TouchEvent("touchstart", {
cancelable: true,
bubbles: true,
touches: [touch],
targetTouches: [touch],
changedTouches: [touch]
});
}
else {
event = document.createEvent('TouchEvent');
if(ua === 'Android') {
event.initTouchEvent(touchItem, touchItem, touchItem, "touchstart", window,
300, 300, 200, 200, false, false, false, false);
} else {
event.initTouchEvent("touchstart", false, false, window, 0, 300, 300, 200,
200, false, false, false, false, touches, targetTouches,
changedTouches, 0, 0);
}
}
document.body.dispatchEvent(touchEvent);
RTCPeerConnection 메서드에 오류 및 성공 핸들러 필요
요약: 이제 WebRTC RTCPeerConnection 메서드 createOffer() 및 createAnswer()에 성공 핸들러뿐만 아니라 오류 핸들러도 필요합니다. 이전에는 성공 핸들러만 사용하여 이러한 메서드를 호출할 수 있었습니다. 이 사용은 지원 중단되었습니다.
Chrome 49에서는 오류 핸들러를 제공하지 않고 setLocalDescription() 또는 setRemoteDescription()를 호출하는 경우 경고도 추가했습니다. Chrome 50에서는 이러한 메서드에 오류 핸들러 인수가 필수일 것으로 예상됩니다.
이는 WebRTC 사양에 따라 이러한 메서드에 프로미스를 도입하기 위한 준비 작업의 일환입니다.
다음은 WebRTC RTCPeerConnection 데모(main.js, 126번째 줄)의 예입니다.
function onCreateOfferSuccess(desc) {
pc1.setLocalDescription(desc, function() {
onSetLocalSuccess(pc1);
}, onSetSessionDescriptionError);
pc2.setRemoteDescription(desc, function() {
onSetRemoteSuccess(pc2);
}, onSetSessionDescriptionError);
pc2.createAnswer(onCreateAnswerSuccess, onCreateSessionDescriptionError);
}
setLocalDescription()와 setRemoteDescription() 모두 항상 오류 핸들러 매개변수가 있었으므로 해당 매개변수를 지정하는 것은 안전한 변경사항입니다.
일반적으로 프로덕션 WebRTC 애플리케이션의 경우 WebRTC 프로젝트에서 유지관리하는 shim인 adapter.js를 사용하여 사양 변경사항과 접두사 차이로부터 앱을 보호하는 것이 좋습니다.
Document.defaultCharset이 지원 중단됨
요약: 사양 준수를 개선하기 위해 Document.defaultCharset가 지원 중단되었습니다.
삭제 의도 Chromestatus 추적기 CRBug 문제
Document.defaultCharset은 지역 설정을 기반으로 사용자의 시스템의 기본 문자 인코딩을 반환하는 읽기 전용 속성입니다. 브라우저가 HTTP 응답이나 페이지에 삽입된 메타 태그의 문자 인코딩 정보를 사용하는 방식 때문에 이 값을 유지하는 것이 유용하지 않은 것으로 확인되었습니다.
document.characterSet을 사용하면 HTTP 헤더에 지정된 첫 번째 값을 가져옵니다. 이 값이 없으면 <meta> 요소의 charset 속성에 지정된 값이 표시됩니다 (예: <meta charset="utf-8">). 마지막으로 이러한 값이 모두 없으면 document.characterSet은 사용자의 시스템 설정이 됩니다.
Gecko는 이 속성을 지원하지 않으며 명확하게 명시되어 있지 않으므로 이 속성은 Chrome 49 (2016년 1월 베타)에서 Blink에서 지원 중단됩니다. Chrome 50에서 속성이 삭제될 때까지 콘솔에 다음 경고가 표시됩니다.
이 사양을 지정하지 않는 이유에 관한 자세한 내용은 GitHub(https://github.com/whatwg/dom/issues/58)를 참고하세요.
getStorageUpdates() 삭제됨
요약: Navigator.getStorageUpdates()가 Navigator 사양에 더 이상 없으므로 삭제되었습니다.
삭제 의도 Chromestatus 추적기 CRBug 문제
이로 인해 영향을 받는 사람이 있다면 제가 모자를 먹겠습니다. getStorageUpdates()는 웹에서 거의 사용되지 않았습니다.
HTML5 사양 (매우 오래된 버전)을 인용하면 다음과 같습니다.
멋지지 않나요? 사양에서는 'whence'라는 단어를 사용합니다(이 단어는 사양에서 유일한 whence 인스턴스임). 사양 수준에는 localStorage 및 쿠키와 같은 차단 스토리지에 대한 액세스를 제어하는 StorageMutex가 있었으며 이 API는 다른 스크립트가 이 StorageMutex에 의해 차단되지 않도록 뮤텍스를 해제하는 데 도움이 됩니다. 하지만 구현된 적이 없으며 IE나 Gecko에서는 지원되지 않고 WebKit (따라서 Blink) 구현은 no-op입니다.
꽤 오랫동안 사양에서 삭제되었으며 Blink에서 완전히 삭제되었습니다 (가장 오랫동안 호출되더라도 아무것도 하지 않는 no-op이었습니다).
navigator.getStorageUpdates()를 호출하는 코드가 있는 경우 함수를 호출하기 전에 함수의 존재 여부를 확인해야 합니다.
Object.observe()가 지원 중단됨
요약: Object.observe()는 더 이상 표준화 트랙에 있지 않으므로 지원 중단되었으며 향후 출시에서 삭제될 예정입니다.
삭제 의도 Chromestatus 추적기 CRBug 문제
2015년 11월에 Object.Observe이 TC39에서 철회된다고 발표되었습니다. Chrome 49부터 지원 중단되었으며, 사용하려고 하면 콘솔에 다음 경고가 표시됩니다.
많은 개발자가 이 API를 좋아했으며, 이 API를 실험해 왔고 이제 전환 경로를 찾고 있다면 MaxArt2501/object-observe와 같은 폴리필이나 polymer/observe-js와 같은 래퍼 라이브러리를 사용하는 것이 좋습니다.