Chrome 106의 새로운 기능

Pete LePage
Adriana Jara

다음 사항에 유의하시기 바랍니다.

  • 숫자 형식을 지정할 때 더 세밀하게 제어할 수 있는 새로운 Intl API가 추가되었습니다.
  • 사용자에게 중요한 콘텐츠를 쉽게 표시할 수 있는 Pop-up API 오리진 트라이얼이 있습니다.
  • 상호 운용성을 개선하기 위해 몇 가지 CSS 기능이 추가됩니다.
  • 이 외에도 다양한 기능이 준비되어 있습니다.

저는 피트 리페이지이고 아드리아나 자라입니다. 이제 Chrome 106의 개발자를 위한 새로운 기능을 살펴보겠습니다

새로운 국제 API

Intl API를 사용하면 콘텐츠를 현지화된 형식으로 표시할 수 있습니다.

다른 국제 API와 마찬가지로 이 역시 시스템에 대한 부담을 덜어주므로 모든 사용자에게 복잡한 현지화 코드를 제공하거나 유지할 필요가 없습니다.

API는 통화 기호가 이동하는 위치, 날짜와 시간의 형식을 지정하거나 목록을 컴파일하는 방법을 알고 있습니다.

Chrome 106에는 새로운 숫자 형식 기능이 다양하게 추가되었습니다.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

가격대를 표시해야 하나요? formatRange에서 지원해 드립니다.

새 numberFormat 객체를 만들고 style 및 기타 옵션과 표시할 자릿수를 제공합니다.

그런 다음 formatRange()를 호출하여 형식이 지정된 문자열을 가져옵니다.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

소수점 이하 두 자리의 정확도로 숫자를 가장 가까운 5 단위로 반올림하고 싶으신가요? 괜찮습니다.

minimumFractionDigits 및 roundingIncrement를 지정한 다음 format()를 호출합니다.

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

심지어 trailingZeroDisplay를 사용하여 후행 0을 포함하도록 브라우저에 지시할 수도 있으며, 이는 가격에 매우 유용합니다.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

자세한 내용은 MDN에 관한 국제 숫자 형식 문서를 참고하세요.

팝업 API를 사용하면 사용자 바로 앞에 정보를 배치해야 할 때 UI를 훨씬 쉽게 빌드할 수 있습니다.

popup 속성은 요소를 사이트의 상단 레이어로 자동으로 가져오고 가시성을 쉽게 전환할 수 있는 컨트롤을 제공합니다. 위치, 요소 쌓기, 포커스 또는 키보드 상호작용에 관해 더 이상 걱정할 필요가 없습니다. 무엇보다도 JavaScript가 전혀 필요하지 않습니다.

API는 다음 스니펫만 사용하여 다른 모든 콘텐츠 위에 요소를 렌더링하고 사용자 입력 및 포커스 관리를 처리합니다.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

기본적으로 사용자는 ESC 키와 같은 동작이나 다른 요소를 클릭하여 팝업을 닫을 수 있습니다.

또한 개발자는 상단 레이어의 스타일,위치, 크기를 완전히 제어할 수 있을 뿐만 아니라 기본 동작을 유연하게 수정할 수도 있습니다. CSS와 HTML만 사용합니다.

더 많은 예와 API 옵션은 Jhey의 도움말을 참고하세요.

오리진 트라이얼에 가입하여 사용자에게 시의적절한 정보를 간편하게 제공하세요. 고객님의 의견을 듣고 싶습니다.

새로운 CSS 기능

상호 운용성을 개선하고 작업을 좀 더 편리하게 만들어 주는 두 가지 새로운 CSS 기능이 있습니다.

파티에 단원이 새로 추가되었습니다. ic님이 파티에 참여합니다. ic는 ch와 유사합니다. 그러나 ic는 표어를 사용하는 언어로 작성된 텍스트에 특히 사용됩니다. 기본적으로 물을 의미하는 이 문자 [특정 지점] 의 너비 또는 높이를 기준으로 길이를 측정합니다.

텍스트 크기를 조절하도록 설계된 단위로, 너비를 제한하여 가독성을 개선할 수 있으며 텍스트 크기와 관계없이 예측 가능한 제어 기능을 제공합니다.

예를 들어 컨테이너의 max-width를 10ic으로 설정하면 컨테이너는 글꼴 크기와 관계없이 최대 10개의 전체 너비 글리프를 포함하게 된다는 것을 알게 됩니다. 다음 예를 참고하세요.

grid-template-columns 및 grid-template-rows의 보간을 위한 CSS 그리드 지원이 제공될 예정입니다. 106 버전으로 계획되어 있지만 지연되어 Chrome 107에서 출시될 예정입니다. Chrome 베타에서 계속 사용해 볼 수 있습니다. 다음은 Bramus의 코드입니다.

그 외에도 다양한 기능 제공

물론 더 많은 기능이 있습니다.

  • 사용자 에이전트 축소 계획의 5단계를 시작합니다.
  • HTTP2 푸시 및 영구 할당량 유형에 대한 지원이 중단됩니다.
  • 이제 CSS 속성 hyphenate-character를 접두사 없이 사용할 수 있습니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. 아래 링크에서 Chrome 106의 추가 변경사항을 확인하세요.

구독

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

저는 아드리아나 자라입니다. Chrome 107이 출시되는 대로 Chrome의 새로운 기능을 소개해 드리겠습니다.