Chrome 130의 새로운 기능

Pete LePage

자세한 내용을 살펴보겠습니다.

  • 문서 PIP 모드를 사용하면 PIP 모드 창을 더 세부적으로 제어할 수 있습니다.
  • CSS 중첩 선언은 까다로운 특수한 경우를 수정합니다.
  • 여러 줄에 걸쳐 분할되는 요소의 장식 동작을 지정할 수 있습니다.
  • 이 외에도 다양한 기능이 있습니다.

저는 Pete LePage입니다. Chrome 130에서 개발자를 위해 새로 도입된 기능을 자세히 살펴보겠습니다.

문서 PIP 모드

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

Spotify의 PIP 모드 창

문서 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 블록이 예상대로 녹색 배경을 표시합니다. 중첩된 규칙과 함께 기본 선언을 인터리브한 경우 코드를 다시 확인해야 합니다.

자세한 설명은 Bramus의 CSS 중첩이 CSSNestedDeclarations로 개선됨 도움말을 참고하세요.

box-decoration-break

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

줄바꿈 없음

예를 들어 모든 항목이 한 줄에 있으면 이 요소가 보기 좋습니다.

슬라이스를 사용한 줄바꿈

콘텐츠가 여러 줄로 분할되면 배경, 박스 섀도우, 테두리 등의 장식이 잘려 다소 과격한 모양이 됩니다.

클론을 사용한 줄바꿈

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

Baseline은 아니지만 Chrome과 Firefox에서 사용할 수 있으며 Safari에서는 공급업체 접두사가 붙습니다.

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

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

그 외에도 다양한 기능 제공

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

추가 자료

여기서는 몇 가지 주요 사항만 다룹니다. Chrome 130의 추가 변경사항은 다음 링크를 참고하세요.

구독

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

저는 Pete LePage입니다. Chrome 131이 출시되면 바로 여기에서 Chrome의 새로운 기능을 알려드리겠습니다.