2025년 1분기 Chrome의 새로운 기능: CSS 텍스트 상자, Android용 파일 시스템 액세스, 기준 업데이트 등

Mariko Kosaka
X

오랜만입니다. Chrome의 새로운 기능 동영상이 다음과 같은 정보로 돌아왔습니다.

저는 마리코입니다. 지난 3번의 Chrome 출시에서 어떤 새로운 기능이 있었는지 자세히 알아보겠습니다.

CSS text-box

CSS text-box 속성을 사용하면 글꼴 측정값을 사용하여 세로 간격을 정확하게 제어할 수 있습니다.

모든 글꼴은 문자 위와 아래에 서로 다른 크기의 공백을 생성하며, 이 공백에 따라 요소의 크기가 결정됩니다.

지금까지는 이러한 스페이스의 크기를 제어할 수 없었습니다.

제목 위에 가위로 잘라 삭제한 것처럼 여유 공간이 표시됩니다.

새 text-box-trim 속성은 위 또는 아래에서 자르는 측면을 지정하고 text-box-edge 속성은 자르는 방법을 지정합니다. 예를 들어 대문자 맨 위인 대문자 높이에서 자릅니다.

약어 text-box 속성을 사용하여 작성할 수도 있습니다.

CSS text-box-trim 도움말에서 이러한 새 속성을 사용하는 방법을 자세히 알아보세요.

File System Access API

Chrome 133에 추가된 DOM 원시 Node.prototype.moveBefore를 사용하면 요소의 상태를 재설정하지 않고도 DOM 트리에서 요소를 이동할 수 있습니다.

DOM 요소를 이동하기 위해 요소를 삭제한 다음 다시 삽입하면 해당 요소의 상태가 재설정됩니다. 이 새로운 프리미티브를 사용하면 노드의 상태가 보존됩니다.

따라서 iframe은 계속 로드되고, 활성 요소는 포커스를 유지하며, 팝오버 및 대화상자와 같은 항목은 계속 열려 있고, CSS 전환 또는 애니메이션은 계속 진행됩니다.

DOM 요소를 이동하는 상태 보존 방법

File System Access API는 한동안 Chrome 데스크톱에서 사용할 수 있었습니다. 이 API를 사용하면 웹 앱이 사용자의 로컬 파일 시스템에 있는 파일과 상호작용할 수 있습니다. Chrome 132부터 이 API는 Android 및 WebView에서도 사용할 수 있습니다.

파일을 읽으려면 showOpenFilePicker()를 호출합니다. 이 메서드는 파일 선택 도구를 표시한 다음 파일을 읽는 데 사용할 수 있는 파일 핸들을 반환합니다.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

파일을 디스크에 저장하려면 이전에 가져온 것과 동일한 파일 핸들을 사용하거나 showSaveFilePicker()를 호출하여 새 파일 핸들을 가져올 수 있습니다.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

<dialog> 요소에 밝은 닫기 표시

Popover API를 사용하여 팝오버를 만든 적이 있다면 Popover API의 좋은 기능 중 하나가 가벼운 닫기 동작이라는 것을 알고 계실 것입니다. 사용자는 배경을 클릭할 수 있으며 닫기 버튼을 특별히 누르지 않아도 팝오버 요소가 닫힙니다.

이제 이 조명 닫기 기능이 <dialog> 요소에서도 지원됩니다.

closedby 속성을 any로 설정하면 대화상자 외부를 클릭하거나 Esc 키를 눌러 대화상자를 닫을 수 있습니다.


<dialog closedby="any">...</dialog>

이는 팝오버가 자동으로 설정된 경우와 동일한 동작입니다.

기준 업데이트

기준에 관한 뉴스입니다.

기준 새로 사용 가능

첫 번째는 기준점입니다. 최근에 새로 제공된 이 기능은 최근에 4대 주요 브라우저 모두에 제공된 기능입니다.

scrollbar-gutter 및 scrollbar-width

scrollbar-gutter CSS 속성을 사용하면 스크롤바가 표시되거나 사라질 때 원치 않는 레이아웃 변경을 방지하기 위해 스크롤바 공간을 예약할 수 있습니다. scrollbar-width를 사용하면 더 좁은 스크롤바를 만들거나 스크롤 가능성에 영향을 주지 않고 스크롤바를 완전히 숨길 수도 있습니다.

ruby-align

ruby-align CSS 속성을 사용하면 루비 기본 텍스트와 루비 주석 텍스트의 정렬을 지정할 수 있습니다.

Promise.try

Promise.try는 동기식 요청의 오류 처리를 실행하는 편의 메서드입니다. 이를 사용하면 Promise.resolve로 요청하려고 할 때 콜백 함수를 제거할 수 있습니다.

Wasm 가비지 컬렉션 및 꼬리 호출 최적화

이제 WebAssembly에서 가비지 컬렉션 및 테일 콜 최적화를 지원합니다.

기준 광범위하게 제공됨

배열 findLast() 및 findLastIndex()

배열 findLast() 및 findLastIndex()는 배열의 끝에서 항목을 가져오는 데 매우 편리한 메서드입니다. 이 기능은 30개월 동안 모든 주요 브라우저에서 지원되었으므로 이제는 광범위하게 사용할 수 있는 기준이 되었습니다.

개별 변환 속성

CSS 변환을 더 세부적으로 제어할 수 있는 개별 변환 속성도 이제 기준에 따라 광범위하게 사용할 수 있습니다 .

기준에 대한 자세한 내용

기준점 및 '신규'와 '전체 공개'의 차이점에 대해 자세히 알아보려면 제가 만든 짧은 동영상을 확인하세요.

웹 플랫폼 상태 대시보드에서 기능의 기준 상태에 관해 자세히 알아볼 수도 있습니다.

2025년 상호 운용성 프로젝트가 다시 시작됩니다

마지막으로 상호 운용성 프로젝트는 2025년에 뷰 전환, CSS 앵커 배치, Navigation API를 비롯한 주요 영역 목록을 가지고 돌아옵니다. 프로젝트 공지사항을 확인하세요.

구독

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

저는 마리코 코사카입니다. 3개월 후에 Chrome의 새로운 기능에 대해 자세히 알려드리겠습니다.