5월 웹 플랫폼 신규 부문

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

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

Chrome 125에는 CSS 앵커 배치가 포함되어 있습니다. 이렇게 하면 자바스크립트를 사용하지 않고도 절대 위치로 배치된 요소를 선언적 방식으로 페이지의 다른 하나 이상의 요소 (앵커)에 테더링할 수 있습니다. 앵커 위치를 스크롤할 수 있는 경우 앵커 위치가 원활하게 작동합니다. 일반적인 사용 사례는 팝오버를 호출한 요소 옆에 도움말이나 메뉴 및 팝오버 옵션 목록과 같은 팝오버를 배치하는 것입니다.

CSS 앵커 포지셔닝 API 소개에서 자세히 알아보세요.

브라우저 지원

  • 125
  • 125
  • x
  • x

소스

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

또한 Chrome 125에는 계단식 값 함수가 포함되어 있어 이제 이러한 함수를 새로 사용할 수 있습니다. 계단식 값 함수인 round(), mod(), rem()는 모두 다른 '단계 값'에 따라 지정된 값을 변환합니다.

자세한 내용은 2024년 기준 CSS 단계별 값 수학 함수 출시를 참고하세요.

브라우저 지원

  • 125
  • 125
  • 118
  • 15.4

소스

light-dark() 함수

또한 기준 새로 사용 가능 여부를 조인하는 CSS 색상 함수 light-dark()도 Safari 17.5에 있습니다.

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

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

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

브라우저 지원

  • 123
  • 123
  • 120
  • 17.5리라

소스

화면 Wake Lock API

Firefox 126에 도입된 새로운 기능인 Screen Wake Lock API는 이제 Baseline Newly Available에 포함된 또 다른 기능입니다. 이 API는 기기가 화면을 어둡게 하거나 잠그지 않도록 하는 방법을 제공합니다.

Screen Wake Lock API로 절전모드 해제에서 이 기능을 사용하는 방법을 알아보세요.

브라우저 지원

  • 84
  • 84
  • 126
  • 16.4

소스

Compute Pressure API

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

이 기능은 Chrome 125에 포함되어 있습니다. Intel은 이 API의 설계와 구현 작업을 주도했으며, 이를 통해 화상 회의 앱이 기능과 성능의 균형을 동적으로 맞출 수 있게 될 것입니다.

Compute Pressure API 문서 읽어보기

브라우저 지원

  • 125
  • 125
  • x
  • x

소스

@starting-style 규칙

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

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

브라우저 지원

  • 117
  • 117
  • x
  • 17.5리라

소스

베타 브라우저 출시

베타 브라우저 버전을 사용하면 브라우저의 다음 안정화 버전에서 출시될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제를 테스트하는 좋은 기회입니다. 새로운 베타는 Firefox 127Chrome 126입니다. 이번 출시로 플랫폼에 다양한 뛰어난 기능이 제공됩니다. 모든 세부정보는 출시 노트를 확인하세요. 몇 가지 주요 특징은 다음과 같습니다.

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

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