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()
에 전달하는 기능을 추가했습니다. 이에 대해 자세히 알아보고 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는 다중 스트림, 단방향 스트림, 순서가 지정되지 않은 전송을 지원합니다.
웹 시리즈 초보자용의 일부