Chrome 104의 새로운 기능

Pete LePage

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

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

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

getDisplayMedia()를 사용하면 현재 탭에서 동영상 스트림을 만들 수 있습니다. 하지만 전체 탭이 필요 없고 일부 탭만 필요한 경우도 있습니다. 지금까지는 각 동영상 프레임을 수동으로 자르는 방법밖에 없었습니다.

Region Capture를 사용하면 웹 앱에서 공유하려는 화면의 특정 영역을 정의할 수 있습니다. 예를 들어 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);

자세한 내용은 지역 캡처로 탭 공유 개선을 참고하세요.

수준 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는 너비가 400픽셀 이상인 경우를 테스트합니다. 새로운 구문을 사용하면 무엇을 의미하고자 하는지 더 명확하게 나타낼 수 있습니다.

@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의 새로운 오리진 트라이얼을 시작하는 공유 요소 전환을 사용하면 전환이 문서 간 (예: 다중 페이지 앱)이든 문서 간 (예: 단일 페이지 앱에서)이든 관계없이 원활한 전환을 제공할 수 있습니다.

다음은 단일 페이지 앱에서 전환이 작동하는 방식의 대략적인 예입니다. 탐색 함수에서 새 페이지 콘텐츠를 가져온 다음 전환이 지원되는지 확인하고 지원되지 않는 경우 전환 없이 페이지를 업데이트합니다. 올바른 경우 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 애니메이션을 사용하므로 페이드 인 효과에서 슬라이드 인 등 원하는 대로 변경할 수 있습니다.

지금까지 대략적인 내용을 살펴봤으니 제이크의 동영상인 Bringing Page Transitions to the Web을 확인하거나 설명서를 확인해 보세요.

그 외에도 다양한 기능 제공

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

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

추가 자료

여기에서는 주요 특징 중 일부만 다루었습니다. 아래 링크에서 Chrome 104의 추가 변경사항을 확인하세요.

구독

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

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