10월에 도입된 새로운 웹 플랫폼

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

안정적인 브라우저 버전

2023년 10월 Firefox 119, Safari 17.1, Chrome 118, Chrome 119가 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 미치는 영향을 살펴봅니다.

Firefox 119의 JavaScript 기능

Firefox 119는 Object.groupByMap.groupBy 정적 메서드를 사용하는 JavaScript 배열 그룹화입니다.

브라우저 지원

  • 117
  • 117
  • 119
  • 17.4

소스

또한 Firefox 119에는 StringisWellFormed()toWellFormed() 메서드가 있습니다. 이는 문자열에 올바른 형식의 유니코드가 포함되어 있는지 확인하고 문자열을 올바른 형식의 유니코드로 정리하는 데 사용할 수 있습니다. 이러한 메서드는 이제 세 가지 주요 엔진 간에 상호 운용이 가능합니다.

브라우저 지원

  • 111
  • 111
  • 119
  • 16.4

소스

이제 HTML <search> 요소를 상호 운용할 수 있습니다.

Chrome 118에는 검색 또는 필터링에 사용되는 문서 또는 애플리케이션의 부분을 나타내는 새로운 HTML 요소인 <search> 요소가 포함되어 있습니다. 이 기능은 이제 세 가지 주요 엔진에서 상호 운용될 수 있습니다.

브라우저 지원

  • 118
  • 118
  • 118
  • 17

소스

select 요소 내 가로줄

두 가지 버전의 Chrome이 10월에 출시되었습니다. Chrome 119에는 HTML <select> 요소에 추가된 기능이 있습니다. 이제 옵션 사이에 가로 규칙을 추가하여 항목 사이에 구분선으로 표시할 수 있습니다. 자세한 내용은 요소 선택: 이제 가로 규칙 포함을 참고하세요.

CSS 범위 지정

Chrome 118에는 @scope 규칙이 있는 범위가 지정된 CSS가 포함되어 있습니다. 이 규칙을 사용하면 DOM의 하위 트리 내에서 요소를 선택할 수 있습니다. 자세한 내용은 CSS @scope at-rule을 사용하여 선택기 도달범위 제한을 참조하세요.

브라우저 지원

  • 118
  • 118
  • x
  • 17.4

소스

CSS 우선 감소-투명도

Chrome 118에는 prefers-reduced-transparency 미디어 기능이 포함되어 있습니다. 이는 사용자가 기기에 설정한 환경설정을 확인하고 코드에서 사용자의 요구사항에 맞게 응답할 수 있는 일련의 기능 중 하나입니다. CSS 선호도-감소-투명도 이 기능에 대해 자세히 알아보세요.

브라우저 지원

  • 118
  • 118
  • x

소스

CSS 상대 색상 문법

Chrome 119는 CSS 색상 5의 강력한 새 기능인 상대 색상 문법입니다. 이렇게 하면 필요한 색상 공간이나 구문을 사용하여 다른 색상에서 색상을 가져올 수 있습니다.

WebAssembly 가비지 컬렉션 (WasmGC)

Chrome 119에는 WebAssembly에서 Kotlin, PHP, Java와 같이 가비지로 수집된 언어로 더 빠르게 작업할 수 있도록 WasmGC가 포함되어 있습니다. 자세한 내용은 이제 Chrome에서 기본적으로 사용 설정되는 WasmGC (WebAssembly Garbage Collection)를 확인하세요.

베타 브라우저 출시

베타 브라우저 버전에서는 다음 안정화 버전의 브라우저에 포함될 내용을 미리 볼 수 있습니다. 이 버전이 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제 기능을 테스트할 수 있는 좋은 시기입니다. 새로운 베타 버전은 Firefox 120Safari 17.2입니다. 이러한 릴리스는 플랫폼에 많은 훌륭한 기능을 제공합니다. 자세한 내용은 출시 노트를 확인하세요. 몇 가지 주요 사항은 다음과 같습니다.

Safari 17.2에는 많은 새로운 기능이 포함되어 있습니다. CSS의 경우 CSS Custom Highlight API, mask-border 속성, counter-set 속성 및 기타 여러 기능을 지원합니다. 또한 상호 운용성을 개선하기 위해 기존 기능을 많이 수정했습니다.

HTML의 경우 Safari 17.2에서는 <details> 요소의 name 속성을 지원합니다. Web API의 경우, 이제 <link rel=preload>에서 가져오기 우선순위 및 반응형 이미지를 사용할 수 있습니다.

Firefox 120은 CSS rhrlh 단위, text-wrap: balance, light-dark() 함수 지원을 추가합니다.

웹을 처음 접하는 시리즈의 일부