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 기술 미리보기: 지원됨

소스

퍼스트 파티 세트

퍼스트 파티 세트 (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()에 전달하는 기능도 추가되었습니다. 이 내용에 대해 자세히 알아보고 of 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는 다중 스트림, 단방향 스트림, 순서가 지정되지 않은 전송을 지원합니다.

웹 시리즈 초보자용의 일부