Chrome 111의 새로운 기능

Adriana Jara

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

• View Transitions API를 사용하여 단일 페이지 앱에서 세련된 전환을 만드세요.
• CSS 색상 수준 4를 지원하여 색상을 한 단계 업그레이드합니다.
• 스타일 패널에서 새로운 도구를 찾아 새로운 색상 기능을 최대한 활용하세요.
• 그 밖에도 다양한 기능이 있습니다.

저는 아드리아나 자라입니다. Chrome 111의 개발자용 새로운 기능을 자세히 살펴보겠습니다.

View Transitions API를 참고하세요.

웹에서 원활한 전환을 만드는 것은 복잡한 작업입니다. View Transitions API를 사용하면 뷰를 스냅샷으로 생성하고 상태 간에 겹치지 않고 DOM이 변경되도록 하여 매끄러운 전환을 더 간단하게 생성할 수 있습니다.

기본 뷰 전환은 크로스 페이드이며 다음 스니펫은 이 환경을 구현합니다.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

.startViewTransition()가 호출되면 API는 페이지의 현재 상태를 캡처합니다.

완료되면 .startViewTransition()에 전달된 callback가 호출됩니다. 여기에서 DOM이 변경됩니다. 그런 다음 API는 페이지의 새 상태를 캡처합니다.

이 API는 싱글페이지 앱 (SPA)용으로 출시되었지만 다른 모델에 대한 지원도 구현되고 있습니다.

이 API에는 많은 세부정보가 있습니다. 샘플 및 세부정보가 포함된 도움말에서 자세히 알아보거나 MDN의 뷰 전환 문서를 살펴보세요.

CSS 색상 레벨 4

이제 CSS 색상 수준 4를 통해 CSS가 고화질 디스플레이를 지원하여 HD 색상 영역의 색상을 지정하는 동시에 특수화된 색상 공간을 제공합니다.

간단히 말해 선택할 수 있는 색상이 50% 더 늘어난 것입니다. 여러분은 1,600만 가지의 색상이 정말 많이 들린다고 생각하셨죠. 저도 그렇게 생각했어요.

구현에는 color() 함수가 포함되어 있습니다. 이 함수는 R, G, B 채널로 색상을 지정하는 모든 색상 공간에 사용할 수 있습니다. color()는 먼저 색상 공간 매개변수를 가져온 다음 RGB 및 선택적으로 일부 알파를 위한 일련의 채널 값을 사용합니다.

다음은 다양한 색상 공간에서 색상 함수를 사용하는 몇 가지 예입니다.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

CSS를 사용하여 고화질 색상을 최대한 활용하는 방법에 관한 자세한 내용은 이 도움말을 참고하세요.

새로운 색상 devtools

Devtools에 CSS 색상 수준 4 사양을 지원하는 새로운 기능이 있습니다.

이제 스타일 창에서 사양에 설명된 12개의 새로운 색상 공간과 7개의 새로운 색상 영역을 지원합니다. 다음은 color(), lch(), oklab(), color-mix()를 사용한 CSS 색상 정의의 예입니다.

한 색상의 비율을 다른 색상에 혼합할 수 있는 color-mix()를 사용하면 계산됨 창에서 최종 색상 출력을 확인할 수 있습니다.

또한 색상 선택 도구는 더 많은 기능을 갖춘 모든 새로운 색상 공간을 지원합니다. 예를 들어 color(display-p3 1 0 1)의 색상 견본을 클릭합니다. 선택한 색상의 색상 영역을 더 명확하게 이해할 수 있도록 sRGB와 디스플레이 P3 색상 영역을 구분하는 색상 영역 경계선도 추가되었습니다.

색상 선택 도구는 색상 형식 간의 색상 변환도 지원합니다.

devtools의 색상 디버깅 및 기타 새로운 기능에 관한 자세한 내용은 이 게시물을 참고하세요.

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

• CSS에 삼각함수, 추가 루트 글꼴 단위가 추가되었으며 n번째 자식 확장 가상 선택자가 추가되었습니다.
• Document Picture in Picture API는 오리진 트라이얼입니다.
• 이제 previousslide 및 nextslide 작업이 Media Session API의 일부입니다. 여기에서 데모를 확인하세요.

추가 자료

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

• Chrome DevTools의 새로운 기능 (111)
• Chrome 111 지원 중단 및 삭제
• Chrome 111의 ChromeStatus.com 업데이트
• Chromium 소스 저장소 변경사항 목록
• Chrome 출시 일정

구독

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

저는 아드리아나 자라입니다. Chrome 112가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.