Chrome 71의 새로운 기능

피트 레페이지

Chrome 71에서는 다음 지원이 추가되었습니다.

이 외에도 다양한 기능이 제공됩니다.

저는 피트 레페이지입니다. 지금부터 Chrome 71의 개발자를 위한 새로운 기능을 알아보겠습니다

변경 로그

여기에서는 일부 주요 특징만 다룹니다. Chrome 71의 추가 변경사항은 아래 링크를 확인하세요.

Intl.RelativeTimeFormat()로 상대 시간 표시

최신 게시물의 상대적 시간을 표시하는 트위터

많은 웹 앱에서는 전체 날짜와 시간을 표시하는 대신 '어제', '이틀 후', '1시간 전'과 같은 문구를 사용하여 무슨 일이 일어났거나 발생할 것인지를 나타냅니다.

상대 시간의 표시가 너무 일반적이 되어 대부분의 일반적인 날짜/시간 라이브러리는 이를 처리하는 현지화된 함수를 제공합니다. 실제로 제가 빌드하는 거의 모든 웹 앱인 Moment JS는 이러한 목적으로 명시적으로 추가한 첫 번째 라이브러리 중 하나입니다.

Chrome 71에서는 작업을 JavaScript 엔진으로 이동하고 상대적 시간의 현지화된 형식을 지정하는 Intl.RelativeTimeFormat()를 도입합니다. 이렇게 하면 성능이 약간 향상되며 브라우저에서 아직 새 API를 지원하지 않는 경우에만 폴리필로 이러한 라이브러리가 필요합니다.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

사용하는 방법은 간단합니다. 새 인스턴스를 만들고 언어를 지정한 다음 상대적 시간으로 형식을 호출하면 됩니다. 자세한 내용은 마티아스의 Intl.RelativeTimeFormat API 게시물을 참고하세요.

세로 텍스트에 밑줄 위치 지정

일치하지 않는 밑줄이 있는 세로 텍스트

중국어 또는 일본어 텍스트가 세로 흐름으로 표시될 때 브라우저가 밑줄이 배치된 위치(왼쪽 또는 오른쪽에 있음)와 일치하지 않을 수 있습니다.

Chrome 71의 text-underline-position 속성은 이제 CSS3 텍스트 장식 사양의 일부로 left 또는 right를 허용합니다. CSS3 텍스트 장식 사양은 사용할 선의 종류, 스타일, 색상, 위치 등을 지정하는 데 사용할 수 있는 몇 가지 새로운 속성을 추가합니다.


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

음성 합성을 사용하려면 사용자 활성화 필요

어떤 사이트를 보게 되고 갑자기 이야기가 시작되었을 때 모두 놀랐습니다. 자동재생 정책은 사이트에서 오디오 재생 또는 오디오가 포함된 동영상 파일을 자동으로 재생하지 못하도록 합니다. 일부 사이트에서는 대신 음성 합성 API를 사용하여 이 문제를 해결하려고 시도했습니다.

Chrome 71부터 음성 합성 API가 작동하려면 페이지에서 일종의 사용자를 활성화해야 합니다. 이는 다른 자동재생 정책과 일치합니다. 사용자가 페이지와 상호작용하기 전에 사용하려고 하면 오류가 발생합니다.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

사이트에 가서 깜짝 놀랐고, 동료들이 주위에 앉아 있었어요.

그 외에도 다양한 기능 제공

개발자를 위한 Chrome 71의 몇 가지 변경사항은 물론 이 외에도 많은 변경사항이 있습니다.

  • 이제 Element.requestFullscreen() 메서드를 Android에서 맞춤설정할 수 있으며 탐색 메뉴를 표시하는 방식과 사용자 동작이 실행될 때까지 사용자 에이전트 컨트롤이 표시되지 않는 완전한 몰입형 모드 중에서 선택할 수 있습니다.
  • 모듈 스크립트 요청의 기본 사용자 인증 정보 모드가 omit에서 same-origin로 변경되었습니다.
  • 또한 Shadow DOM v1 사양에 Chrome을 인라인으로 추가하여 이제 Chrome 71에서 :host() 및 :host-context() 의사 클래스의 특정성과 ::slotted()의 인수의 특정성을 계산합니다.

Chrome DevSummit 동영상

Chrome Dev Summit에 참석하지 않았거나 참석했지만 모든 강연을 보지는 못했다면 YouTube 채널에서 Chrome Dev Summit 2018 재생목록을 확인하세요.

Eva와 Phil은 서비스 워커로 더 빠르고 복원력이 우수한 앱 빌드에서 서비스 워커를 사용하기 위한 멋진 기법을 알아봤습니다.

Mariko와 Jake는 복잡한 JS 웹 앱, 느린 속도 피하기에서 Squoosh를 빌드하는 방법에 관해 이야기했습니다.

Katie와 Houssein은 속도 기본사항: 빠른 웹사이트를 위한 핵심 기술에서 사이트의 성능을 극대화하는 몇 가지 훌륭한 기법을 다루었습니다.

제이크가 케이크를 떨어뜨렸습니다. Chrome DevSummit 2018 재생목록에 다른 멋진 동영상도 많이 있으니 확인해 보세요.

구독

최신 동영상을 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 72가 출시되는 대로 바로 Chrome의 새로운 기능을 소개해 드리겠습니다.