Chrome 71의 새로운 기능

Pete LePage

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

이 외에도 다양한 기능이 있습니다.

저는 피트 르페이지입니다. Chrome 71에서 개발자를 위한 새로운 기능을 살펴보세요.

변경 로그

여기에는 일부 주요 내용만 포함되어 있습니다. Chrome 71의 추가 변경사항은 아래 링크를 참고하세요.

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

트위터에 최신 게시물의 상대 시간이 표시됨

많은 웹 앱에서는 전체 날짜와 시간을 표시하는 대신 '어제', '2일 후', '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로 변경되었습니다.
  • Chrome을 Shadow DOM v1 사양에 맞게 조정하여 이제 Chrome 71에서는 :host() 및 :host-context() 가상 클래스와 ::slotted()의 인수의 특이성을 계산합니다.

Chrome DevSummit 동영상

Chrome Dev Summit에 참석하지 못하거나 참석했지만 모든 강연을 시청하지 못한 경우 YouTube 채널의 Chrome Dev Summit 2018 재생목록을 확인하세요.

에바와 필은 서비스 워커를 사용하여 더 빠르고 탄력적인 앱 빌드에서 서비스 워커를 사용하는 멋진 기법을 살펴봤습니다.

마리코와 제이크는 느림을 피하는 복잡한 JS 사용량이 많은 웹 앱에서 Squoosh를 빌드하는 방법을 설명했습니다.

케이티와 하우세인은 속도 기본사항: 빠른 웹사이트를 위한 핵심 기법에서 사이트의 성능을 극대화하는 몇 가지 훌륭한 기법을 다뤘습니다.

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

구독

관련 동영상을 놓치지 않고 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

저는 펫 르페이지입니다. Chrome 72가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.