5월 웹 플랫폼 신규 부문

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

2024년 5월에 Firefox 126, Safari 17.5, Chrome 125가 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.

Chrome 125에는 CSS 앵커 포지셔닝이 포함되어 있습니다. 이를 통해 JavaScript를 사용하지 않고도 선언 방식으로 절대 위치 지정된 요소를 페이지의 다른 요소 (앵커) 하나 이상에 연결할 수 있습니다. 앵커가 스크롤 가능한 경우 앵커 위치 지정이 성능이 우수합니다. 일반적인 사용 사례는 도움말과 같은 팝오버를 호출한 요소 옆에 배치하거나 선택 메뉴와 팝오버 옵션 목록을 배치하는 것입니다.

CSS 앵커 위치 지정 API 소개에서 자세히 알아보세요.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

CSS 계단식 값 함수: round(), mod(), rem()

Chrome 125에는 단계적 값 함수도 포함되어 있습니다. 즉, 이제 이러한 함수를 기준으로 새로 사용할 수 있습니다. 계단식 값 함수 round(), mod(), rem()는 모두 다른 '계단식 값'에 따라 주어진 값을 변환합니다.

CSS 계단식 값 수학 함수가 이제 기준 2024에 포함됨에서 자세히 알아보세요.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 118.
  • Safari: 15.4.

Source

light-dark() 함수

또한 Safari 17.5에 있는 CSS 색상 함수 light-dark()도 새로 사용 가능한 기준에 포함됩니다.

light-dark()는 두 개의 인수를 허용하는 함수이며 두 인수 모두 <color>여야 합니다. 사용되는 색 구성표에 따라 둘 중 하나가 선택됩니다.

  • 사용된 색 구성표가 light이거나 알 수 없는 경우 첫 번째 값의 계산된 값이 반환됩니다.
  • 사용된 색 구성표가 dark이면 두 번째 색상의 계산된 값이 반환됩니다.

light-dark()를 사용한 CSS 색 구성표 종속 색상 에서 자세히 알아보세요.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Screen Wake Lock API

Firefox 126에는 이제 Baseline Newly Available의 일부인 또 다른 기능인 Screen Wake Lock API가 제공됩니다. 이 API는 기기에서 화면을 어둡게 하거나 잠그지 못하도록 하는 방법을 제공합니다.

Screen Wake Lock API를 사용하여 화면 켜짐 유지에서 이 기능을 사용하는 방법을 알아보세요.

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

Compute Pressure API

Compute Pressure API는 시스템의 CPU 부하를 나타내는 대략적인 상태를 제공합니다. 이를 통해 구현은 올바른 기본 하드웨어 측정항목을 사용하여 시스템이 관리할 수 없는 스트레스를 받지 않는 한 사용자가 사용 가능한 모든 처리 성능을 활용할 수 있도록 합니다.

이 기능은 Chrome 125에서 사용할 수 있습니다. Intel은 화상 회의 앱에서 기능과 성능의 균형을 동적으로 맞출 수 있는 이 API의 설계 및 구현 작업을 주도했습니다.

Compute Pressure API 문서를 읽어보세요.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

@starting-style 규칙

Safari 17.5에는 @starting-style 규칙이 포함되어 있습니다. 이 CSS at-rule을 사용하면 진입 애니메이션에 필요한 경우 페이지에서 요소가 열리기 전에 브라우저가 조회할 수 있는 스타일을 적용할 수 있습니다.

@starting-style 규칙은 원활한 진입 및 종료 애니메이션을 위한 4가지 새로운 CSS 기능에 설명된 기능 중 하나입니다.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

베타 브라우저 출시

베타 브라우저 버전에서는 다음번 브라우저의 안정화 버전에 포함될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 줄 수 있는 새 기능이나 삭제를 테스트해 보세요. 새로운 베타는 Firefox 127Chrome 126입니다. 이번 출시에서는 플랫폼에 여러 가지 멋진 기능이 추가되었습니다. 자세한 내용은 출시 노트를 참고하세요. 다음은 몇 가지 주요 내용입니다.

Chrome 126에는 동일한 출처 탐색을 위한 교차 문서 뷰 전환이 포함되어 있습니다. 이전에는 View Transitions API를 사용하려면 웹사이트를 SPA로 재구성해야 했습니다. 더 이상 그렇지 않습니다. 이제 동일 출처 탐색에 대해 뷰 전환이 기본적으로 사용 설정됩니다. 출처가 동일한 두 개의 서로 다른 문서 간에 뷰 전환을 만들 수 있습니다.

Firefox 127에는 JavaScript Set 메서드(intersection(), union(), difference(), symmetricDifference(),isSubsetOf(), isSupersetOf(), isDisjointFrom())가 추가되었습니다.