Chrome 116의 새로운 기능

Adriana Jara

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

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

Document Picture-in-Picture API

Document Picture-in-Picture API를 사용하면 임의의 HTML 콘텐츠로 채울 수 있는 상시 표시 창을 열 수 있습니다.

Sintel 트레일러 동영상을 재생하는 PIP 모드 창
Document Picture-in-Picture API로 만든 PIP 창 (데모).

Document Picture-in-Picture API의 PIP 모드 창은 window.open()를 사용하여 열리는 빈 동일 출처 창과 유사하지만 몇 가지 차이점이 있습니다.

  • PIP 모드 창이 다른 창 위에 떠 있습니다.
  • PIP 모드 창은 열리는 창보다 오래 지속되지 않습니다.
  • PIP 모드 창을 탐색할 수 없습니다.
  • 웹사이트에서 PIP 모드 창 위치를 설정할 수 없습니다.

다음 HTML은 맞춤 동영상 플레이어와 버튼 요소를 설정하여 PIP 모드 창에서 동영상 플레이어를 엽니다.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

다음 JavaScript는 사용자가 버튼을 클릭하여 빈 PIP 창을 열 때 documentPictureInPicture.requestWindow()를 호출합니다. 반환된 프로미스는 PIP 창 JavaScript 객체로 확인됩니다. 동영상 플레이어는 append()를 사용하여 해당 창으로 이동합니다.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

자세한 내용과 예는 모든 요소의 PIP 모드를 확인하세요.

DevTools의 스타일시트 디버깅 개선사항이 누락되었습니다.

누락된 스타일시트 문제를 식별하고 디버그하기 위한 여러 개선사항이 DevTools에 적용되었습니다.

첫째, 혼란을 최소화하기 위해 소스 > 페이지 트리에는 이제 성공적으로 배포되고 로드된 스타일시트만 표시됩니다.

또한 소스 > 편집기에서 이제 실패, @import,url(), href 문 옆에 밑줄이 표시되고 인라인 오류 도움말이 표시됩니다.

소스 패널에서 도움말이 있는 밑줄이 그어진 문

  • 이제 Console에서 실패한 요청 링크 외에도 로드되지 않은 스타일시트를 참조하는 정확한 줄에 대한 링크도 제공합니다.

콘솔은 문제가 있는 문이 있는 정확한 줄에 대한 링크를 제공합니다.

네트워크 패널은 Initiator 열에 로드되지 않은 스타일시트를 참조하는 정확한 줄에 대한 링크를 일관되게 채웁니다.

문제 패널에는 잘못된 URL, 실패한 요청, 잘못 배치된 @import 문을 비롯한 모든 스타일시트 로드 문제가 표시됩니다.

소스 및 요청 링크가 있는 문제 패널

Chrome 116의 DevTools에 관한 모든 세부정보와 자세한 내용은 DevTools의 새로운 기능을 참고하세요.

그 외에도 다양한 기능 제공

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

  • 모션 경로를 사용하면 작성자가 그래픽 객체를 배치하고 개발자가 지정한 경로를 따라 애니메이션을 적용할 수 있습니다.
  • 이제 display 및 content-visibility 속성이 키프레임 애니메이션에서 지원되므로 CSS로만 종료 애니메이션을 추가할 수 있습니다.
  • 이제 fetch API를 Bring Your Own Buffer 리더와 함께 사용할 수 있으므로 가비지 컬렉션 오버헤드와 사본을 줄이고 사용자의 응답성을 개선할 수 있습니다.

추가 자료

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

구독

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

아드리아나 자라 씨, Chrome 117이 출시되면 바로 Chrome의 새로운 기능에 대해 알려드리겠습니다.