2018년 12월 4일 정식 릴리즈 예정인 Chrome 71 새로운 기능 중 UI 개발과 관련된 내용을 정리했습니다.
🔔 New Feature
- [CSS] ‘left’ and ‘right’ values for the ‘text-underline-position’ property
- [CSS] :host, :host-context, and ::slotted specificity
- [Graphics] Animation Worklet
- [Graphics] COLR/CPAL font support
- [CSS] CSS gradient color stop double-position syntax
- [JavaScript] importScripts()
- [JavaScript] cache.addAll()
- [DOM] Call capture event listeners in capturing phase at shadow hosts
- [JavaScript] Intl.RelativeTimeFormat
- [JavaScript] TextEncoderStream and TextDecoderStream APIs
- [CSS] Unprefixed Fullscreen API
- [JavaScript] WebAssembly PostMessage
- [JavaScript] globalThis
🔕 Remove Feature
- [JavaScript] Remove prefixed WebKitAnimationEvent interface
- [JavaScript] Remove prefixed WebKitTransitionEvent interface
- [DOM] document.origin
🔔 DevTools
- Hover over a Live Expression to highlight a DOM node
- Store DOM nodes as global variables
- Initiator and priority information now in HAR imports and exports
- Access the Command Menu from the Main Menu
‘left’ and ‘right’ values for the ‘text-underline-position’ property
Update Feature, CSS
text-decoration: underline; 속성 사용 시 라인의 위치를 조정합니다.
text-underline-position 속성 자체는 Chrome 57에서 제공되었으며 under 값이 기본값입니다.
Chrome 71에서는 test-underline-position 속성의 ‘left’, ‘right’ 를 추가로 지원합니다.
현재 중국어와 일본어의 수직 흐름의 밑줄은 브라우저마다 달라서, 동일하게 구현하기 위함입니다.
:host, :host-context, and ::slotted specificity
Update Feature, CSS
이전 Chrome 브라우저는 :host, :host-contex, ::slotted 스펙을 계산하지 않았습니다.
해당 스펙들에 대한 정의가 부족했기 때문인데요. 참고 URL
71 버전부터는 요소에 대한 shadow DOM이 지원되어 구체적인 확인이 가능해집니다.
[관련 경로] https://drafts.csswg.org/css-scoping/#host-selector
[관련 경로] https://drafts.csswg.org/css-scoping/#slotted-pseudo
COLR/CPAL font support
NEW Feature, Graphics
COLR/CPAL fonts는 OpenType font의 한 유형이며 컬러 폰트입니다.
이번 업데이트를 통해 Chrome은 3가지 색상의 글꼴 형식을 지원합니다. (COLR/CPAL, CBDT/CBLC, SBIX)
COLR/CPAL fonts는 벡터 기반이기 때문에 다운로드 속도가 빠르고 저장공간이 적습니다.
이 글꼴의 예로 Twemoji color font 가 있습니다.
[관련 경로] https://github.com/mozilla/twemoji-colr
[관련 경로] https://glyphsapp.com/tutorials/creating-a-microsoft-color-font
CSS gradient color stop double-position syntax
Update Feature, CSS
Conic Gradient를 지원(Chrome 69+) 하면서 CSS Gradient의 구문이 간단해졌습니다.
반복되는 색상 마다 각각의 위치를 지정했는데, 한 색상에 대해 두 가지 위치값 표현이 가능합니다.
/* as-is */ .box{ background: linear-gradient(45deg, black 25%, black 50%, white 50%, white 75%); } /* to-be */ .box{ background: linear-gradient(45deg, black 25% 50%, white 50% 75%); }
비동기 importScripts() 호출 제한
importScripts()는 메인 Service Worker 스크립트를 더 작은 조각으로 나누거나 다른 코드를 가져올 때 사용합니다.
importScripts() 호출은 메인 Service Worker 스크립트의 실행을 일시 중지시키고, 주어진 URL에서 추가 코드를 다운로드해 실행합니다.
Service Worker 사양에 따라, importScripts() 호출은 최상위 Service Worker 스크립트의 동기 실행 중이나 install 핸들러 안에서 비동기적으로 작동합니다.
Chrome 71 이전에는 install 처리기 외부에서 비동기적으로 importScripts()를 호출하면 작동했습니다.
// This only works in Chrome 70 and below. self.addEventListener('fetch', event => { importScripts('my-fetch-logic.js'); event.respondWith(self.customFetchLogic(event)); });
Chrome 71부터 과거 방식과 같은 호출은 다른 브라우저와 동일하게 에러를 발생시킵니다.
Service Worker 코드는 다음과 같아야 합니다.
// Move the importScripts() to the top-level scope. importScripts('my-fetch-logic.js'); self.addEventListener('fetch', event => { event.respondWith(self.customFetchLogic(event)); });
중복 url로 인한 cache.addAll() 호출 제한
cache.addAll()은 URL과 필요한 리소스의 요청들을 배열로 받고, 패치하여 이를 캐시에 저장합니다.
표준에 따르면 동일한 URL이 cache.addAll()에 여러 번 전달되는 경우, 중복된 호출에 대한 promise 반환은 거부됩니다.
Chrome 71 이전에는 중복 호출이 감지되지 않았고, 중복된 URL은 무시되었지만 Chrome 71부터는 콘솔에 경고 메시지가 기록됩니다.
Chrome 72부터는 URL이 중복되면 cache.addAll() 호출을 제한할 예정입니다.
다음과 같이 InstallEvent.waitUntil()에 전달된 promise 체인의 일부로 cache.addAll()을 호출하는 경우,
const urlsToCache = [ '/index.html', '/main.css', '/app.js', '/index.html' // duplication ]; self.addEventListener('install', event => { event.waitUntil( caches.open('my-cache') .then(cache => cache.addAll(urlsToCache)) ); });
중복된 URL로 cache.addAll()이 제한되면서 Service Worker 설치는 실패합니다.
이 제한 사항은 cache.addAll()에 전달되는 실제 URL에만 적용되며 ‘/’와 ‘/index.html’과 같이 URL이 다른 두 개의 동등한 응답으로 끝나는 캐시는 해당되지 않습니다.
Call capture event listeners in capturing phase at shadow hosts
NEW Feature, DOM
다른 브라우저와 상호 운용이 가능하도록 Chrome은 이제 shadow host에서 capturing 단계에 capture event listener를 호출합니다.
Intl.RelativeTimeFormat
NEW Feature, Javascript
Intl.RelativeTimeFormat은 날짜 및 시간 필드에 대해 국제화된 메시지를 제공합니다.
관습적인 로컬 단어 또는 구문을 사용하여 로컬 방식으로 라이브러리 및 Frameworks 형식을 지정할 수 있도록 지원합니다.
// 예시코드 const rtf = new Intl.RelativeTimeFormat('en'); rtf.format(3.14, 'second'); // → 'in 3.14 seconds' rtf.format(-15, 'minute'); // → '15 minutes ago' rtf.format(8, 'hour'); // → 'in 8 hours' rtf.format(-2, 'day'); // → '2 days ago' rtf.format(3, 'week'); // → 'in 3 weeks' rtf.format(-5, 'month'); // → '5 months ago' rtf.format(2, 'quarter'); // → 'in 2 quarters' rtf.format(-42, 'year'); // → '42 years ago'
[관련 경로] https://developers.google.com/web/updates/2018/10/intl-relativetimeformat
TextEncoderStream and TextDecoderStream APIs
NEW Feature, JavaScript
텍스트 인코딩 및 디코딩은 스트림을 지원하므로 이진 데이터의 스트림을 텍스트 및 그 반대로 쉽게 변환할 수 있습니다.
Unprefixed Fullscreen API
Update Feature, CSS
전체 화면 모드를 시작하고 종료하는 기능과 변경사항을 모니터링하는 이벤트 핸들러가 있습니다.
Chrome 15+부터 접두어를 붙여서 사용할 수 있었지만, Chrome 71부터는 접두어 없는 W3C 기본 구문을 지원합니다.
/* as-is */ :-webkit-full-screen{ } /* to-be */ :fullscreen{ }
[관련 경로] https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
WebAssembly PostMessage
NEW Feature, Javascript
WebAssembly.Module 객체의 PostMessage를 Web Worker에게 지원하도록 WebAssembly를 확장합니다.
명확히 하자면, 이것은 단지 Web Worker(동일한 process, 다른 thread)로 범위가 확장되고, cross-process 시나리오(예: cross-origin postMessage 또는 shared web worker)로 확장되지 않습니다.
globalThis
NEW Feature, Javascript
‘globalThis’는 플랫폼에 상관없이, 함수 내부의 ’strict mode’에서나 module에서도 글로벌 객체에 접근할 수 있게 합니다.
Remove prefixed WebKitAnimationEvent interface
Deprecated Feature, CSS
WebKitTransitionEvent 인터페이스가 제거됩니다. 널리 지원되는 AnimationEvent 인터페이스의 비표준 별칭입니다.
Remove prefixed WebKitTransitionEvent interface
Deprecated Feature, CSS
WebKitTransitionEvent 인터페이스가 제거됩니다. 널리 지원되는 TransitionEvent 인터페이스의 비표준 별칭입니다.
document.origin
Remove Feature, DOM
document.origin 속성은 제거될 예정이며, DOM 표준에서도 제거될 가능성이 높습니다. 이 속성은 Chrome과 WebKit에서만 지원했습니다.
window와 worker 컨텍스트에서 모두 사용할 수 있고 더 폭넓은 지원을 받는 self.origin이 있습니다.
DevTools
Hover over a Live Expression to highlight a DOM node
Live expression이 DOM node를 나타낼 때, Live Expression을 hover 하게 되면, viewport에서 해당 node를 강조합니다.
Store DOM nodes as global variables
콘솔 식 또는 DOM 트리에서 마우스 우 클릭 > ‘Store as global variable’ 메뉴를 선택하여 특정 노드를 전역 변수로 저장할 수 있습니다.
Initiator and priority information now in HAR imports and exports
네트워크 요청을 HAR 파일로 불러오기/내보내기가 가능합니다.
HAR 파일에는 DevTools에 초기화 프로그램과 우선순위 정보가 포함되며, 성능 측정에 도움이 됩니다.
[관련 경로] https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#save-as-har
Access the Command Menu from the Main Menu
Command Menu를 이용하면 DevTools 패널, 탭 및 기능에 빠르게 액세스할 수 있습니다.
이제 주메뉴에서 Command Menu를 열 수 있습니다.
[관련 경로] https://developers.google.com/web/tools/chrome-devtools/ui#command-menu
출처
- https://platformstatus.io/
- https://www.chromestatus.com/features/
- https://blog.chromium.org/
- https://developers.google.com/web/updates/2018/10/devtools
0개의 댓글