2026년 7월 웹 플랫폼 업데이트 소식

2026년 7월 동안 안정(stable) 및 베타(beta) 웹 브라우저에 출시된 흥미로운 기능들을 소개합니다.

안정 브라우저 릴리스

Chrome 151, Firefox 153, 그리고 Safari 26.6이 2026년 7월 동안 안정 버전으로 출시되었습니다. 본 게시물에서는 이번 달 웹 플랫폼 전반에 걸쳐 추가되는 새로운 기능들을 살펴봅니다.

Firefox 153의 HTML 파서 업데이트로 커스터마이징 가능한 <select> 지원

Firefox 153은 <select> 요소의 HTML 파싱 규칙을 업데이트했습니다. 이전에는 <select> 내부에 자식으로 파싱될 수 있는 요소가 <option>, <optgroup>, 그리고 <hr>에 한정되었습니다. 이번 업데이트를 통해 모든 중첩 요소가 <select> 내부에서 DOM(Document Object Model)으로 파싱될 수 있게 되어, 브라우저 전반에 걸쳐 커스터마이징 가능한 select 요소를 위한 기반을 마련했습니다.

ruby-overhang CSS 속성 지원 (Chrome 151)

Chrome 151은 ruby-overhang CSS 속성 지원을 추가했습니다. 이 속성은 루비 주석(ruby annotation) 텍스트가 인접한 기본 문자(base characters)를 넘어설 수 있는지 여부를 제어합니다. 이 속성은 auto, spaces, 또는 none 키워드를 받습니다. CSS 명세에 따라 none은 spaces의 별칭(alias)이며, 이는 루비 텍스트가 공백과 CJK 구두점만을 넘어설 수 있도록 하여 가독성을 유지하면서도 불필요한 레이아웃 간격을 방지합니다.

선언적 Shadow DOM 수동 슬롯 할당 (Chrome 151)

Chrome 151은 <template> 요소에 shadowrootslotassignment 속성을 도입했습니다. 이 속성은 선언적(declarative) 섀도우 루트가 이름 지정된 슬롯 할당(named slot assignment) 대신 수동 슬롯 할당을 구성할 수 있도록 합니다. 이전에는 수동 슬롯 할당이 `attachShadow({slotAssignment:

이벤트와 관련된 객체로, 이벤트 리스너 내부에서 애니메이션 상태를 직접 조회할 수 있게 합니다.

Firefox의 데스크톱 Picture-in-Picture API

Firefox 153은 데스크톱 플랫폼에 Picture-in-Picture API 지원을 추가합니다. 이를 통해 웹사이트가 <video> 요소의 표시를 페이지와 항상 최상단에 떠 있는 창 사이에서 전환할 수 있는 표준 웹 API를 제공하며, 사용자가 탭을 전환하거나 다른 애플리케이션과 상호 작용하는 동안에도 비디오 콘텐츠 시청을 계속할 수 있게 합니다.

Intl.Locale Info API

Firefox 153은 TC39의 Intl.Locale info proposal 지원을 추가합니다. 이는 Intl.Locale 인스턴스에 getCalendars(), getCollations(), getHourCycles(), getNumberingSystems(), getTextInfo(), getTimeZones(), 그리고 getWeekInfo()를 포함한 여러 getter 메서드를 추가합니다. 이 메서드들은 개발자가 외부 국제화 데이터 라이브러리를 필요로 하지 않고도 로케일별 규칙을 검사할 수 있게 합니다.

이번 릴리스를 통해 이 메서드들이 Baseline Newly 사용 가능해졌습니다.

const jaJP = new Intl.Locale("ja-JP");
console.log(jaJP.getCalendars()); // ["gregory", "japanese"]

IDBObjectStore.getAllRecords()와 IDBIndex.getAllRecords()

Firefox 153은 IDBObjectStore.getAllRecords()와 IDBIndex.getAllRecords()를 도입합니다. 이 IndexedDB 메서드들은 단일 요청으로 모든 일치하는 레코드(기본 키, 인덱스 키 및 값 포함)를 검색하여, 데이터셋 부분 집합 또는 전체 객체 저장소 내용을 가져올 때 복잡한 커서 반복 로직을 작성할 필요성을 제거합니다.

Response, Request, 및 Blob용 textStream()

Chrome 151은 Response, Request, 그리고 Blob 객체에 textStream() 메서드를 추가합니다. 이 편리한 헬퍼 메서드는 바이너리 본문 데이터에서 디코딩된 텍스트 문자열 스트림을 읽기 쉬운 형태로 직접 제공하며, 이는 body를 TextDecoderStream()을 통해 파이프하는 것과 동일합니다.

브라우저 지원

<usermedia> 커패빌리티 엘리먼트 MVP

capability 요소.
이 브라우저 제어 요소는 카메라 및 마이크 접근을 요청하기 위한 명시적이고 사용자 주도적인 메커니즘을 제공합니다. 권한 프롬프트를 신뢰할 수 있는 요소와의 명확한 사용자 상호작용에 고정함으로써, <usermedia>
은 프롬프트 투명성과 사용자 경험을 향상시키고, 이전에 권한이 거부되었을 경우 간단한 복구 경로를 제공합니다.

자세히 알아보기:
HTML <usermedia> 요소를 소개합니다.

Safari 26.6의 버그 수정 및 품질 개선 업데이트

Safari 26.6은 중요한 버그 수정 및 안정성 향상과 함께 출시되었습니다:

• 페이지 확대/축소에 따라 ic 길이 단위가 잘못 조정되던 문제 수정.
• 페이지 본문이 스크롤 가능한 경우 고정 위치 요소의 position-area 폴백 동작 수정.
• iPad에서 데스크톱 사이트를 요청할 때 CSS zoom과 폰트 속성(font-size, font-weight, font-style, font-variant) 간의 상호작용 수정.
• 쿠키 헤더를 사용한 파티션된 쿠키 삭제 기능 수정.

베타 브라우저 출시

베타 브라우저 버전은 다음 안정화 릴리스에 포함될 기능을 미리 볼 수 있게 해줍니다. 새로운 기능을 테스트하거나 모든 사용자에게 도달하기 전에 깨지는 변경 사항(breaking changes)을 확인할 이상적인 시기입니다. 이번 달의 새 베타는 Chrome 152, Firefox 154, 그리고 Safari 27입니다.

Chrome 152 베타에는 ::backdrop, ::scroll-marker, 및 ::view-transition에 대한 CSSPseudoElement 지원, 전역 autocorrect HTML 속성, 미디어 요소 의사 클래스(:playing, :paused, :muted), CSS Color 5의 alpha() 상대 색상 함수, window-drag 속성, CPU Performance API 및 WebGPU 서브그룹 크기 제어가 포함됩니다.

Firefox 154 베타는 RTCIceTransport.getSelectedCandidatePair()와 selectedcandidatepairchange 이벤트, 그리고 RTCDtlsTransport의 error 이벤트를 포함하여 WebRTC 전송 개선 사항을 도입합니다.

Safari 27 베타에는 스크린 리더 발표를 위한 ariaNotify API, contain: style 등 방대한 양의 새로운 기능이 포함됩니다.

인용 카운터(quote counters)를 위한 대소문자 구분(s)

속성 선택자(attribute selectors)의 수정자(modifier), stretch

박스 크기 지정(box sizing)을 위한 키워드, :host:has()

복합 선택자(compound selectors), :heading

가상 클래스(pseudo-class), revert-rule

키워드, 변형 인식 앵커 위치 지정(transform-aware anchor positioning), color-mix()

두 개 이상의 색상을 포함하는 경우, 그리고 no-clamp

<progress> 태그의 옵션인 progress()