이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 106의 새로운 기능

Pete LePage

Adriana Jara

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

숫자 형식을 지정할 때 더 세부적으로 제어할 수 있는 새로운 Intl API가 있습니다.
중요한 콘텐츠를 사용자에게 쉽게 표시할 수 있는 Pop-up API의 오리진 체험판이 있습니다.
상호 운용성을 개선하기 위해 몇 가지 CSS 기능이 추가됩니다.
그 밖에도 다양한 기능이 있습니다.

저는 피트 르페이지이고, 저는 아드리아나 자라입니다. Chrome 106의 개발자용 새로운 기능을 자세히 살펴보겠습니다.

새로운 Intl API

Intl API는 현지화된 형식으로 콘텐츠를 표시하는 데 도움이 됩니다.

다른 Intl 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"

소수점 이하 2자리의 정확도로 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의 국제 숫자 형식 문서를 참조하세요.

Pop-Up 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 옵션은 제이의 도움말을 확인하세요.

출처 무료 체험판에 가입하여 사용자에게 시의적절한 정보를 쉽게 제공하세요. 여러분의 의견을 보내주세요.

새로운 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의 새로운 기능을 바로 알려드리겠습니다.

Chrome 106의 새로운 기능

새로운 Intl API

팝업 API

새로운 CSS 기능

그 외에도 다양한 기능 제공

추가 자료

구독