거의 모든 Chrome 버전에서 제품, 성능, 웹 플랫폼 기능과 관련된 수많은 업데이트와 개선사항이 확인됩니다.
Chrome 49 (베타 버전: 2016년 2월 2일. 예상 공개일: 2016년 3월) Chrome에 여러 변경사항이 있습니다.
getComputedStyle(e).cssX에서 'css' 접두사 사용 지원 중단됨
요약: getComputedStyle(e)의 'css' 프리픽스 사용은 공식 spec에 포함되지 않았으므로 지원 중단되었습니다.
getComputedStyle는 훌륭한 함수입니다. 이 메서드는 렌더링 엔진에서 계산된 DOM 요소 스타일의 모든 CSS 값을 반환합니다. 예를 들어 getComputedStyle(_someElement_).height를 실행하면 224.1px가 반환될 수 있습니다. 현재 표시되는 요소의 높이이기 때문입니다.
상당히 편리한 API인 것 같습니다. 변경 내용
Chrome의 렌더링 엔진이 Blink로 변경되기 전에는 WebKit을 기반으로 했으며 속성의 시작 부분에 'css'를 접두사로 추가할 수 있었습니다. 예를 들어 getComputedStyle(e).height가 아닌 getComputedStyle(e).cssHeight입니다.
둘 다 동일한 기본 값에 매핑된 동일한 데이터를 반환하지만 'css' 접두사 사용은 비표준이며 지원 중단되어 삭제되었습니다.
참고 - cssFloat는 표준 속성이며 이번 지원 중단의 영향을 받지 않습니다.
Chrome 49에서 이 방법으로 속성에 액세스하면 undefined가 반환되며 코드를 수정해야 합니다.
initTouchEvent 사용 지원 중단됨
요약: initTouchEvent는 사양 규정 준수를 개선하기 위해 지원 중단되고 TouchEvent
constructor로 대체되었으며 Chrome 54에서 완전히 삭제될 예정입니다.
삭제 인텐트 Chromestatus Tracker CRBug 문제
오랫동안 initTouchEvent API를 사용하여 Chrome에서 합성 터치 이벤트를 만들 수 있었으며, 이러한 터치 이벤트는 사이트의 일부 UI를 테스트하거나 자동화하기 위해 터치 이벤트를 시뮬레이션하는 데 자주 사용됩니다. Chrome 49에서는 이 API가 지원 중단되었으며 Chrome 53에서 이 API를 완전히 삭제하려고 다음과 같은 경고가 표시됩니다.
이러한 변경사항이 좋은 이유에는 여러 가지가 있습니다.
또한 터치 이벤트 사양에도 포함되어 있지 않습니다. initTouchEvent의 Chrome 구현은 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을 찾으면 지원 중단이 발생하기 때문에 좋지 않습니다. 하지만 당분간은 이전 API를 계속 지원해야 하는 다른 WebKit 및 이전 Blink 기반 브라우저가 Android에 포함될 예정이므로 아직 삭제할 수는 없습니다.
웹에서 TouchEvents를 올바르게 처리하려면 window 객체에 TouchEvent가 있는지 확인하여 Firefox, IE Edge, Chrome을 지원하도록 코드를 변경해야 합니다. 또한 '길이'가 양수인 경우(인수를 받는 생성자를 나타냄) 이를 사용해야 합니다.
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 메서드에 필요한 오류 및 성공 핸들러
TL;DR: 이제 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 Tracker 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 Tracker CRBug 문제
이게 누구에게나 영향을 미친다면 나는 모자를 먹을 것입니다. getStorageUpdates()는 웹에서 사용된 적이 거의 없습니다.
HTML5 사양의 (아주 이전 버전)을 인용하려면 다음을 따르세요.
정말 멋지죠? 사양에는 'whence'라는 단어도 사용됩니다(사양에 있는 whence의 유일한 인스턴스인 경우). 사양 수준에서는 localStorage 및 쿠키와 같은 차단 저장소에 대한 액세스를 제어하는 StorageMutex가 있었으며 이 API는 해당 뮤텍스를 해제하여 다른 스크립트가 이 StorageMutex에 의해 차단되지 않도록 합니다. 하지만 구현되지 않았고 IE나 Gecko에서 지원되지 않으며 WebKit(및 Blink의) 구현은 노옵스(no-ops)였습니다.
이 API는 오랫동안 사양에서 삭제되었으며 Blink에서 완전히 삭제되었습니다(가장 오랫동안 노옵스(no-ops)였고 호출 후에도 아무 작업도 하지 않음).
드물게 navigator.getStorageUpdates()를 호출하는 코드가 있는 경우 함수를 호출하기 전에 함수가 있는지 확인해야 합니다.
Object.observe() 지원 중단됨
요약: Object.observe()는 더 이상 표준화 트랙에 포함되지 않으므로 향후 출시에서 삭제될 예정이므로 지원 중단되었습니다.
삭제 인텐트 Chromestatus Tracker CRBug 문제
2015년 11월에 Object.Observe가 TC39에서 철회된다는 소식을 발표했습니다. Chrome 49부터 지원이 중단되었으며, 이를 사용하려고 하면 콘솔에 다음과 같은 경고가 표시됩니다.
많은 개발자가 이 API를 좋아합니다. 이 API를 실험해 왔으며 현재 전환 경로를 찾고 있다면 MaxArt2501/object-observe와 같은 폴리필이나 polymer/observe-js와 같은 래퍼 라이브러리를 사용해 보세요.