2024년 4월에 안정화 및 베타 웹브라우저에 출시된 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2024년 4월에 Firefox 125 및 Chrome 124가 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.
Baseline에 4가지 새로운 기능 도입
Firefox 125에서는 Baseline Newly Available에 네 가지 새로운 기능이 추가되었습니다.
Popover API: Intl.Segmenter, align-content(블록 레이아웃), content-box 및 stroke-box 값(transform-box)
팝오버 API
Popover API를 사용하면 다양한 종류의 비 모달 팝업을 만들 수 있습니다. 여기에는 도움말, 메뉴, 맞춤 토스트 메시지 팝업 등이 포함됩니다. 팝오버에는 이전에 JavaScript를 작성해야 했던 기본 제공 기능이 많이 포함되어 있습니다. 자세한 내용은 기준의 팝오버 API 표시를 참고하세요.
Intl.Segmenter
Intl.Segmenter는 지역에 민감한 텍스트 세분화를 사용 설정합니다. 예를 들어 단어를 공백으로 구분하지 않는 언어로 단어를 분할할 수 있습니다. 자세한 내용은 이제 Intl.Segmenter 객체가 Baseline의 일부입니다.
align-content: 블록 레이아웃
이제 align-content 속성이 블록 레이아웃과 관련하여 모든 주요 엔진에서 지원됩니다. 즉, 상위 요소에 플렉스 레이아웃 또는 그리드 레이아웃을 만들지 않고도 차단 방향 정렬을 실행할 수 있습니다. 블록 레이아웃의 align-content 속성이 이제 기준의 일부가 됨 의 예를 참고하세요.
브라우저 지원
- 123
- 123
- 125
- 17.4
CSS transform-box
마지막으로 Firefox 125에서는 transform-box 속성의 content-box 및 stroke-box 값입니다.
content-box 값은 콘텐츠 상자를 사용하고 stroke-box는 SVG의 도형이 포함된 획 경계 상자를 사용합니다.
브라우저 지원
- 118
- 118
- 125
- 13.1
WebSocketStream API
WebSocketStream API는 WhatWG 스트림을 WebSocket API와 통합하며 Chrome 124에서 사용할 수 있습니다. WebSocketStream: WebSocket API와 스트림 통합에서 자세히 알아보세요.
브라우저 지원
- 124
- 124
- x
- x
setHTMLUnsafe 및 parseHTMLUnsafe
Chrome 124에는 setHTMLUnsafe 및 parseHTMLUnsafe 메서드도 포함되어 있어 JavaScript에서 선언적 Shadow DOM을 사용할 수 있습니다. 이러한 메서드는 innerHTML나 DOMParser에 비해 HTML을 DOM으로 명령적으로 파싱하는 쉬운 방법도 제공합니다.
브라우저 지원
- 124
- 124
- 123
- 17.4
베타 브라우저 출시
베타 브라우저 버전을 사용하면 브라우저의 다음 안정화 버전에서 출시될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제를 테스트하는 좋은 기회입니다. 새로운 베타는 Firefox 126, Safari 17.5, Chrome 125입니다. 이번 출시로 플랫폼에 다양한 뛰어난 기능이 제공됩니다. 모든 세부정보는 출시 노트를 확인하세요. 몇 가지 주요 특징은 다음과 같습니다.
Safari 17.5에는 light-dark() 색상 함수가 포함되어 있으며 17.5가 안정화되면 이 함수는 새로 사용 가능한 기준 기능이 됩니다.
또한 CSS Stepped 값 함수가 기준선에 새로 도입될 예정입니다.
Chrome 125에는 round(), mod(), rem()가 포함됩니다.
Chrome 125에는 Compute Pressure API 및 CSS 앵커 위치도 포함됩니다.
Firefox 126에는 Screen Wake Lock API가 포함되어 있으며, 새로운 기준 기능을 사용할 수 있게 되었습니다.