3월에 웹 플랫폼을 처음 사용함

2024년 3월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.

Rachel Andrew

안정적인 브라우저 버전

2024년 3월에 Firefox 124, Safari 17.4, Chrome 123이 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

light-dark()로 색 구성표 조정

light-dark() 색상 함수가 Chrome 123에 도입되어 색 구성표를 사용자 환경설정에 더 쉽게 조정할 수 있습니다. 다음 예에서는 color-scheme이 root에서 light dark로 설정됩니다. 맞춤 속성은 light-dark() 색상 함수를 사용하여 사용자의 밝은 모드 또는 어두운 모드 환경설정에 따라 전환될 색상을 설정합니다.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

light-dark()를 사용한 CSS color-scheme 종속 색상에서 더 많은 예시와 세부정보를 확인하세요.

브라우저 지원

  • Chrome: 123
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5

소스

field-sizing로 입력 제어 개선

또한 Chrome 123에서는 field-sizing 속성을 사용하여 텍스트 입력란이 자동으로 늘어나도록 설정할 수 있습니다.

브라우저 지원

  • Chrome: 123
  • Edge: 123.
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음

소스

text-spacing-trim로 CJK 구두점 커닝

Chrome 123에서 text-spacing-trim 속성은 중국어, 일본어, 한국어(CJK) 구두점 문자에 커닝을 적용하여 과도한 공백을 조정합니다. CSS의 새로운 국제 기능 4가지 소개에서 자세히 알아보세요.

브라우저 지원

  • Chrome: 123
  • Edge: 123.
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음

소스

@scope CSS at 규칙

Safari 17.4에는 특정 DOM 하위 트리에서 요소를 선택하고 재정의하기 어려운 지나치게 구체적인 선택기를 작성하지 않고 선택기를 DOM 구조에 너무 단단히 결합하지 않고도 요소를 정확하게 타겟팅할 수 있는 @scope가 포함되어 있습니다.

CSS @scope at-rule을 사용하여 선택기 도달범위 제한에서 자세히 알아보기

브라우저 지원

  • Chrome: 118.
  • Edge: 118.
  • Firefox: 플래그 뒤에 있습니다.
  • Safari: 17.4

소스

PIP 모드 개선사항

Chrome 123에는 PIP 환경을 개선하는 두 가지 기능이 포함되어 있습니다. 첫 번째는 CSS picture-in-picture 디스플레이 모드입니다. 이렇게 하면 웹 앱(의 일부)이 PIP 모드로 표시될 때만 적용되는 특정 CSS 규칙을 작성할 수 있습니다.

두 번째 기능을 사용하면 문서 PIP 모드 창의 opener.focus를 사용하여 문서 PIP 모드 창을 소유한 탭으로 시스템 수준의 포커스를 가져올 수 있습니다.

이렇게 하면 필요한 경우 원래 탭을 포그라운드로 다시 가져올 수 있습니다. 예를 들어 사용자가 더 작은 PIP 창에 맞지 않는 UI 환경에 액세스해야 하는 경우입니다.

블록 및 표 레이아웃에서 align-content 지원

Chrome 123 및 Safari 17.4는 블록 및 테이블 레이아웃에서 align-content를 지원합니다. align-content 지원 변경사항에 대해 알아보세요.

Service Worker 정적 라우팅 API

Chrome 123부터 Service Worker Static Routing API를 사용할 수 있습니다. 이 API를 사용하면 특정 리소스 경로를 가져오는 방법을 선언적으로 지정할 수 있습니다. 즉, 브라우저는 캐시 또는 네트워크에서 직접 응답을 가져오는 것만을 위해 서비스 워커를 실행할 필요가 없습니다.

자세한 내용은 Service Worker Static Routing API를 사용하여 특정 경로의 서비스 워커 우회를 참고하세요.

긴 애니메이션 프레임 API

Chrome 123에는 느린 사용자 인터페이스(UI) 업데이트를 더 잘 이해할 수 있도록 Long Tasks API를 업데이트한 The Long Animation Frames API도 포함되어 있습니다. 이는 응답성을 측정하는 다음 페인트에 대한 상호작용(INP) 코어 웹 바이탈 측정항목에 영향을 줄 수 있는 느린 애니메이션 프레임을 식별하거나 부드러움에 영향을 미치는 다른 UI 버벅거림을 식별하는 데 유용할 수 있습니다.

브라우저 지원

  • Chrome: 123
  • Edge: 123.
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음

소스

content-visibility 속성

Firefox 124는 CSS content-visibility 속성을 지원합니다. 이 속성은 요소가 콘텐츠를 렌더링할지 여부를 제어하므로 브라우저는 콘텐츠가 필요할 때까지 콘텐츠 렌더링을 생략할 수 있습니다.

브라우저 지원

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18

소스

ArrayBuffer 및 배열 그룹화에 추가된 사항

Safari 17.4에서는 JavaScript가 detached 속성과 ArrayBuffer의 transfer() 및 transferToFixedLength() 메서드를 지원하는 몇 가지 새로운 기능을 갖게 됩니다.

브라우저 지원

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 122
  • Safari: 17.4

소스

Safari 17.4에는 배열 그룹화 메서드 Object.groupBy 및 Map.groupBy도 포함되어 있습니다. 배열 그룹화에 관한 자세한 내용은 JavaScript에 배열 그룹화 메서드가 도입됨을 참고하세요.

브라우저 지원

  • Chrome: 117
  • Edge: 117.
  • Firefox: 119.
  • Safari: 17.4

소스

이제 이러한 기능은 상호 운용 가능하므로 '새로 제공되는 기준점'에 포함됩니다.

setHTMLUnsafe 및 parseHTMLUnsafe

Safari 17.4에서 제공되는 setHTMLUnsafe 및 parseHTMLUnsafe 메서드를 통해 JavaScript에서 선언적 Shadow DOM을 사용할 수 있습니다. 또한 이러한 메서드는 innerHTML 또는 DOMParser에 비해 HTML을 DOM으로 명령형으로 파싱하는 더 쉬운 방법을 제공합니다.

베타 브라우저 출시

베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능이나 삭제를 테스트해 보세요. 새로운 베타는 Firefox 125 및 Chrome 124입니다. 이번 출시에서는 플랫폼에 여러 가지 멋진 기능이 추가되었습니다. 자세한 내용은 출시 노트를 참고하세요. 몇 가지 주요 사항은 다음과 같습니다.

Firefox 125는 흥미로운 버전이 될 것으로 기대됩니다. 블록에 align-content가 포함되어 있어 이 기능을 상호 운용할 수 있습니다. 또한 새로 사용 가능한 기준의 일부가 되어 이 팝오버 API도 포함됩니다. transition-behavior 속성도 지원됩니다. 팝오버와 transition-behavior는 Interop 2024의 일부입니다.

Chrome 124에는 선언적 Shadow DOM을 JavaScript에서 사용할 수 있도록 하는 setHTMLUnsafe 및 parseHTMLUnsafe 메서드가 포함되어 있어 이러한 기능을 상호 운용할 수 있습니다. WebSocketStream API 및 writingsuggestions 속성도 포함되어 있습니다.