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가 포함되어 있으며, 새로운 기준 기능을 사용할 수 있게 되었습니다.