2024년 5월에 안정화 및 베타 웹브라우저에서 출시된 몇 가지 흥미로운 기능을 살펴보세요.
안정적인 브라우저 버전
2024년 5월에 Firefox 126, Safari 17.5, Chrome 125가 안정화되었습니다. 이 게시물에서는 웹 플랫폼에 추가된 새로운 기능을 살펴봅니다.
CSS 앵커 배치
Chrome 125에는 CSS 앵커 배치가 포함되어 있습니다. 이렇게 하면 자바스크립트를 사용하지 않고도 절대 위치로 배치된 요소를 선언적 방식으로 페이지의 다른 하나 이상의 요소 (앵커)에 테더링할 수 있습니다. 앵커 위치를 스크롤할 수 있는 경우 앵커 위치가 원활하게 작동합니다. 일반적인 사용 사례는 팝오버를 호출한 요소 옆에 도움말이나 메뉴 및 팝오버 옵션 목록과 같은 팝오버를 배치하는 것입니다.
CSS 앵커 포지셔닝 API 소개에서 자세히 알아보세요.
CSS 단계별 값 함수: round(), mod(), rem()
또한 Chrome 125에는 계단식 값 함수가 포함되어 있어 이제 이러한 함수를 새로 사용할 수 있습니다. 계단식 값 함수인 round(), mod(), rem()는 모두 다른 '단계 값'에 따라 지정된 값을 변환합니다.
자세한 내용은 2024년 기준 CSS 단계별 값 수학 함수 출시를 참고하세요.
light-dark() 함수
또한 기준 새로 사용 가능 여부를 조인하는 CSS 색상 함수 light-dark()도 Safari 17.5에 있습니다.
light-dark()는 두 개의 인수를 허용하는 함수입니다. 두 인수는 모두 <color>여야 합니다. 사용된 색 구성표에 따라 둘 중 하나가 선택됩니다.
- 사용된 색 구성표가
light이거나 알 수 없는 경우 첫 번째 값의 계산된 값이 반환됩니다. - 사용된 색 구성표가
dark이면 두 번째 색상의 계산된 값이 반환됩니다.
light-dark()를 사용한 CSS 색 구성표 종속 색상 에서 자세히 알아보세요.
화면 Wake Lock API
Firefox 126에 도입된 새로운 기능인 Screen Wake Lock API는 이제 Baseline Newly Available에 포함된 또 다른 기능입니다. 이 API는 기기가 화면을 어둡게 하거나 잠그지 않도록 하는 방법을 제공합니다.
Screen Wake Lock API로 절전모드 해제에서 이 기능을 사용하는 방법을 알아보세요.
Compute Pressure API
Compute Pressure API는 시스템의 CPU 부하를 나타내는 대략적인 상태를 제공합니다. 이를 통해 구현 시 적절한 기본 하드웨어 측정항목을 사용하여 시스템이 관리할 수 없는 스트레스를 받지 않는 한 사용자가 사용 가능한 모든 처리 능력을 활용할 수 있도록 할 수 있습니다.
이 기능은 Chrome 125에 포함되어 있습니다. Intel은 이 API의 설계와 구현 작업을 주도했으며, 이를 통해 화상 회의 앱이 기능과 성능의 균형을 동적으로 맞출 수 있게 될 것입니다.
@starting-style 규칙
Safari 17.5에는 @starting-style 규칙이 포함되어 있습니다. 이 CSS at 규칙을 사용하면 항목 애니메이션에 필요한 경우 요소가 페이지에서 열리기 전에 브라우저가 조회할 수 있는 스타일을 적용할 수 있습니다.
@starting-style 규칙은 원활한 시작 및 종료 애니메이션을 위한 4가지 새로운 CSS 기능에서 다루는 기능 중 하나입니다.
베타 브라우저 출시
베타 브라우저 버전을 사용하면 브라우저의 다음 안정화 버전에서 출시될 기능을 미리 볼 수 있습니다. 전 세계에 출시되기 전에 사이트에 영향을 미칠 수 있는 새로운 기능이나 삭제를 테스트하는 좋은 기회입니다. 새로운 베타는 Firefox 127 및 Chrome 126입니다. 이번 출시로 플랫폼에 다양한 뛰어난 기능이 제공됩니다. 모든 세부정보는 출시 노트를 확인하세요. 몇 가지 주요 특징은 다음과 같습니다.
Chrome 126에는 동일한 출처 탐색을 위한 문서 간 뷰 전환이 포함되어 있습니다. 이전에는 View Transitions API를 사용하려면 웹사이트를 SPA로 다시 설계해야 했습니다. 더 이상 그렇지 않습니다. 이제 동일한 출처 탐색의 뷰 전환이 기본적으로 사용 설정됩니다. 출처가 동일한 두 문서 간에 뷰 전환을 만들 수 있습니다.
Firefox 127에는 추가 JavaScript Set 메서드(intersection(), union(), difference(), symmetricDifference(),isSubsetOf(), isSupersetOf(), isDisjointFrom())가 포함되어 있습니다.