Chrome 130의 새로운 기능

Pete LePage

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

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

문서 PIP 모드

PIP API는 브라우저 탭에서 동영상을 팝아웃하여 다른 사이트 또는 애플리케이션과 상호작용하는 동안 동영상을 계속 볼 수 있도록 하는 데 유용합니다. 하지만 동영상만 지원합니다.

Spotify의 PIP 모드 창

Document PIP 모드 API를 사용하면 이러한 제한이 없어 콘텐츠를 제어할 수 있는 PIP 창을 만들 수 있습니다. 맞춤 동영상 플레이어, 화상 회의, 생산성 앱과 같은 작업에 적합합니다. Spotify 웹 플레이어에서 이 기능을 사용한 방식이 마음에 듭니다. 현재 재생 중인 노래의 아트워크와 재생 컨트롤이 포함된 창이 표시되며 노래를 즐겨찾기에 쉽게 추가할 수 있습니다.

이 기능을 사용하려면 새 문서의 PIP 모드 창을 요청하세요. 반환된 promise는 PIP 창 JavaScript 객체로 확인됩니다. 그런 다음 이를 사용하여 창에 콘텐츠를 추가합니다.

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

새로운 preferInitialWindowPlacement 속성을 사용하면 이전 창의 위치나 크기를 재사용하는 대신 항상 PIP 모드 창을 기본 위치와 크기로 열도록 Chrome에 알릴 수 있습니다.

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

자세한 내용은 프랑소와의 게시물인 모든 요소의 PIP 모드를 참고하세요.

CSS 중첩 선언

CSS 중첩을 사용하면 다른 규칙 내부에 규칙을 중첩하여 선택기를 더 짧게 하고 읽기도 쉬우며 모듈성을 높일 수 있습니다. CSS 중첩은 기준점 새로 사용 가능이며 거의 1년 동안 사용할 수 있었습니다.

예상대로 작동하지 않는 몇 가지 특이 사례가 있었습니다. 예를 들어 다음 CSS 블록에서는 배경 색상이 녹색이 나오기 때문에 초록색일 것으로 예상하지만 빨간색입니다.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

이 같은 극단적인 사례를 해결하기 위해 CSS 작업 그룹에 Chrome 130에서 구현되는 중첩 선언 규칙이 도입되었습니다. 이제 동일한 CSS 블록을 사용해도 예상대로 녹색 배경이 표시됩니다. 중첩된 규칙과 함께 맨손 선언을 번갈아 사용했다면 코드를 다시 확인해야 합니다.

자세한 설명은 브라무스의 CSSNestedDeclarations로 CSS 중첩 개선 도움말을 참고하세요.

box-decoration-break

box-decoration-break CSS 속성을 사용하면 여러 줄, 열 또는 페이지에 걸쳐서 요소의 프래그먼트를 렌더링하는 방법을 지정할 수 있습니다.

줄바꿈 없음

예를 들어 이 요소는 모든 내용이 한 줄에 표시될 때 잘 보입니다.

슬라이스가 있는 줄바꿈

콘텐츠가 여러 줄로 분할되면 배경, 박스 그림자, 테두리와 같은 장식이 슬라이스되어 상당히 극적인 모양이 됩니다.

클론을 사용한 줄바꿈

box-decoration-break: clone를 추가하면 각 프래그먼트가 독립적으로 렌더링되어 훨씬 보기 좋습니다.

기준이 되는 것은 아니지만 Chrome과 Firefox에서 사용할 수 있으며 Safari에서는 공급업체가 프리픽스로 사용합니다.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

자세한 내용은 MDN의 box-decoration-break 문서와 레이첼의 Chrome 130의box-decoration-break 속성 게시물을 참고하세요.

그 외에도 다양한 기능 제공

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

추가 자료

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

구독

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

저는 펫 르페이지입니다. Chrome 131이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.