2024년 3월에 공개 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2024년 3월, Firefox 124, Safari 17.4, Chrome 123이 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.
light-dark()를 사용하여 색 구성표 조정
Chrome 123에 도입된 light-dark() 색상 함수를 사용하면 사용자 환경설정에 맞게 색 구성표를 더 쉽게 조정할 수 있습니다.
다음 예에서 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 종속 색상에서 더 많은 예와 세부정보를 확인하세요.
field-sizing로 더 효율적인 입력 제어
또한 Chrome 123에서는 field-sizing 속성을 사용하면 텍스트 입력란이 자동으로 늘어납니다.
브라우저 지원
- 123
- x
- x
- x
text-spacing-trim로 CJK 구두점에 커닝
Chrome 123에서 text-spacing-trim 속성은 중국어, 일본어, 한국어 (CJK) 구두점 문자에 커닝을 적용하여 과도한 공백을 조정합니다.
자세한 내용은 CSS의 새로운 네 가지 기능 소개를 참조하세요.
브라우저 지원
- 123
- x
- x
- x
규칙 @scope개
Safari 17.4에는 특정 DOM 하위 트리에서 요소를 선택하고, 재정의하기 어려운 지나치게 구체적인 선택기를 작성하지 않고, 선택기를 DOM 구조에 너무 긴밀하게 결합하지 않고 요소를 정확하게 타겟팅할 수 있는 @scope가 포함되어 있습니다.
CSS @scope at-rule로 선택자의 도달범위 제한에서 자세히 알아보세요.
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 지원 변경사항을 읽어보세요.
서비스 워커 정적 라우팅 API
Chrome 123부터 Service Worker Static Routing API를 사용할 수 있습니다. 이 API를 사용하면 특정 리소스 경로를 가져오는 방법을 선언적으로 명시할 수 있습니다. 즉, 브라우저가 캐시나 네트워크에서 직접 응답을 가져오기 위해서만 서비스 워커를 실행할 필요가 없습니다.
자세한 내용은 Service Worker Static Routing API를 사용하여 특정 경로에 대해 서비스 워커 우회를 참조하세요.
긴 애니메이션 프레임 API
Chrome 123에는 느린 사용자 인터페이스 (UI) 업데이트를 더 잘 이해할 수 있도록 Long Tasks API의 업데이트인 Long Animation Frames API도 포함되어 있습니다. 이는 반응성을 측정하는 다음 페인트와의 상호작용 (INP) Core Web Vitals 측정항목에 영향을 줄 수 있는 느린 애니메이션 프레임을 식별하거나 부드러움에 영향을 미치는 다른 UI 버벅거림을 식별하는 데 유용할 수 있습니다.
브라우저 지원
- 123
- x
- x
- x
content-visibility 속성
Firefox 124는 CSS content-visibility 속성을 지원합니다.
이 속성은 요소가 콘텐츠를 렌더링할지 여부를 제어하므로 브라우저가 필요할 때까지 콘텐츠 렌더링을 생략할 수 있습니다.
ArrayBuffer 및 배열 그룹화에 추가된 기능
Safari 17.4에서 JavaScript에 detached 속성과 ArrayBuffer의 transfer() 및 transferToFixedLength() 메서드를 지원하는 새로운 기능이 추가되었습니다.
Safari 17.4에는 배열 그룹화 메서드인 Object.groupBy 및 Map.groupBy도 포함됩니다. 배열 그룹화에 관한 자세한 내용은 JavaScript에 배열 그룹화 메서드 가져오기를 참조하세요.
이제 이러한 기능은 상호 운용이 가능하므로 Baseline Newly Available에 추가됩니다.
setHTMLUnsafe 및 parseHTMLUnsafe
Safari 17.4에 제공되는 setHTMLUnsafe 및 parseHTMLUnsafe 메서드를 사용하면 JavaScript에서 선언적 Shadow DOM을 사용할 수 있습니다.
이러한 메서드는 innerHTML나 DOMParser에 비해 HTML을 DOM으로 명령적으로 파싱하는 쉬운 방법도 제공합니다.
베타 브라우저 출시
베타 브라우저 버전을 사용하면 브라우저의 다음 안정화 버전에서 출시될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제를 테스트하는 좋은 기회입니다. 새로운 베타는 Firefox 125 및 Chrome 124입니다. 이번 출시로 플랫폼에 다양한 뛰어난 기능이 제공됩니다. 모든 세부정보는 출시 노트를 확인하세요. 몇 가지 주요 특징은 다음과 같습니다.
Firefox 125는 더욱 멋진 출시 버전이 될 것입니다.
블록에 align-content가 포함되어 있어 이 기능을 상호 운용할 수 있습니다.
또한 Popover API가 포함되어 있어 Baseline Newly Available의 일부가 되었습니다. transition-behavior 속성도 지원됩니다.
팝오버 및 transition-behavior는 상호 운용성 2024의 일부입니다.
Chrome 124에는 선언적 Shadow DOM을 JavaScript에서 사용할 수 있는 setHTMLUnsafe 및 parseHTMLUnsafe 메서드가 포함되어 있어 이러한 기능을 상호 운용할 수 있습니다. WebSocketStream API와 writingsuggestions 속성도 포함되어 있습니다.