5월 웹 플랫폼 신규 부문

2023년 5월에 안정화 버전 및 베타 웹브라우저에 도입된 몇 가지 흥미로운 기능을 살펴보세요.

2023년 5월에 Firefox 113, Chrome 113, Chrome 114, Safari 16.5가 안정화되었습니다. 이것이 웹 플랫폼에 어떤 의미가 있는지 살펴보겠습니다.

Chrome 113에는 웹용 WebGL 및 WebGL 2 그래픽 API의 후속 버전인 WebGPU가 포함되어 있습니다. GPU 컴퓨팅, GPU 하드웨어에 대한 더 낮은 오버헤드 액세스, 단일 그래픽 기기에서 여러 캔버스로 렌더링하는 기능, 더 나은 예측 가능한 성능과 같은 최신 기능을 제공합니다.

브라우저 지원

  • Chrome: 113.
  • Edge: 113.
  • Firefox 기술 미리보기: 지원됨
  • Safari Technology Preview: 지원됨

소스

퍼스트 파티 세트

퍼스트 파티 세트(FPS)개인 정보 보호 샌드박스의 일부입니다. 이는 조직이 사이트 간 관계를 선언할 수 있는 방법으로, 이를 통해 브라우저가 집합 내 사이트에 대해 제한된 서드 파티 쿠키 액세스를 언제 허용할 것인지 결정할 수 있습니다. FPS는 Chrome 113에서 단계적 출시를 시작했습니다.

CSS 미디어 기능 등

CSS의 경우 Chrome 113에는 overflow-inlineoverflow-block 미디어 기능이 포함되어 있습니다.

브라우저 지원

  • Chrome: 113.
  • Edge: 113
  • Firefox: 66.
  • Safari: 17.

소스

update 미디어 기능

브라우저 지원

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17

소스

linear() 이징 함수도 포함되어 있습니다. 자세한 내용은 linear() 이징 함수를 사용하여 CSS에서 복잡한 애니메이션 곡선 만들기 도움말을 참고하세요.

브라우저 지원

  • Chrome: 113.
  • Edge: 113
  • Firefox: 112.
  • Safari: 17.2.

CSS 색상 수준 4 기능

Firefox 113에는 forced-color-adjust 속성과 함께 color(), lab(), lch(), oklab(), oklch(), color-mix() 함수 표기법이 포함되어 있습니다. 즉, 이제 세 가지 주요 엔진에서 모두 새로운 색상 공간과 함수가 지원됩니다. 이러한 색상 공간과 함수에 관한 자세한 내용은 고해상도 CSS 색상 가이드를 참고하세요.

브라우저 지원

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

소스

:nth-child() 선택사항에 대한 추가 제어

또한 Firefox 113에서는 선택기 목록을 :nth-child()nth-last-child()에 전달하는 기능을 추가했습니다. 이에 대해 자세히 알아보고 S 문법으로 :nth-child() 선택에 대한 제어 기능 강화 게시물에서 예를 참고하세요.

브라우저 지원

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113
  • Safari: 9

Compressions Streams API

이제 Firefox 113에 포함되어 세 가지 주요 엔진 모두에서 지원되는 Compressions Streams API를 사용하면 스트림을 압축 및 압축 해제할 수 있습니다. 즉, JavaScript 애플리케이션은 더 이상 압축 라이브러리를 번들로 묶을 필요가 없습니다.

브라우저 지원

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

소스

CSS 중첩

Safari 16.5에서는 대부분의 문제가 해결되었지만 전처리기를 사용한 개발자에게 익숙한 방식으로 관련 스타일 규칙을 중첩하는 데 사용되는 새로운 중첩 선택자 >를 사용하여 CSS 중첩을 지원합니다.

.nesting {
 
color: hotpink;

 
> .is {
   
color: rebeccapurple;

   
> .awesome {
     
color: deeppink;
   
}
 
}
}

브라우저 지원

  • Chrome: 120
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

소스

text-wrap: balance를 사용하여 헤드라인 균형 맞추기

Chrome 114부터 text-wrap: balance를 사용할 수 있습니다. 이렇게 하면 광고 제목의 균형을 맞출 수 있고 마지막 줄에 단어가 하나만 표시되는 문제를 방지하여 더 보기 좋고 읽기 쉬운 결과를 얻을 수 있습니다. 자세한 내용은 CSS text-wrap: balance를 참고하세요.

브라우저 지원

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4

소스

CHIPS: 독립적으로 파티션된 상태의 쿠키

서드 파티 쿠키 지원 중단 작업의 일환으로 CHIPS를 사용하면 새로운 쿠키 속성 Partitioned를 사용하여 최상위 사이트별로 파티셔닝된 서드 파티 쿠키를 선택할 수 있습니다. CHIPS는 Chrome 114에서 사용할 수 있습니다.

Popover API

Chrome 114에는 다른 모든 웹 앱 UI 위에 표시되는 일시적인 사용자 인터페이스(UI) 요소를 더 쉽게 빌드할 수 있는 Popover API도 있습니다.

여기에는 작업 메뉴, 양식 요소 추천, 콘텐츠 선택 도구, 교육 UI와 같은 사용자 상호작용 요소가 포함됩니다.

새 팝오버 속성을 사용하면 모든 요소를 최상위 레이어에 자동으로 표시할 수 있습니다. 즉, 개발자는 더 이상 요소의 위치 지정, 스택, 포커스 또는 키보드 상호작용에 관해 걱정할 필요가 없습니다.

Popover API 소개에서 자세히 알아보세요.

브라우저 지원

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 120.
  • Safari: 17.

소스

베타 브라우저 출시

베타 브라우저 버전은 브라우저의 다음 안정화 버전에 적용될 내용을 미리 보여줍니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능 또는 삭제를 테스트하기에 좋은 시기입니다. 새로운 베타는 Firefox 114, Chrome 115, Safari 16.6입니다. 이번 출시에서는 플랫폼에 여러 가지 멋진 기능이 추가되었습니다. 자세한 내용은 출시 노트에서 몇 가지 주요 사항을 확인하세요.

Chrome 115에는 CSS display 속성에 여러 값이 포함되어 있습니다. 즉, display: flexdisplay: block flex가 되고 display: blockdisplay: block flow가 됩니다. 단일 값은 기존 키워드로 유지되며, Chrome 안정화 버전에서 한 번 이 값을 사용하면 모든 엔진에서 여러 값을 사용할 수 있습니다.

또한 Chrome 115에는 웹 애니메이션 사양에 관한 ScrollTimelineViewTimeline 확장 프로그램이 있습니다. 이를 통해 CSS 및 JavaScript를 통해 스크롤 기반 애니메이션을 사용할 수 있습니다.

Firefox 114에는 WebSockets의 최신 업데이트인 WebTransport API가 포함되어 있습니다. 이 API는 다중 스트림, 단방향 스트림, 순서가 지정되지 않은 전송을 지원합니다.

웹 시리즈 초보자용의 일부