게시일: 2026년 6월 2일
Chrome 149가 출시되고 있으며, 이 게시물에서는 이번 출시의 주요 기능을 소개합니다. 전체 Chrome 149 출시 노트를 읽어 보세요.
이번 출시의 주요 내용은 다음과 같습니다.
- CSS gap decorations를 사용하면 그리드 및 Flexbox와 같은 컨테이너 레이아웃의 간격에 스타일을 지정할 수 있습니다.
- 뒤로-앞으로 캐시 항목에서 WebSocket 연결 해제를 사용하면 활성 WebSocket 연결이 있는 페이지가 뒤로-앞으로 캐시에 저장될 수 있습니다.
- Intl.Locale.prototype.variants는 언어의 변형을 반환하거나 설정합니다.
CSS 간격 장식
CSS 간격 장식을 사용하면 그리드 및 Flexbox와 같은 컨테이너 레이아웃의 간격에 스타일을 지정하여 이전에는 복잡한 테두리 및 의사 요소 해킹이 필요했던 일관성과 새로운 스타일 옵션을 제공할 수 있습니다. 이 기능은 점진적 개선에 적합합니다. 지원되지 않는 브라우저에서는 간격이 장식 없이 정상적으로 렌더링됩니다.
column-rule-inset 및 row-rule-inset과 같은 속성을 도입하여 장식을 축소하거나 확장하고 column-rule-visibility-items 및 row-rule-visibility-items을 도입하여 인접한 항목 사이에만 또는 모든 간격에 규칙을 표시합니다. 규칙 너비, 색상, 인셋은 완전히 애니메이션으로 처리할 수 있으므로 마우스 오버 또는 기타 상태 변경 시 전환할 수 있습니다.
CSS 간격 장식 안정화 게시물에서 자세히 알아보세요.
뒤로-앞으로 캐시 항목에서 WebSocket 연결 해제
활성 WebSocket 연결로 인해 더 이상 페이지가 뒤로-앞으로 캐시 (bfcache)에 저장되지 않습니다. 문서를 부적격으로 표시하는 대신 BFCache 항목에서 WebSocket 연결을 사전 예방적으로 닫으면 브라우저에서 활성 WebSocket이 있는 페이지를 메모리에 저장하고 즉시 복원할 수 있습니다.
이전에는 활성 WebSocket 연결이 있으면 사용자가 이동할 때 브라우저가 페이지를 삭제하여 뒤로-앞으로 캐시 (bfcache)에 저장되지 않았습니다.
Intl.Locale.prototype.variants
Intl.Locale 객체는 유니코드 언어 식별자를 나타냅니다.
기본 객체는 기준선 널리 사용 가능입니다.
변형은 기본 언어 식별자의 일부이며 (언어, 지역, 스크립트) 3중 항목으로 구분할 수 없는 언어의 변형을 선택합니다. 이 기능은 이미 Firefox와 Safari에 제공되고 있으며 이제 Chrome에서도 사용할 수 있습니다.
예를 들면 다음과 같습니다.
const locale = new Intl.Locale("sl-rozaj-biske");
console.log(locale.variants); // "rozaj-biske"
Intl.Locale.prototype.variants에 관한 MDN 문서에서 자세히 알아보세요.
추가 자료
여기서는 몇 가지 주요 사항만 다룹니다. Chrome 149의 추가 변경사항은 다음 링크를 참고하세요.
구독
최신 소식을 받아보려면 Chrome Developers YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받으실 수 있습니다. X 또는 LinkedIn에서 팔로우하여 새로운 뉴스 기사와 블로그 게시물을 확인하세요.
Chrome 150이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.