Chrome 104의 새로운 기능

Pete LePage

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

저는 피트 르페이지입니다. 자세히 살펴보고 Chrome 104의 개발자를 위한 새로운 기능을 살펴보겠습니다.

영역 캡처로 자르기 영역 지정

getDisplayMedia()를 사용하면 현재 탭에서 동영상 스트림을 만들 수 있습니다. 하지만 탭 전체가 아닌 일부만 표시하고 싶을 때도 있습니다. 지금까지는 각 동영상 프레임을 수동으로 자르는 방법밖에 없었습니다.

지역 캡처를 사용하면 웹 앱에서 공유하려는 화면의 특정 영역을 정의할 수 있습니다. 예를 들어 Google Slides에서는 표준 수정 보기에 머물면서 현재 슬라이드를 공유할 수 있습니다.

기본 콘텐츠 영역과 교차 출처 iframe이 강조 표시된 웹 앱이 포함된 브라우저 창의 스크린샷
기본 콘텐츠 영역은 파란색이고 교차 출처 iframe은 빨간색입니다.

이를 사용하려면 공유할 요소를 선택한 다음 해당 요소를 기반으로 새 CropTarget를 만듭니다. 그런 다음 getDisplayMedia()를 호출하여 화면 공유를 시작합니다. 그러면 사용자에게 화면 공유 권한을 요청하는 메시지가 표시됩니다. 그런 다음 track.cropTo()를 호출하고 앞에서 만든 cropTarget를 전달합니다.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

자세한 내용은 Region Capture를 사용한 탭 공유 개선을 참고하세요.

레벨 4 구문 및 평가로 더 쉬운 미디어 쿼리

미디어 쿼리는 반응형 디자인에 중요한 요소로, 이를 통해 다양한 표시 영역 크기에 맞는 특정 스타일을 정의할 수 있습니다. 하지만 이를 매일 사용하지 않으면 구문이 약간 혼란스러울 수 있습니다.

Chrome 104에서는 미디어 쿼리 - 4단계 - 문법 및 평가에 대한 지원을 추가하여 일반적인 수학 비교 연산자를 사용하여 미디어 쿼리를 작성할 수 있도록 합니다.

따라서 400~600픽셀의 표시 영역을 나타내는 다음과 같은 방법 대신

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

다음과 같이 작성할 수 있습니다.

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

새로운 문법은 미디어 쿼리의 표현을 줄이는 것 외에도 더 정확할 수 있습니다. min- 및 max- 쿼리는 양 끝값을 포함합니다. 예를 들어 min-width: 400px는 너비가 400px 이상인지 테스트합니다. 새로운 구문을 사용하면 원하는 의미를 더 명확하게 표현할 수 있습니다.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

이 기능은 이미 Firefox에서 지원되고 있으며, 새 문법을 이전 문법으로 다시 작성하여 브라우저 호환성을 보장하는 PostCSS 플러그인도 있습니다.

자세한 내용은 레이첼의 도움말인 Chrome 104의 범위 미디어 쿼리의 새로운 문법을 참고하세요.

공유 요소 전환의 새로운 출처 체험판 시작

플랫폼별 앱은 일반적으로 여러 뷰 간에 원활하게 전환되며, 아름답게 표시되고, 사용자를 맥락에 유지하며, 환경의 성능을 개선하는 데 도움이 됩니다. 반면 웹에서는 전체 탐색이 힘들 수 있으며 경우에 따라 빈 화면이 잠시 표시될 수 있습니다. 단일 페이지 앱의 경우 더 나을 수 있지만 전환은 여전히 어렵습니다.

Chrome 104에서 새로운 오리진 트라이얼을 시작하는 공유 요소 전환을 사용하면 전환이 교차 문서(예: 멀티페이지 앱)인지 또는 문서 내(예: 단일 페이지 앱)인지와 관계없이 원활한 전환을 제공할 수 있습니다.

다음은 단일 페이지 앱에서 전환이 작동하는 방식을 보여주는 대략적인 예입니다. navigate 함수에서 새 페이지 콘텐츠를 가져온 다음 전환이 지원되는지 확인합니다. 지원되지 않으면 전환 없이 페이지를 업데이트합니다. 그렇다면 transition()를 만들고 start()를 호출하여 DOM 변경이 완료되었음을 API에 알립니다.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

공유 요소 전환은 내부적으로 CSS 애니메이션을 사용하므로 페이드 인 효과에서 슬라이드 인 효과로 변경하거나 원하는 대로 변경할 수 있습니다.

간단히 소개해 드렸으니 제이크의 동영상 웹에 페이지 전환 적용을 확인하거나 설명을 자세히 살펴보세요.

그 외에도 다양한 기능 제공

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

  • 명시적 Expires 또는 Max-Age 속성으로 쿠키를 설정하면 이제 값이 400일 이하로 제한됩니다.
  • 멀티스크린 창 배치 API가 개선되었습니다.
  • overflow-clip-margin CSS 속성은 요소의 콘텐츠가 클립되기 전에 페인트할 수 있는 거리를 지정합니다.

추가 자료

여기에는 주요 내용 중 일부만 다룹니다. Chrome 104의 추가 변경사항은 아래 링크를 확인하세요.

구독

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

저는 Pete LePage입니다. Chrome 105가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.