2023년 5월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.
안정적인 브라우저 출시
2023년 5월에 Firefox 113, Chrome 113, Chrome 114, Safari 16.5가 안정화되었습니다. 웹 플랫폼에 어떤 의미가 있는지 살펴보겠습니다.
WebGPU
Chrome 113에는 웹용 WebGL 및 WebGL 2 그래픽 API의 후속인 WebGPU가 포함되어 있습니다. GPU 컴퓨팅, GPU 하드웨어에 대한 더 낮은 오버헤드 액세스, 단일 그래픽 기기에서 여러 캔버스로 렌더링하는 기능, 더 나은 예측 가능한 성능과 같은 최신 기능을 제공합니다.
퍼스트 파티 세트
퍼스트 파티 세트 (FPS)는 개인 정보 보호 샌드박스의 일부입니다. 조직이 사이트 간의 관계를 선언하는 방식으로, 브라우저에서 세트 내 사이트에 제한된 서드 파티 쿠키 액세스를 허용할 시기를 결정할 수 있습니다. FPS는 Chrome 113에서 단계적 출시를 시작했습니다.
CSS 미디어 기능 등
CSS의 경우 Chrome 113에는 overflow-inline
및 overflow-block
미디어 기능이 포함되어 있습니다.
update
미디어 기능
linear()
이중 함수도 포함되어 있습니다. 이 함수에 대한 자세한 내용은 linear()
이중 함수로 CSS에서 복잡한 애니메이션 곡선 만들기 도움말을 참고하세요.
브라우저 지원
CSS 색상 수준 4 기능
Firefox 113에는 forced-color-adjust 속성과 함께 color()
, lab()
, lch()
, oklab()
, oklch()
, color-mix()
함수 표기법이 포함되어 있습니다. 즉, 이제 세 가지 주요 엔진에서 모두 새로운 색상 공간과 함수가 지원됩니다. 이러한 색상 공간과 함수에 관한 자세한 내용은 고해상도 CSS 색상 가이드를 참고하세요.
:nth-child()
선택사항에 대한 추가 제어
Firefox 113에서는 선택기 목록을 :nth-child()
및 nth-last-child()
에 전달하는 기능도 추가되었습니다. 이 내용에 대해 자세히 알아보고 of S 구문으로 :nth-child() 선택을 더 세부적으로 제어하기 게시물에서 예시를 확인하세요.
브라우저 지원
Compressions Streams API
이제 Firefox 113에 포함되어 세 가지 주요 엔진 모두에서 지원되는 Compressions Streams API를 사용하면 스트림을 압축 및 압축 해제할 수 있습니다. 즉, JavaScript 애플리케이션은 더 이상 압축 라이브러리를 번들링할 필요가 없습니다.
CSS 중첩
Safari 16.5에서는 대부분의 문제가 해결되었지만 전처리기를 사용한 개발자에게 익숙한 방식으로 관련 스타일 규칙을 중첩하는 데 사용되는 새로운 중첩 선택자 >
를 사용하여 CSS 중첩을 지원합니다.
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
text-wrap: balance
를 사용하여 헤드라인 균형 맞추기
Chrome 114부터 text-wrap: balance
를 사용할 수 있습니다. 이렇게 하면 광고 제목의 균형을 맞출 수 있고 마지막 줄에 단어가 하나만 표시되는 문제를 방지하여 더 보기 좋고 읽기 쉬운 결과를 얻을 수 있습니다. 자세한 내용은 CSS text-wrap: balance를 참고하세요.
CHIPS: 독립적으로 파티션된 상태의 쿠키
서드 파티 쿠키 지원 중단 작업의 일환으로 CHIPS는 새로운 쿠키 속성 Partitioned
를 사용하여 최상위 사이트별로 파티션된 서드 파티 쿠키를 선택할 수 있도록 지원합니다. CHIPS는 Chrome 114에서 사용할 수 있습니다.
Popover API
Chrome 114에는 다른 모든 웹 앱 UI 위에 표시되는 일시적인 사용자 인터페이스 (UI) 요소를 더 쉽게 빌드할 수 있는 Popover API도 있습니다.
여기에는 작업 메뉴, 양식 요소 추천, 콘텐츠 선택 도구, 교육 UI와 같은 사용자 상호작용 요소가 포함됩니다.
새 팝오버 속성을 사용하면 모든 요소를 최상위 레이어에 자동으로 표시할 수 있습니다. 즉, 개발자가 더 이상 요소의 위치 지정, 스택, 포커스 또는 키보드 상호작용에 관해 걱정할 필요가 없습니다.
Popover API 소개에서 자세히 알아보세요.
베타 브라우저 출시
베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트하기에 좋은 시기입니다. 새로운 베타는 Firefox 114, Chrome 115, Safari 16.6입니다. 이번 출시에서는 플랫폼에 여러 가지 멋진 기능이 추가되었습니다. 자세한 내용은 출시 노트를 참고하세요. 다음은 몇 가지 주요 내용입니다.
Chrome 115에는 CSS display
속성에 대한 여러 값이 포함되어 있습니다. 즉, display: flex
는 display: block flex
가 되고 display: block
는 display: block flow
가 됩니다. 단일 값은 기존 키워드로 유지되며 Chrome 안정화 버전에서는 모든 엔진에서 여러 값을 사용할 수 있습니다.
Chrome 115에는 웹 애니메이션 사양의 ScrollTimeline
및 ViewTimeline
확장 프로그램도 있습니다. 이를 통해 CSS 및 JavaScript를 통해 스크롤 기반 애니메이션을 사용할 수 있습니다.
Firefox 114에는 WebSockets의 최신 업데이트인 WebTransport API가 포함되어 있습니다. 이 API는 다중 스트림, 단방향 스트림, 순서가 지정되지 않은 전송을 지원합니다.
웹 시리즈 초보자용의 일부