프런트엔드 개발의 가장 큰 디펜던시인 크롬 브라우저의 주요 이슈를 Chrome Platform Status의 Roadmap과 한 달간 blink-dev 활동 요약을 기준으로 정리하여 공유한다.
💡 M
은 Milestone을 의미하며, M93은 93버전을 의미한다.
💡 웹 플랫폼 관련 이슈 위주로 다루며, 서비스에 영향이 크다고 판단되는 부분은 목차에 📌 를 표시한다.
💡 표준화에 대한 웹 개발자의 의견은 크롬 스테이터스 사이트에 쓰인 내용을 그대로 인용했다.
M97
<details>
요소 HTMLScriptElement.supports(type)
메서드form
제출 시 개행 정규화 지연PermissionStatus.prototype.name
추가<integer>
만 허용하는 calc(<number>)
지원transform: perspective(none)
M98 (beta)
color-scheme
의 'only'
키워드window.open()
의 popup VS windowWritableStream
컨트롤러의 중지 요청self.structuredClone()
M99 (dev)
HTMLInputElement
의 showPicker()
font-family
값인 -webkit-standard
지원 중단Dev Trial
PaymentRequest.show
호출 방지그 외 프로토타이핑
<details>
요소브라우저가 페이지에서 숨겨진 콘텐츠를 찾기 위해 스크롤을 하거나 ScrollToTextFragment
또는 요소의 일부로 전환하는 등의 작업을 할 때 자동적으로 숨겨진 정보를 검색 가능하게 만들고 확장하는 기능이다.
현재는 접혀져 있어 숨겨진 세부 정보를 페이지 내 찾기로 검색할 수 없으며 이를 위해 모든 요소를 수동으로 확장하여야 한다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
getLayoutMap()은 영어-프랑스어 키보드와 같이 다른 레이아웃 맵을 가진 키보드에서 눌린 실제 키를 식별하는 문제를 해결하지만, 모든 컨텍스트에서 사용할 수 없다. 특히 iframe에서 사용이 불가하므로 허용 속성에 keyboard-map을 추가하여 이를 해결한다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
HTMLScriptElement.supports(type)
메서드<script>
요소의 타입을 감지하는 통합된 방법을 제공한다.
현재 HTMLScriptHElement
의 type
속성 값을 알 수 있는 간단한 방법이 없다. nomodule
속성을 사용하여 모듈 지원을 감지할 수 있으나 통일된 방법이 필요하여 기능이 추가되었다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
Firefox: 배포됨
form
제출 시 개행 정규화 지연기존 form
항목의 개행은 form
제출 프로세스 초기에 정규화되었으며 form
의 페이로드가 application/x-www-form-urlencoded
라는 타입으로 인코드되기 때문에 추가적으로 지연된 정규화가 일어났었다. 이제 초기에 진행되는 정규화가 제거되고 지연 정규화로 통합된다.
타 브라우저들과의 싱크를 맞추며 오래된 상호 운용성 문제를 해결한다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
PermissionStatus.prototype.name
추가읽기 전용 속성인 name
을 PermissionStatus
인터페이스에 추가하여 권한의 이름을 가져올 수 있도록 한다. Permission API
를 통해 여러 권한을 동시에 쿼리할 때 식별 방법이 없기에 기존엔 배열 순서 등을 이용했으나 이제 name
을 통해 안정적으로 처리가 가능하다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
fetch(evt.request)
를 호출해 탐색 요청을 처리하는 서비스 워커가 FetchEvent.request
의 출처 및 리다이렉션 체인을 사용하도록 한다. 이전에는 항상 리다이렉션 체인 없이 서비스 워커의 출처로 설정되었으나 이제 이 정보를 통해 서버에 대한 요청과 함께 전송되는 출처 헤더와 SameSite 쿠키를 제어할 수 있다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
출처 전파는 M97, 리다이렉션 체인 전파는 M98에 배포되었다.
<integer>
만 허용하는 calc(<number>)
지원<number>
로 파싱되는 CSS의 계산 함수는 <integer>
만 허용하는 모든 속성에서 사용할 수 있다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
WebTransport는 웹 보안 모델을 지키는 클라이언트가 보안 다중 전송을 사용하여 서버와 통신할 수 있도록 하는 프로토콜 프레임워크이다.
현재 웹 애플리케이션에서 클라이언트-서버 간 양방향 통신을 하는 API는 WebSocket
과 RTCDataChannel
두 가지다. WebSocket
은 TCP 기반으로 대기 시간에 민감할 때 사용하기 어렵고 RTCDataChannel
은 피어 간 컨텍스트에서 사용하도록 설계가 되어 있어 클라이언트-서버 간 통신에서 거의 사용되지 않았다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
transform: perspective(none)
CSS의 transform
속성 중 perspective
함수에 none
이란 매개변수를 지원하도록 한다. none
은 무한한 값과 동일하게 취급된다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
WebRTC용 SDES 키 교환 매커니즘은 2013년 이후 표준에서 MUST NOT으로 선언되었다. 크롬에서도 사용량이 최근 몇 년간 크게 감소했으므로 더 이상 사용하지 않고 제거한다.
SDES가 더 이상 사용되지 않는 이유는 보안 문제로 세션 키를 자바스크립트에 노출하는 문제를 갖고 있다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
ClipboardItem
객체에 Promise 지원을 추가한다. 이제 Blob 데이터를 동기적으로 제공하지 않고도 비동기인 clipboard.write()
에서 처리할 수 있다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
기존 색상 폰트 포맷의 문제를 해결하기 위해 강력한 2D 그래픽 글리프 정의(그라디언트, 변환)를 가능하게 하고 다양한 변형을 지원하며 기존 윤곽 정의를 재사용하는 COLRv1이라는 웹에 초점을 맞춘 차세대 폰트 형식을 설계한다
COLRv1은 비트맵 글꼴의 크기 조정 문제를 해결한다. 실험에서 이모지 폰트 사이즈를 1/5로 줄이는 동시에 렌더링 정확도도 높일 필요가 있었다.
https://codepen.io/drott_chrome/pen/ExvaYxm
color-scheme
의 'only'
키워드color-scheme
값에 only
키워드가 방법으로 다시 추가된다. 일반적인 값인 light
, dark
등을 선택하면 운영 체제에서 사용자 인터페이스를 바꾸며 시스템 색상 값으로 처리한다. 하지만 only
키워드를 추가하면 강제로 다크 모드 인터페이스를 사용하더라도 해당 요소에 대해선 적용을 받지 않게 된다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
window.open()
의 popup
VS window
window.open()
의 windowFeatures
에 popup
속성을 추가하여 popup
또는 tab/window
로 창을 만들고 모든 BarProp
속성들에 !is_popup
을 반환하도록 한다. popup
이 1
이면 팝업으로 윈도우가 열리고 0
이면 일반 윈도우가 열린다.
const popup = window.open('_blank','','popup=1');
const tab = window.open('_blank','','popup=0');
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
크로미움은 공용 웹 사이트에서 하위 리소스에 대한 사설 네트워크 요청을 하기 전 CORS의 사전 요청을 수행한다. 이를 통해 사설 네트워크 또는 localhost에서 제공되는 최종 리소스가 정상적으로 사전 요청을 처리한 경우 공용 웹 사이트에서 온 교차 출처 요청만 수신할 수 있게 된다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
WritableStream
컨트롤러의 중지 요청이전 Stream API의 WritableStream
의 writer.abort()
는 오래 걸리는 쓰기 작업이 완료된 후에야 중지할 수 있었다. 하지만 이번 변경으로 진행 중이던 쓰기 작업을 바로 중단하거나 사용자 요청 시 중단할 수 있게 된다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
self.structuredClone()
The structured clone 알고리즘을 사용하여 객체의 깊은 복사를 만들어내는 메서드가 추가된다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
showPicker()
HTMLInputElement의 showPicker()
메서드는 API를 호출해 input 엘리먼트에 선택기 패널이 노출되도록 할 수 있다. (색상, 파일, 날짜 등)
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
실시간으로 필기 그림에서 텍스트를 인식하기 위해 고급 필기 인식 서비스를 사용하는 웹 어플리케이션용 API이다. 여기서 필기 그림이란 사람의 필기 과정을 설명하기 위한 시간적, 위치적 정보를 말한다.
최신 고급 필기 인식 알고리즘을 사용하여 써드파티 통합의 필요성을 줄이는 데 필요하다. 이 API를 사용하면 필기 입력을 처리하는 웹 어플리케이션(예: 메모 작성 앱)을 쉽게 개발할 수 있다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
Canvas 2D에 다음과 같은 기능 및 API가 추가된다.
new CSSRGB()
)reset()
)을 추가한다. (기존에는 clearRect()
를 복잡하게 사용해야 했음.)RoundRect
를 네이티브로 지원한다.상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
'text-emphasis'
, 'text-emphasis-color'
, 'text-emphasis-position'
, 'text-emphasis-style'
CSS 속성을 말한다. 이는 -webkit
접두사가 빠진 속성이다.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
설치된 데스크탑용 웹앱의 창 제어 오버레이가 활성화되면 클라이언트 영역이 제목 표시줄 영역을 포함한 전체를 덮도록 확장되며, 창 제어 버튼(닫기, 최대화, 최소화)이 오버레이 된다.
이 기능을 통해 설치된 데스크탑 웹 앱을 기본 앱처럼 보이게 한다.
변경
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
font-family
값인 -webkit-standard
지원 중단font-family
값인 -webkit-standard
의 지원을 중단한다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다
PaymentRequest.show
호출 방지사용자 활성화 없는 PaymentRequest.show
호출을 허용하면 악성 웹사이트에서 악용될 수 있다. 사용자를 보호하기 위해 사용자 활성화가 필요하도록 스펙이 변경되었으며 변경된 스펙에 따라 개발 중이다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.
M98에 deprecated 되고 M99에 제거될 예정이다.
이제 막 이슈 생성 단계지만 관련 API가 추가될 가능성을 공유하고자 한다.
포커스 그룹 기능은 포커스가 가능한 엘리먼트들 사이에서 키보드 화살표 키를 이용한 키보드 포커스 탐색을 용이하게 하는 기능이다.
중첩된 그리드 컨테이너에 "서브 그리드" 개념을 도입하는 CSS 그리드 레이아웃 모듈 레벨 2 스펙을 구현한다.
CSS 서브 그리드는 중첩된 그리드 컨테이너에서의 상속 문제를 해결할 수 있다. 그리드 컨테이너의 직계 자식만 부모의 그리드 속성(트랙의 크기, 각 그리드 라인의 이름)을 알고 있다. 웹 작성자가 다른 그리드의 일부 영역에 걸쳐 있는 그리드로 작업할 때마다 가장 안쪽 그리드의 자식은 가장 바깥쪽 그리드 구조를 알지 못한다. "서브 그리드"는 행 및 열의 정의가 부모로 지연되는 중첩 그리드 컨테이너다. 이를 이용해 상위 그리드의 스팬 그리드 영역에서 그리드 속성 및 정렬을 상속하여 문제를 해결할 수 있다.
상기 제안에 대한 타 브라우저의 의견은 다음과 같다.