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

Chrome 111의 새로운 기능

Adriana Jara

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

View Transitions API를 사용하여 단일 페이지 앱에서 세련된 전환을 만듭니다.
CSS 색상 수준 4 지원을 통해 색상을 한 단계 업그레이드하세요.
새로운 색상 기능을 최대한 활용할 수 있는 스타일 패널의 새로운 도구를 살펴보세요.
이 외에도 다양한 기능이 제공됩니다.

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

Transitions API를 확인합니다.

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

View Transition API로 생성된 전환입니다. 데모 사이트 사용해 보기: Chrome 111 이상이 필요합니다.

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

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에는 CSS 색상 수준 4 사양을 지원하는 새로운 기능이 있습니다.

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

CSS 색상 정의의 예

한 색상의 비율을 다른 색상에 혼합할 수 있는 color-mix()를 사용하는 경우 Computed 창에서 최종 색상 출력을 볼 수 있습니다. color-mix 결과에 나타납니다.

또한 색상 선택 도구는 새로운 색상 공간을 모두 지원하여 더 많은 기능을 제공합니다. 예를 들어 색상(display-p3 1 0 1)의 색상 견본을 클릭합니다. 선택한 색 영역을 더 명확하게 파악할 수 있도록 sRGB와 display-p3 영역을 구분하는 색 영역 경계선도 추가되었습니다. 색 영역 경계선입니다.

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

색상 형식 간 색상 변환

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

그 외에도 다양한 기능 제공

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

CSS에서 삼각 함수와 루트 글꼴 단위를 추가하고 n번째 하위 요소 유사 선택기를 확장했습니다.
Document Picture in Picture API는 오리진 트라이얼 버전입니다.
previousslide 및 nextslide 작업이 이제 Media Session API에 포함됩니다. 여기에서 데모를 확인하세요.

추가 자료

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

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

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