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에서 복잡한 애니메이션 곡선 만들기 도움말을 참고하세요.
브라우저 지원
- 113
- 113
- 112
- 17.2
CSS 색상 수준 4 기능
Firefox 113에는 color(), lab(), lch(), oklab(), oklch(), color-mix() 함수 표기법과 함께 force-color-adjust 속성이 있습니다. 즉, 새로운 색상 공간과 함수가 이제 세 가지 주요 엔진 모두에서 지원됩니다. 이러한 색상 공간 및 기능에 관한 자세한 내용은 고화질 CSS 색상 가이드를 참고하세요.
:nth-child() 선택 항목을 더욱 세밀하게 관리
Firefox 113에는 선택기 목록을 :nth-child() 및 nth-last-child()에 전달하는 기능도 추가되었습니다. 이에 관해 자세히 알아보고 S 문법을 사용하여 :nth-child() 선택 항목 제어하기 게시물의 예를 확인하세요.
브라우저 지원
- 111
- 111
- 113
- 9
압축 스트림 API
Firefox 113에 포함되면서 이제 세 가지 주요 엔진에서 모두 지원되며, 압축 스트림 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에서 사용할 수 있습니다.
팝오버 API
또한 Chrome 114에는 다른 모든 웹 앱 UI 위에 표시되는 일시적인 사용자 인터페이스 (UI) 요소를 더 쉽게 빌드할 수 있는 Popover API가 있습니다.
여기에는 작업 메뉴, 양식 요소 추천, 콘텐츠 선택 도구, 교육 UI와 같은 사용자 상호작용 요소가 포함됩니다.
새 팝오버 속성을 사용하면 모든 요소가 상단 레이어에 자동으로 표시될 수 있습니다. 따라서 개발자는 위치 지정, 요소 스택, 포커스 또는 키보드 상호작용에 대해 더 이상 걱정할 필요가 없습니다.
팝오버 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 및 자바스크립트를 통해 스크롤 기반 애니메이션을 사용할 수 있습니다.
Firefox 114에는 여러 스트림, 단방향 스트림, 비순차적 전송을 지원하는 WebSocket의 최신 업데이트인 WebTransport API가 포함되어 있습니다.