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

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

안정 버전 브라우저 출시

크롬과 파이어폭스의 격주 간 출시가 시작되는 달입니다. 즉, 2026년 9월 동안 Chrome 153, Chrome 154, Firefox 155, Firefox 156, Firefox 157, 그리고 Safari 27이 안정 버전으로 출시되었습니다. 본 게시물에서는 브라우저 전반에 걸쳐 도입된 새로운 기능들을 살펴보고, 그중 상당수가 Baseline Newly available 상태가 되었음을 알려드립니다.

progress() CSS 함수가 Baseline이 되다

Firefox 155는 progress() CSS 수학 함수를 지원하여 Baseline Newly available하게 만들었습니다.

progress() 함수는 시작 값과 끝 값 사이의 계산 위치를 나타내는 <number>를 반환합니다. 일반적으로 결과값은 0과 1 사이에 제한되므로, 컨테이너나 뷰포트 치수에 기반하여 유동적인 크기(sizing), 불투명도(opacity) 또는 색상을 제어하는 데 유용합니다. Firefox 155와 Safari 27 모두 no-clamp 키워드 옵션에 대한 지원을 추가하여, 반환된 진행 값(progress value)이 0 미만이거나 1 초과로 확장될 수 있도록 했습니다.

.card {
opacity: progress(100vw, 320px, 1200px);
}

alpha()를 사용한 상대적 알파 색상 지원이 Baseline이 되다

Firefox 155와 Safari 27 모두 CSS Color 5의 alpha() 상대 색상 함수를 지원하게 되었습니다.

alpha() 함수는 원본 색상을 받아, 색상 채널과 색 공간은 유지하면서 알파(투명도) 채널만 조정된 해당 색상을 반환합니다:

.overlay {
background-color: alpha(var(--brand-color) / 50%);
}

Chrome 151, Firefox 155, Safari 27 모두 alpha()를 지원함에 따라, 이 함수는 이제 Baseline Newly available 상태가 되었습니다.

CSS 키워드 revert-rule이 Baseline이 되다

Safari 27은 revert-rule CSS 광역(CSS-wide) 키워드를 지원하게 되었습니다.

revert는 캐스케이드(cascade)를 사용자 또는 사용자 에이전트의 원점(origin)으로 되돌리고, revert-layer는 이전 캐스케이드 레이어로 되돌리는 반면, revert-rule은

rolls back
속성(property)의 값을 현재 스타일 규칙이 존재하지 않았을 경우로 되돌립니다. Chrome, Firefox 및 이제 Safari 27에서 지원되는 revert-rule은 Baseline Newly available입니다.

light-dark() 내의 <image> 값들이 Baseline으로 변경됩니다.

Safari 27은 CSS 함수 light-dark() 내부에서 <image> 값을 사용하는 지원을 추가합니다. 이전에 <color> 값에만 제한되었던 light-dark()는 이제 활성화된 light 또는 dark color-scheme에 따라 두 개의 이미지—예를 들어, url() 이미지나 CSS 그라디언트—사이로 전환할 수 있습니다. Chrome, Firefox 및 Safari 27 전반의 지원을 통해, light-dark() 내의 <image> 값들은 이제 Baseline Newly available합니다.

브라우저 지원

overflow-anchor를 사용한 스크롤 앵커링(Scroll anchoring)

Baseline으로 변경됩니다.

Safari 27은 스크롤 앵커링을 활성화하고 overflow-anchor CSS 속성에 대한 지원을 추가합니다. 스크롤 앵커링은 DOM이 조정되어 보이는 뷰포트 위쪽에 콘텐츠가 이동하는 것을 방지하여, 사용자가 페이지를 읽거나 상호 작용할 때 발생하는 갑작스러운 내용의 점프(jump)를 자동으로 조정합니다. overflow-anchor: none을 사용하여 특정 요소를 앵커 노드 역할을 하는 것에서 제외할 수 있습니다. Safari 27이 Chrome 및 Firefox에 합류함에 따라, 스크롤 앵커링은 이제 Baseline Newly available합니다.

font-width 속성과 @font-face 디스크립터가 Baseline으로 변경됩니다.

CSS Fonts 4는 일반(normal), 압축(condensed) 또는 확장(expanded) 글꼴 면을 선택하는 표준 이름으로 font-stretch를 font-width로 대체하고, font-stretch는 레거시 별칭(legacy alias)으로 유지합니다. Firefox 155는 font-width CSS 속성, font-width @font-face 디스크립터 및 CSSStyleDeclaration.fontWidth에 대한 지원을 추가합니다. Chrome 154 또한 @font-face 규칙에서 font-width 디스크립터와 FontFace 객체에서 width 속성을 추가합니다. 기존 Safari 지원과 함께, font-width는 이제 Baseline Newly available합니다.

lazy-loaded 이미지의 `sizes=

elements에 loading="lazy"를 지정할 때

`.

sizes="auto"를 지정하면 (또는 auto로 시작하는 sizes 목록을 사용하면), 브라우저는 지연 로드된 이미지의 렌더링 레이아웃 너비를 사용하여 srcset에서 가장 적절한 이미지 소스를 선택합니다. Chrome, Firefox, 그리고 이제 Safari 27에서 지원되면서, sizes="auto"는 Baseline Newly available 상태가 되었습니다.

비동기 반복 및 전송 가능한 ReadableStream 객체

객체가 Baseline이 됩니다.

Safari 27은 ReadableStream에 대한 여러 업데이트를 포함합니다:

• for await...of 루프와 ReadableStream.prototype.values()를 사용하여 ReadableStream 객체에 대한 비동기 반복 지원.
• postMessage()를 사용하여 컨텍스트 간에 ReadableStream 객체를 전송하는 지원.
• 반복 가능한(iterable) 또는 비동기 반복 가능한(async iterable) 객체로부터 ReadableStream을 생성하기 위한 ReadableStream.from() 정적 메서드 지원 (Firefox에서도 지원됨).

Safari 27로써, 비동기 반복 스트림과 전송 가능한 ReadableStream 객체가 이제 Baseline Newly available 상태가 되었습니다.

브라우저 지원

AnimationEvent.animation 및 TransitionEvent.animation이 Baseline이 됩니다.

Safari 27은 AnimationEvent에 animation 속성을, 그리고 TransitionEvent에 animation 속성을 추가합니다.

이 속성은 CSS 애니메이션 또는 전환 이벤트와 관련된 Animation 객체를 반환하여, 이벤트 리스너에서 애니메이션을 직접 검사하거나 제어하기 쉽게 만듭니다. Chrome, Firefox, 그리고 Safari 27이 이 속성을 지원함에 따라, 이제 Baseline Newly available 상태가 되었습니다.

cookieStore.set()의 maxAge 옵션이 Baseline이 됩니다.

Safari 27은 cookieStore.set()으로 쿠키를 설정할 때 maxAge 옵션에 대한 지원을 추가하여, 쿠키의 수명을 절대적인 expires 타임스탬프를 계산하는 대신 초 단위의 지속 시간으로 지정할 수 있게 합니다. Chrome, Firefox, 그리고 Safari 27 전반에 걸친 지원으로, maxAge 옵션이 이제 Baseline Newly available 상태가 되었습니다.

브라우저 지원

Safari 27의 사용자 정의 가능한 <select>

Safari 27은 사용자 정의 가능한 <select>에 대한 지원을 추가합니다.

menus를 사용하는 appearance: base-select와 <selectedcontent> 요소를 Chrome에 결합합니다.

<select>와 그 ::picker(select) 가상 요소가 appearance: base-select로 전환되어, <option> 요소 내부에 풍부한 HTML 콘텐츠를 허용하고 버튼 및 드롭다운 피커에 대한 사용자 지정 스타일링을 가능하게 합니다.

브라우저 지원

선언적 <camera> 및 <microphone> 요소 (Chrome)

Chrome 153은 <camera>와 <microphone> HTML 기능 요소를 도입합니다.

<usermedia> 요소를 기반으로, <camera>와 <microphone>은 페이지 로드 시 스크립트가 시작하는 권한 프롬프트를 트리거하지 않고 단일 기능 비디오 또는 오디오 캡처 액세스를 요청하기 위한 전용 사용자 활성화 선언적 제어 기능을 제공합니다.

브라우저 지원

JavaScript Iterator 및 Promise 추가 기능

Chrome 153은 Iterator.prototype.join()을 추가하고, Iterator.zip() 및 Iterator.zipKeyed()를 사용한 결합 반복 기능을 제공합니다.

Firefox 155는 Promise.allKeyed()와 Promise.allSettledKeyed()를 구현하여, 프라미스(promises)의 딕셔너리 객체를 받아 동일한 키를 가진 객체로 해결됩니다.

Firefox 155의 WebTransport 업데이트

Firefox 155는 WebTransport 구현을 확장합니다:

• WebTransport() 생성자의 protocols 옵션 및 WebTransport.protocol 속성을 사용하여 애플리케이션 수준 프로토콜 협상 지원. Chrome, Safari, 그리고 이제 Firefox 155에서 지원되어 WebTransport.protocol이 Baseline Newly 사용 가능해집니다.
• createSendGroup(), draining, exportKeyingMaterial(), 및 WebTransportDatagramDuplexStream.createWritable()에 대한 지원.

Safari 27의 Service Worker 정적 라우팅 API

Safari 27은 InstallEvent.addRoutes()를 통해 Service Worker 정적 라우팅 API에 대한 지원을 추가합니다.

이 API는 서비스 워커가 설치 시점에 선언적 라우팅 규칙을 등록할 수 있게 하여, 일치하는 요청이 서비스 워커 시작 과정을 우회하고 네트워크나 캐시에서 직접 가져오도록 함으로써 탐색 성능을 개선합니다.

베타 브라우저 릴리스

베타 브라우저는 다음 안정 버전의 브라우저에 포함될 기능들을 미리 볼 수 있게 해줍니다. 전 세계가 해당 버전을 출시하기 전에, 사이트에 영향을 줄 수 있는 새로운 기능이나 제거된 기능을 테스트해보기 좋은 시기입니다. 이번 달의 새 베타는 Chrome 155, Chrome 156, Firefox 158, 그리고 Safari 27.2입니다.

Chrome 155 베타에는 CSS margin-trim, symbols(), text-decoration-skip-spaces가 포함되며, JPEG XL (image/jxl) 디코딩 지원, 텍스트 모듈 임포트 (`import ... with { type: